前端必备的浏览器知识（渲染过程、回流和重绘等）

常用哪几种浏览器测试？有哪些浏览器内核(Rendering Engine)?

(Q1)浏览器：Chrome，IE，FireFox，Safari，Opera。

(Q2)对应内核：Webkit，Trident，Gecko，Webkit，Presto。（国内的浏览器，除了傲游是直接基于Webkit开发的，其他基本都是基于谷歌在webkit上开发的Chromium，当然谷歌自己也是用的Chromium。另外值得的一提的是手机的系统（安卓、苹果）默认浏览器都是基于webkit内核的）

如何理解浏览器内核？

主要分成两部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎。后来JS引擎越来越独立（比如谷歌的V8引擎），内核就倾向于只指渲染引擎。

渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。

JS引擎：解析和执行javascript来实现网页的动态效果。

浏览器的渲染过程？

当浏览器获得一个html文件时，会“自上而下”加载，并在加载过程中进行解析渲染。

解析：

a. 浏览器会将HTML解析成一个DOM树，DOM 树的构建过程是一个深度遍历过程：当前节点的所有子节点都构建好后才会去构建当前节点的下一个兄弟节点。

b. 将CSS解析成 CSS规则树（Style Rule） 。

c. 根据DOM树和CSS规则树来构造 Rendering Tree（渲染树）。注意：Rendering Tree并不等同于 DOM 树，因为一些像 Header 或 display:none 的东西就没必要放在渲染树中了。

d. 有了Render Tree，浏览器已经能知道网页中有哪些节点、各个节点的CSS定义以及他们的从属关系。下一步操作称之为Layout（布局），就是计算出每个节点在屏幕中的坐标。

e. 再下一步就是绘制，即遍历render树，并使用UI后端层绘制每个节点。

关于顺序：

上述这个过程是逐步完成的，为了更好的用户体验，渲染引擎将会尽可能早的将内容呈现到屏幕上，并不会等到所有的html都解析完成之后再去构建和布局render树。它是解析完一部分内容就显示一部分内容，同时，可能还在通过网络下载过程遇到的其余内容（比如css、js文件，但遇到js文件会阻塞页面后续内容，css不会阻塞；另外图片的下载优先级比较低，一般都会在整个页面其他资源下载完了才下载图片）。

Javascript的加载和执行的特点：

（1）载入后马上执行；

（2）执行时会阻塞页面后续的内容（包括页面的渲染、其它资源的下载）。原因：因为浏览器需要一个稳定的DOM树结构，而JS中很有可能有 代码直接改变了DOM树结构，比如使用 document.write 或 appendChild,甚至是直接使用的location.href进行跳转，浏览器为了防止出现JS修 改DOM树，需要重新构建DOM树的情况，所以 就会阻塞其他的下载和呈现。所以js通常放在页面尾部，即body结束前。

如何理解Reflow（回流）和 Repaint（重绘）？

1) 当render tree中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。这就称为回流(reflow)。每个页面至少需要一次回流，就是在页面第一次加载的时候。在回流的时候，浏览器会使渲染树中受到影响的部分失效，并重新构造这部分渲染树和layout，完成回流后，浏览器会重新绘制受影响的部分到屏幕中，该过程称为重绘。

2) 当render tree中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的，比如background-color。则就叫称为重绘。

注意：回流必将引起重绘，而重绘不一定会引起回流。

3) 当页面布局和几何属性改变时就需要回流。下述情况会发生浏览器回流：

    a. 添加或者删除可见的DOM元素；

    b. 元素位置改变；

    c. 元素尺寸改变——边距、填充、边框、宽度和高度

    d. 内容改变——比如文本改变或者图片大小改变而引起的计算值宽度和高度改变；

    e. 页面渲染初始化；

    f. 浏览器窗口尺寸改变——resize事件发生时；

4) 聪明的浏览器

从上个实例代码中可以看到几行简单的JS代码就引起了6次左右的回流、重绘。而且我们也知道回流的花销也不小，如果每句JS操作都去回流重绘的话，浏览器可能就会受不了。所以很多浏览器都会优化这些操作，浏览器会维护1个队列，把所有会引起回流、重绘的操作放入这个队列，等队列中的操作到了一定的数量或者到了一定的时间间隔，浏览器就会flush队列，进行一个批处理。这样就会让多次的回流、重绘变成一次回流重绘。

虽然有了浏览器的优化，但有时候我们写的一些代码可能会强制浏览器提前flush队列，这样浏览器的优化可能就起不到作用了。当你请求向浏览器请求一些 style信息的时候，就会让浏览器flush队列，比如：

    a. offsetTop, offsetLeft, offsetWidth, offsetHeight

    b. scrollTop/Left/Width/Height

    c. clientTop/Left/Width/Height

    d. width,height

    e. 请求了getComputedStyle(), 或者 IE的 currentStyle

当你请求上面的一些属性的时候，浏览器为了给你最精确的值，需要flush队列，因为队列中可能会有影响到这些值的操作。即使你获取元素的布局和样式信息跟最近发生或改变的布局信息无关，浏览器都会强行刷新渲染队列。

5) 如何减少回流、重绘？

 ①　直接改变className，这样能多条规则一次性改变；如果动态改变样式，则使用cssText（考虑没有优化的浏览器）

 ②　让要操作的元素进行”离线处理”，处理完后一起更新 

   a) 使用DocumentFragment进行缓存操作,引发一次回流和重绘；

   b) 使用display:none技术，只引发两次回流和重绘；( 只是减少重绘和回流的次数，display：none 是会引起重绘并回流，相对来说，visibility: hidden只会引起重绘 )

           c) 使用cloneNode(true or false) 和 replaceChild 技术，引发一次回流和重绘；

 ③　不要经常访问会引起浏览器flush队列的属性，如果你确实要访问，利用缓存

 ④　让元素脱离动画流，减少回流的Render Tree的规模。举例：$("#block1").animate({left:50}); （不过我没理解）

   PS:如果对你有帮助，就顺手点个赞吧~

本文转自 艺晨光 51CTO博客，原文链接：http://blog.51cto.com/ycgit/1959409，如需转载请自行联系原作者