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.前端怎么优化？
这部分比较重要，需要单独描述。另写
2578
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
