https://juejin.im/post/6844903734951018504#comment
浏览器的渲染过程
解析html，生成DOM树，解析CSS，生成CSSDOM树将DOM树和CSSDOM树结合，生成渲染树（Render Tree）Layout（回流）：根据生成的渲染树，进行回流（Layout），得到节点的几何信息（位置、大小）Painting（重绘）：根据渲染树以及回流得到的几何信息，得到节点的绝对像素Display：将像素发送给GPU，展示在页面上生成渲染树
浏览器主要工作：
从DOM树的根节点开始遍历每个可见节点从每个可见的节点，找到CSSDOM树中对应的规则，并应用他们根据每个可见节点及其对应的样式，组合生成渲染树。note：第一步中要遍历可见的节点，不可见的节点包括：
一些不会渲染节点的节点，比如script、meta、link一些通过css隐藏的节点，比如display：none。（利用visibility和opacity隐藏的节点，还是会显示在渲染树上，只有display：none的节点才不会显示在渲染树上）回流（重排）
通过构造渲染树，将可见DOM节点以及它对应的样式结合起来，然后需要计算他们在设备视口（viewport）内的确切位置和大小，这个计算的阶段就是回流。 为了弄清每个对象在网站上的确切大小和位置，浏览器从渲染树的根节点开始遍历，实例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div style="width:50%"> <div style="width:50%">hello world!</div> </div> </body> </html>第一个div将节点的显示尺寸设置为视口宽度的50%，第二个div将其尺寸设置为父节点的50%。而在回流阶段，需要根据视口具体宽度，将其转成实际的像素值。
重绘
通过构造渲染树和回流阶段，知道了那些节点是可见的，以及可见节点的样式和具体的几何信息（位置、大小），那么就可以将渲染树的每个节点转换成屏幕上的实际像素，这个阶段就叫重绘节点。
回流阶段主要计算节点的位置和几何信息，，所以当页面布局和几何信息发生变化就需要回流。比如以下情况：
添加或删除可见的DOM元素元素的位置发生变化元素的尺寸发生变化（包括内外边距、内边框、边框大小、宽度和高度等）内容发生变化（比如文本变化或图片被另外一张不同尺寸的图片替代）页面一开始渲染的时候浏览器窗口尺寸变化回流一定会触发重绘，而重绘不一定会回流。 根据改变的范围和程度，渲染树中或大或小的部分都需要重新计算，有些改变会触发整个页面的重排，比如，滚动条出现的时候或者修改了根节点。
由于每次重排都会造成额外的计算消耗，因此大多数浏览器会通过队列化修改并批量执行来优化重排过程。浏览器会将修改操作放入队列里，直到过了一段时间或者操作达到了一个阈值，才清空队列。但是，当获取布局信息的操作时，会强制队列刷新，比如访问一下属性或者使用以下方法：
offsetTop、offsetLeft、offsetWidth、offsetHeightscrollTop、scrollLeft、scrollWidth、scrollHeightclientTOP、clientLeft、clientWidth、clientHeightgetComputedStyle（）getBoundingClientRect（）以上属性需要访问最新的布局信息，因此浏览器不得不清空队列，触发回流重绘来返回正确的值。因此修改样式时候，避免使用以上属性，如果要使用，最好将值缓存啊起来。
最小化重绘和重排
减少发生次数，合并多次对DOM和样式的修改，然后一次处理好
const el = document.getElementById('test') el.style.padding = '5px'; el.style.borderLeft = '1px'; el.style.borderRight = '2px';例子中有3个样式属性都被修改了，每一个都会影响元素的几何结构，引起回流。大部分现代浏览器对其做出了优化，因此只会触发一次重排。但如果在旧版浏览器，就会导致三次重排。
const el = document.getElementById('test') el.style.cssText += 'border-left: 1px; border-right: 2px; padding: 5px;';批量修改DOM
当需要对DOM对一系列修改时，可通过以下步骤减少回流重绘次数：
使元素脱离文档流对其进行多次修改将元素带回文档中第一步和第三步可能会引起回流，但第一步之后，对DOM所有修改都不会引起回流，因为他已经不在渲染树了。
让DOM脱离文档流：
隐藏元素，应用修改，重新显示使用文档片段（DocumentFragment ）在当前DOM之外构建一个子树，再把他拷贝会文档将原始元素拷贝到另一个脱离文档的节点中，修改节点后，在替换原始的元素避免触发同步布局事件
当访问元素的一些属性时候，会导致浏览器强制清空队列，进行强制同步布局。 举例：想让一个p标签数组的宽度赋值给另一个元素的宽度
function initP() { for(let i=0;i< paragraphs.length;i++) { paragraphs[i].style.width = box.offsetWidth + 'px' } }以上代码每次执行时都读取了box的offsetWidth属性，然后利用它更新p标签的width属性。就导致每次循环时，浏览器都必须使上一次循环中的样式更新操作生效，才能响应本次循环的样式读取操作。每次循环都强制浏览器刷新队列。优化如下：
const width = box.offsetWidth function initP() { for(let i=0;i< paragraphs.length;i++) { paragraphs[i].style.width = width + 'px' } }对于复杂动画效果,使用绝对定位让其脱离文档流
css3硬件加速（GPU加速）
