浏览器渲染原理

页面加载：

向浏览器输入网址
浏览器根据 DNS 服务器得到域名的 IP 地址
向这个 IP 的机器发送 HTTP 请求
服务器收到、处理并返回 HTTP 请求
浏览器接收到服务器返回的内容

页面渲染：

解析HTML，生成DOM树，解析CSS，生成CSSOM树
将DOM树和CSSOM树结合，生成渲染树(Render Tree)
Layout(回流):根据生成的渲染树，进行回流(Layout)，得到节点的几何信息（位置，大小）

Painting(重绘):根据渲染树以及回流得到的几何信息，得到节点的绝对像素

Display: 将像素发送给GPU，最后通过调用操作系统Native GUI的API绘制，展示在页面上

重绘和回流

回流：当render tree 的一部分或全部的元素因改变了自身的宽高，布局，显示或隐藏，或者元素内部的文字结构发生变化 导致需要重新构建页面的时候，回流就产生了。 重绘：当一个元素自身的宽高，布局，及显示或隐藏没有改变，而只是改变了元素的外观风格的时候，就会产生重绘。例如你改变了元素的background-color.... 因此得出了一个结论：回流必定触发重绘，而重绘不一定触发回流。

何最小化重绘和回流

需要要对元素进行复杂的操作时，可以先隐藏(display:"none")，操作完成后再显示 需要创建多个DOM节点时，使用DocumentFragment创建完后一次性的加入document 缓存Layout属性值，如：var left = elem.offsetLeft; 这样，多次使用 left 只产生一次回流 尽量避免用table布局（table元素一旦触发回流就会导致table里所有的其它元素回流） 避免使用css表达式(expression)，因为每次调用都会重新计算值（包括加载页面） 尽量使用 css 属性简写，如：用 border 代替 border-width, border-style, border-color 批量修改元素样式：elem.className 和 elem.style.cssText 代替 elem.style.xxx

标签：浏览器,渲染,元素,elem,回流,原理,border,重绘,页面
来源： https://www.cnblogs.com/-swz/p/16528585.html