8.28面试基本问题总结
1.浏览器的渲染机制是什么?
详细理解:
个人理解:
当用户打开一个url之后,浏览器向服务器发出请求。HTML解析器会将HTML解析成一棵DOM树(深度遍历),将CSS解析成CSSOM树,根据DOM树和CSSOM树构建渲染树(Render Tree)。下一步就是layout,计算位置。最后painting,通过显卡画到屏幕上。
2.什么是回流(reflow)重绘(repaint)?
重绘Repaint
改变某个元素的背景色、文字颜色、边框颜色等不影响它周围或内部布局的属性,需要重绘。元素的几何尺寸没有改变。
回流Reflow
元素的几何尺寸变了,需要重新验证并计算Render Tree,其中一部分或全部发生了变化。只要行为引起了页面的某些元素的占位面积、定位方式、边距等属性的变化,都会引起它内部、周围甚至整个页面的重新渲染。
注意:display:none会触发reflow,而visibility:hidden只会触发repaint,因为没有发现位置变化。
3.简述BFC
BFC块格式化上下文
详细解释: MDN文档
块格式化上下文(Block Formatting Context,BFC) 是Web页面的可视化CSS渲染的一部分,是块盒子的布局过程发生的区域,也是浮动元素与其他元素交互的区域。
下列方法会创建BFC:
- 根元素(< html >)
- 浮动元素(元素的 float 不是 none)
- 绝对定位元素(元素的 position 为 absolute 或fixed)
- 行内块元素(元素的 display 为 inline-block)
- 表格单元格(元素的 display为 table-cell,HTML表格单元格默认为该值)
- 表格标题(元素的 display 为table-caption,HTML表格标题默认为该值)
- 匿名表格单元格元素(元素的 display为 table、table-row、table-row-group、table-header-group、table-footer-group(分别是HTMLtable、row、tbody、thead、tfoot的默认属性)或 inline-table)
- overflow 值不为 visible的块元素
- display 值为 flow-root 的元素
- contain 值为 layout、content或 paint 的元素
- 弹性元素(display为 flex 或 inline-flex元素的直接子元素)
- 网格元素(display为 grid 或inline-grid 元素的直接子元素)
- 多列容器(元素的 column-count 或 column-width 不为 auto,包括column-count 为 1)
- column-span 为 all的元素始终会创建一个新的BFC,即使该元素没有包裹在一个多列容器中(标准变更,Chrome bug)。
外边距折叠(Margin collapsing)
块级元素的上下外边距(margin)在某些情况下会合并(折叠)起来,合并之后的大小为较大的margin。注意浮动和绝对定位的元素的margin从不折叠。
外边距折叠应该叫垂直外边距折叠,因为只会发生在垂直方向上,而水平方向上不会发生。
发生的情况/条件
- 位置(垂直方向上)相邻的两个元素
- .父元素和第一个/最后一个子元素之间
- 外边距折叠也只会发生在属于同一BFC的块级元素之间。
举例
<body>
<div class="div one">1</div>
<div class="div two">2</div>
</body>
<style>
.div{
width: 100%;
height: 20px;
background: #cccccc;
}
.one{
margin-bottom: 50px;
}
.two{
margin-top: 30px;
}
根据以上代码可以看出,两个div都在同一个BFC(< html >)下,并且两个div是垂直相邻,在浏览器上运行会发现发生了外边据折叠,即显示的边距是50px,而不是80px。
<div class="div one">1</div>
<div style="display: flow-root;">
<div class="div two">2</div>
</div>
把第2个div包裹到一个新的父级div中,并把父级div加上display: flow-root;
,使之成为一个新的BFC,再运行会发现两个div之间的间隔变成了80px。
4.MVVM
详细解释:简述MVVM,从MVC、MPV到MVVM
我觉得要理解MVVM可以读前端为什么需要MVVM框架
个人理解: MVVM是最大限度的把View和Model分开,将两者关联起来的就是ViewModel,ViewModel负责把Model的数据同步到View显示出来,还负责把View的修改同步回Model。我认为MVVM最核心的是不关心DOM的结构、不操作DOM,而是直接修改JS对象,关注Model的变化。
5.VUE双向绑定的原理
单向绑定非常简单,就是把Model绑定到View,当我们用JavaScript代码更新Model时,View就会自动更新。
有单向绑定,就有双向绑定。如果用户更新了View,Model的数据也自动被更新了,这种情况就是双向绑定。
简单来说: vue数据双向绑定是通过 数据劫持 结合发布者-订阅者的方式来实现的。通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应的监听回调。
vue是通过**Object.defineProperty()**来实现数据劫持的。
- 具体怎么实现数据劫持
- 自己实现一个简单的vue双向绑定
Object.defineProperty( )是用来做什么的?它可以来控制一个对象属性的一些特有操作,比如读写权、是否可以枚举,这里我们主要先来研究下它对应的两个描述属性get和set
get get就是在读取(读)name属性这个值触发的函数
set set就是在设置(写)name属性这个值触发的函数
6.JS中 触发冒泡事件
这部分比较重要,需要单独描述。另写
7.节流、防抖是什么?怎么实现?
这部分比较重要,需要单独描述。另写
https://blog.csdn.net/weixin_44769310/article/details/100164755
8.Promise异步请求 什么是宏任务和微任务
这部分比较重要,需要单独描述。另写
9.前端怎么优化?
这部分比较重要,需要单独描述。另写