## 回流与重绘 回流：当渲染树中部分或者全部元素的尺寸、结构或者属性发生变化时，浏览器会重新渲染。 重绘：某些元素的样式变化，但不会影响其在文档流中的位置时，浏览器就会对元素进行重新绘制。 ### 触发条件 触发回流： > 页面的首次渲染 > 浏览器的窗口大小发生变化 > 元素的内容（input中输入文字会导致）、尺寸、位置、字体大小发生变化 > 激活CSS伪类 > 查询某些属性或者调用某些方法 > js操作dom：添加或者删除可见的DOM元素 触发重绘： > color、background 相关属性：background-color、background-image 等 > outline 相关属性：outline-color、outline-width 、text-decoration > border-radius、visibility、box-shadow 注意： 当触发回流时，一定会触发重绘，但是重绘不一定会引发回流。 ### 减少回流与重绘的措施 浏览器针对页面的回流与重绘，进行了自身的优化——渲染队列 浏览器会将所有的回流、重绘的操作放在一个队列中，当队列中的操作到了一定的数量或者到了一定的时间间隔，浏览器就会对队列进行批处理。这样就会让多次的回流、重绘变成一次回流重绘。 > 1，触发动画的开始不要用diaplay:none属性值，因为它会引起Layout、Paint环节，通过切换类名就已经是一种很好的办法。 > > 2，translate属性值来替换top/left/right/bottom的切换，scale属性值替换width/height，opacity属性替换display/visibility等等 > > 3， 优化动画，使用3D启用GPU硬件加速 > > 4, 不要使用table布局， 一个小的改动可能会使整个table进行重新布局 > > 5, 使用absolute或者fixed，使元素脱离文档流，这样他们发生变化就不会影响其他元素 > > 6，避免频繁操作DOM，创建一个文档片段documentFragment，在它上面应用所有DOM操作，最后再把它添加到文档中 ### documentFragment 渲染几万条数据且不卡住页面 ### 如何优化动画 动画需要频繁的操作DOM，就就会导致页面的性能问题，我们可以将动画的position属性设置为absolute或者fixed，将动画脱离文档流，这样他的回流就不会影响到页面了。 - **requestAnimationFrame代替setTimeout和setInterval** - * 为什么setTimeout和setInterval不好？ 由于js是单线程执行，所以为了防止某个任务执行时间过长而导致进程阻塞，js中存在异步队列的概念， 对于如setTimeout和ajax请求都是把进程放到了异步队列中，当主进程为空时才执行异步队列中的任务。 所以 setTimeout和setInterval无法保证回调函数的执行时机，可能会在一帧之内执行多次导致多次页面渲染，浪费CPU资源甚至产生卡顿，或者是在一帧即将结束时执行导致重新渲染，出现掉帧的情况。 - * requestAnimationFrame是怎么优化的？ CPU节能，当页面被隐藏或最小化时，暂停渲染。 函数节流，其循环间隔是由屏幕刷新频率决定的，保证回调函数在屏幕的每一次刷新间隔中只执行一次。 - **DOM无关的耗时操作放到Web Worker中** Web Worker的好处是什么？ > JavaScript是单线程的，如果频繁的进行耗时操作（如实时更新数据），就会造成拥堵，影响用户交互体验. > > Web Worker为JS创建了多线程环境，worker线程在后台运行，受主线程控制，两者互不干扰。 > > worker线程负担高延迟且UI无关的任务，主线程负责UI交互就会相对流畅。 需要注意 Web Worker无法操作DOM，本质上只是将数据刷新和页面渲染拆开执行。 Web Worker遵循同源策略且限制本地访问。 用一次多余的网络请求和浏览器线程资源来换取高效执行。 - transition 和animate transition：一般用来做过渡的, 没时间轴的概念， 通过事件触发(一次),没中间状态(只有开始和结束) animate：做动效，有时间轴的概念(帧可控)，可以重复触发和有中间状态； 过渡的开销比动效小，前者一般用于交互居多，后者用于活动页居多; ------- ------- ------ ------ ----- 1、什么是reflow? reflow(回流)是指浏览器为了重新渲染部分或者全部的文档,重新计算文档中的元素的位置和几何构造的过程。 因为回流可能导致整个Dom树的重新构造,所以是性能的一大杀手。 以下操作会引起回流： ① 改变窗口大小 ② font-size大小改变 ③ 增加或者移除样式表 ④ 内容变化（input中输入文字会导致） ⑤ 激活CSS伪类（:hover） ⑥ 操作class属性，新增或者减少 ⑦ js操作dom ⑧ offset相关属性计算 ⑨ 设置style的值 ...... reflow与repaint是减缓js的几大主要原因，尤其是reflow更是性能杀手，所以我们应该想法避免。