浏览器的渲染机制

最近在学习过程中刚好阅读了一些关于浏览器的渲染机制问题，刚好自己总结了一下。

一、浏览器的渲染包括以下几个步骤：

　　1、构建DOM树：浏览器从上向下解析HTML文档并生成DOM树；

　　2、构建CSSDOM：浏览器解析css样式，生成CSSDOM。包含了HTML节点以及这些节点的样式；

　　3、解析JS脚本：加载并执行JS代码，这一过程会阻塞HTML文档的解析，因此一般将script标签放在最后；

　　4、构建渲染树（Render tree）：根据DOM树和CSSDOM树生成Render tree，Rend tree即是一系列的矩形对象，包含了字体颜色尺寸等；

　　5、开始布局（Layout）：根据渲染树将节点树的每一个节点布局在屏幕上对应的具体位置，这一过程会发生回流（reflow）；

　　6、绘制（Painting）：绘制所有的节点，在浏览器上展示出来，这一过程会发生重绘（repaint）。

二、回流和重绘

　　1、回流

　　　　当渲染树（Render tree）中的一部分或者全部因为尺寸、位置、隐藏等的改变需要重新构建时这一过程称为回流；

　　　　那些操作会引起回流呢？通常我们改变的元素的尺寸、位置、添加删除等方式操作元素、以及窗口大小的改变都会引起回流。因此如果不注意。很有可能会导致浏览器好不容易渲染好的树又推倒重来。这是一个费时又费力的过程。  因此我们应当尽量避免回流操                作。

　　2、重绘

　　　　当我们改变元素的视觉样式，而不改变尺寸时，会发生重绘。

　　　　另：回流一定会导致重绘，而重绘不一定不会导致回流。

三、如何优化性能

　　自己总结了要注意的几点：

　　1、HTML文档结构嵌套要少；

　　2、减少通过JS修改元素的样式等，尽量通过className和cssText；

　　3、将修改样式的JS代码都放在一起，不要上面修改了样式，下面又执行其他的JS代码，下面再修改。这样会导致多次回流，例如：

  // 不好的：
  xx.style.marginTop = 30 + 'px';// 1次重绘和回流
  var marfinLeft = parseInt(xx.style.marginLeft);// 执行js代码 
  xx.style.marginLeft = marginLeft + 10 + 'px';// 2次重绘和回流
  // 好的：
  xx.style.marginTop = 30 + 'px';
  xx.style.marginLeft = marginLeft + 10 + 'px';// 1次重绘和回流
  var marfinLeft = parseInt(xx.style.marginLeft);// 执行js代码 

　　为什么第二次会只执行一次呢？因为浏览器做了一些优化，他会把所有会引起回流、重绘的操作放入1个队列中，等队列中的操作到了一定的数量或者到了一定的时间间隔，浏览器就会flush队列，进行一个批处理。这样就会让多次的回流、重绘变成一次回流重绘；

　　4、若你的js会引起多次回流和重绘时，可以采用将元素隐藏起来display:none，( 1次 )，因为渲染树并不会包含显式或隐式地display：none;的标签元素，因此你对隐藏的元素进行各种操作除了让他显示都不会引起回流。等到完成之后再让他显示出来。visibility：　　            hidden只是视觉上隐藏了，但是实际还是占据空间的，因此建议使用display：none。

　　　 还可以使用fragment，或者克隆一个节点，操作完成后再替换当前节点；

　　5、动画等尽量在绝对和固定定位的元素上；

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　-----以上如有问题欢迎指出，转载请注明出处