（本篇是学习阮一峰文章后的整理）
在网页中，重排和重绘会不断触发，这是不可避免的。
但是，它们非常耗费资源，是导致网页性能低下的根本原因。
从这个角度考虑的话，我们想提高网页性能，就必须降低"重排"和"重绘"的频率和成本，尽量少触发重新渲染。
首先，浏览器有一个重要的机制，它会把一小段时间内的多次重排、重绘集中到了一起执行，以此来提高性能，减少重排次数，
不过，如果我们使用那些会让浏览器获取某些数据，比如某个元素的位置、滚动位置，那么浏览器会立刻重排，给我们提供最准确的数据；
优化技巧：
1.DOM 的多个读操作（或多个写操作），应该放在一起。不要两个读操作之间，加入一个写操作。
2.不要一条条地改变样式，而要通过改变class，或者csstext属性，一次性地改变样式。
3.尽量使用离线DOM，而不是真实的网面DOM，来改变元素样式。比如，DocumentFragment，或 cloneNode()
4.也可以先 display: none ，然后随便操作，最后再恢复显示
5.position属性为absolute或fixed的元素，重排的开销会比较小，因为不用考虑它对其他元素的影响。
6.还可以考虑，“只在必要的时候，才将元素的display属性为可见”
7.使用虚拟DOM(vue, react)
8.window.requestAnimationFrame() 方法，就个是“节流”的思想，将代码放到下一次重新渲染时执行。 页面滚动事件（scroll）的监听函数，还有网页动画，就很适合用 window.requestAnimationFrame()
还有另一个，window.requestIdleCallback()，把函数放到浏览器的空闲时段内调用
9.如果你已经知道图片的宽高了，你最好是写在内联样式上。
这样图片在下载完之前，浏览器会根据你的宽高占一个位置，如果没有宽高，图片下载下来后，整个页面会发生重排。
最后，针对跟我一样要准备面试的小伙伴，我整理了个口诀：
"读条离线虚拟图"，再加个 “节流” (requestAnimationFrame)
读：读操作、写操作 ……
条：不要一条条写 ……
离线： 离线 DOM，DocumentFragment 、cloneNode，顺便延伸到 display:none;
虚拟：虚拟 dom
图：图片
或者
“读条离线虚拟动画”
