前端面试题（一）

一. 函数防抖和函数节流

作用：

降低性能消耗，例如mousemove（移动）,scroll（滚动）,drag（拖拽）,resize（窗口变化）等事件，触发过程中都是需要大量的计算，这时候会很消耗内存，所以需要一点手段来降低性能消耗，这就是函数防抖和函数节流的作用。

1.函数防抖：就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。

简单的说，当一个动作连续触发，则只执行最后一次。

函数防抖的应用场景：

连续的事件，只需触发一次回调的场景有：

• 搜索框搜索输入。只需用户最后一次输入完，再发送请求
• 手机号、邮箱验证输入检测
• 窗口大小Resize。只需窗口调整完成后，计算窗口大小。防止重复渲染。

2.函数节流：限制一个函数在一定时间内只能执行一次。

规定一个单位时间，在这个单位时间内，只能有一次触发事件的回调函数执行，如果在同一个单位时间内某事件被触发多次，只有一次生效。

间隔一段时间执行一次回调的场景有：

• 滚动加载，加载更多或滚到底部监听
• 谷歌搜索框，搜索联想功能
• 高频点击提交，表单重复提交

二. 浏览器的回流和重绘

注意：回流一定会触发重绘，而重绘不一定会回流

重绘：当前元素的样式(背景颜色、字体颜色等)发生改变的时候，我们只需要把改变的元素重新的渲染一下即可，重绘对浏览器的性能影响较小，所以 一般不考虑。

发生重绘的情形：改变容器的外观风格等，比如background：black等。改变外观，不改变布局，不影响其他的dom。

回流：是指浏览器为了重新渲染部分或者全部的文档而重新计算文档中元素的位置和几何构造的过程。
因为回流可能导致整个dom树的重新构造，所以是性能的一大杀手
触发回流的操作
1.调整窗口大小
2.改变字体（Changing the font）
3.增加或者移除样式表
4.内容变化，比如用户在input框中输入文字
5.激活 CSS 伪类，比如 :hover (IE 中为兄弟结点伪类的激活)
6.操作 class 属性
7.脚本操作 DOM
8.计算 offsetWidth 和 offsetHeight 属性
9.设置 style 属性的值
10.fixed定位的元素,在拖动滚动条的时候会一直回流
如何避免回流

1. 一起变化：如果要改变一个元素的样式，可以将所有样式集中在一个class上面 一次变化，而不是变化几次
2. 具有动画效果请使用absolute
3. 避免使用表格布局
4. 不要使用CSS表达式
5. 在最末改变元素

三. 浏览器是如何渲染页面得

1.解析HTML，构建DOM树
2.解析CSS，生成CSS规则树
3.合并DOM树和CSS规则，生成render树
4.布局render树（Layout/reflow），负责各元素尺寸、位置的计算
5.绘制render树（paint），绘制页面像素信息
6.浏览器会将各层的信息发送给GPU，GPU会将各层合成（composite），显示在屏幕上。