js面试题-11月

11.1

1. requestAnimationFrame是什么？

比setTimeout性能更好，专门用来写动画

• requestAnimationFrame的用法与setTimeout很相似，只是不需要设置时间间隔而已。requestAnimationFrame使用一个回调函数作为参数，这个回调函数会在浏览器重绘之前调用。它返回一个整数，表示定时器的编号，这个值可以传递给cancelAnimationFrame用于取消这个函数的执行

2.面试：requestAnimationFrame为什么能优化动画性能？

与setTimeout相比

• requestAnimationFrame最大的优势是由系统来决定回调函数的执行时机。具体一点讲，如果屏幕刷新率是60Hz,那么回调函数就每16.7ms被执行一次，如果刷新率是75Hz，那么这个时间间隔就变成了1000/75=13.3ms，换句话说就是，「requestAnimationFrame的步伐跟着系统的刷新步伐走」，「它能保证回调函数在屏幕每一次的刷新间隔中只被执行一次」，「这样就不会引起丢帧现象，也不会导致动画出现卡顿的问题」。

除此之外，requestAnimationFrame还有以下两个优势：

• 「CPU节能」：使用setTimeout实现的动画，当页面被隐藏或最小化时，setTimeout 仍然在后台执行动画任务，由于此时页面处于不可见或不可用状态，刷新动画是没有意义的，完全是浪费CPU资源。而requestAnimationFrame则完全不同，当页面处理未激活的状态下，该页面的屏幕刷新任务也会被系统暂停，因此跟着系统步伐走的requestAnimationFrame也会停止渲染，当页面被激活时，动画就从上次停留的地方继续执行，有效节省了CPU开销。

• 「函数节流」：在高频率事件(resize,scroll等)中，为了防止在一个刷新间隔内发生多次函数执行，使用requestAnimationFrame可保证每个刷新间隔内，函数只被执行一次，这样既能保证流畅性，也能更好的节省函数执行的开销。一个刷新间隔内函数执行多次时没有意义的，因为显示器每16.7ms刷新一次，多次绘制并不会在屏幕上体现出来。

2.浏览器底层渲染机制？

• 浏览器拿到页面代码后，会开始渲染和解析代码，最后在页面中渲染出图形和效果

• 1. DOM树：拿到所有的HTML结构，渲染DOM树

     2.CSSOM树：拿所有样式结构，渲染CSSOM树

     3.render Tree :DOM树+CSSOM树 生成 render Tree

     4.回流：计算元素在页面上的位置和大小=>Layout(布局排列)（回流）（重排）

     5.重绘：绘制元素颜色等其他信息=>重绘

3.DOM中的(回流)重排与重绘？

触发了回流一定一定会触发重绘，触发了重绘不一定会触发回流

• 重排：
  • 页面第一次绘制完成后，如果我们修改了页面中节点的’位置、大小、结构等样式’，浏览器需要重新计算绘制规则，(也就是重新生成Render-Tree)，这个过程就是重排，重排生成Render-Tree后需要重绘。
• 重绘：
  • 如果节点的位置、大小、结构等样式没有改变，只是改变了一些基础的样式（例如：改变了文字或背景的颜色），此时无需生成Render-Tree，只需要重新Painting绘制即可。

4.如何做到性能优化：减少DOM的重排(回流)？

• 1.放弃直接操作DOM：使用vue/react/angular等数据驱动框架
• 2.读写分离/样式集中改变:把修改样式和获取样式的操作分离开，避免渲染队列的刷新
• 3.元素的批量操作:文档碎片、模板字符串拼接等
• 4.开启GPU加速：
  • 修改’transform’样式，不会引发重排
  • 尽可能修改脱离文档流的{BFC}元素节点，虽然也会引发重排，但只是对当前层进行处理，其他层没有改变，不需要重新渲染。
• 5.基于CSS实现动画：比基于JS实现动画性能更好
  • 基于JS实现：{定时器触发、requestAnimationFrame}，我们会牺牲平缓度换取速度（性能）
  • 基于CSS实现：{transition、animation}他们性能更好

5.什么是读写分离？

• 渲染队列机制：在当前上下文中，遇到一行修改样式的代码，浏览器并没有立即渲染，先放到渲染队列里，观察是否还有修改的样式，有，同样放进去，直接打没有修改样式的代码，遇到获取样式的操作，就会去刷新渲染队列。会重新渲染1次。

6.元素的批量操作？如何解决元素循环生成的多次重排？

• 当我们在for循环中直接在DOM树上appendChild时，循环多少次，就会引发多少次重排

• 解决方法：

  • 模板字符串拼接：在for循环中用模板字符串拼接，再将拼接的子串

  • 创建文档碎片：文档碎片不会导致重排，先将批量操作的元素放到文档碎片中，再重排到父元素中

    //用document.createDocumentFragment创建文档碎片
    document.createDocumentFragment();
    //