上一篇:《前端常见面试题汇总(一)》
1.css实现双飞翼布局,三列布局,中间宽度自适应,两边定宽;假设高度固定300px
2.css实现内容垂直居中
1.父级元素设置table-cell
display: table-cell;
vertical-align: middle;
text-align: center;
2.父级元素设置flex
display: flex;
justify-content:center;
align-items:Center;
3.计算设置margin
4.绝对定位position:absolute
5.计算使用transform: translate(-100px,-75px);
3.行内元素有哪些?块级元素有哪些? 空(void)元素有那些?
行内元素:a、b、span、img、input、strong、select、label、em、button、textarea
块级元素:div、ul、li、dl、dt、dd、p、h1-h6、blockquote
空元素:即系没有内容的HTML元素,例如:br、meta、hr、link、input、img
4.为什么虚拟 dom 会提高性能?
虚拟 dom 相当于在 js 和真实 dom 中间加了一个缓存,利用 dom diff算法避免了没有必要的 dom 操作,从而提高性能。
用 JavaScript 对象结构表示 DOM 树的结构;然后用这个树构建一个真正的 DOM 树,插到文档当中当状态变更的时候,重新构造一棵新的对象树。然后用新的树和旧的树进行比较,记录两棵树差异把 2 所记录的差异应用到步骤 1 所构建的真正的 DOM 树上,视图就更新了。
5.什么是盒子模型?
点击链接:https://blog.csdn.net/qq_36711388/article/details/89979034
6.web前端开发,如何提高页面性能优化?
内容方面:
1.减少 HTTP 请求 (Make Fewer HTTP Requests)
2.减少 DOM 元素数量 (Reduce the Number of DOM Elements)
3.使得 Ajax 可缓存 (Make Ajax Cacheable)
针对CSS:
1.把 CSS 放到代码页上端 (Put Stylesheets at the Top)
2.从页面中剥离 JavaScript 与 CSS (Make JavaScript and CSS External)
3.精简 JavaScript 与 CSS (Minify JavaScript and CSS)
4.避免 CSS 表达式 (Avoid CSS Expressions)
针对JavaScript :
-
脚本放到 HTML 代码页底部 (Put Scripts at the Bottom)
-
从页面中剥离 JavaScript 与 CSS (Make JavaScript and CSS External)
-
精简 JavaScript 与 CSS (Minify JavaScript and CSS)
-
移除重复脚本 (Remove Duplicate Scripts)
面向图片(Image):
1.优化图片
2 不要在 HTML 中使用缩放图片
3 使用恰当的图片格式
4 使用 CSS Sprites 技巧对图片优化