CSS知识总结之浏览器

web页面浏览器渲染过程

1.解析html文件，并构建DOM树：

　　在DOM树中，每一个html标签都有一个对应的节点，并且每一个文本也有一个对应的节点(js的textNode)，DOM树的根节点就是documentElement,对应的是html标签。

例如：在chrome中，构建成的DOM树会被将页面划分为很多图层（注：图层并不是节点，一个图层可能包含一个或者多个节点）。

更深入的了解：参考http://www.html5rocks.com/zh/tutorials/speed/layers/

2.解析CSS代码，计算出各层的最终样式数据：

　　在这个过程中，CSS代码中的非法语句会被浏览器忽略掉，在改变节点位置，尺寸时会触发这个过程的再次执行，这就是Recalculate style（样式重计算）。

3.根据DOM树以及计算出的各层最终样式构建渲染树：

　　在这个过程中，渲染树会忽略掉不需要渲染的元素，如：head、display:none;

　　这个过程中包括两部分，一是为每个节点生成图形和位置，这时就会触发我们所说的回流和重布局(layout),二是将每个节点绘制填充到图层位图中，这时会触发重绘(paint)。

4.图层作为纹理上传至GPU，复合多个图层到页面上生成最终图像(Composite Layers—图层重组)

　　此过程原理较复杂，请自行查阅。http://www.html5rocks.com/zh/tutorials/speed/layers/，此文中有一些引子可供理解。

触发重布局的属性：

　　1.改变盒模型相关的属性：width, height, margin, padding, display, border-width,border,min-height。

　　2.改变定位属性及浮动：top,bottom,left,right,position,float,clear。

　　3.改变节点内部文字的结构：text-align, overflow, font-weight,font-family,font-size,line-height, vertical-align, white-space。

　　总结：其实看了这些属性，也许聪明的你已经猜到，触发重布局的主要原因就是节点的大小尺寸或位置被改变了。

　　触发重绘的属性：color,background,border-radius,border-style,visibility,outline,box-shadow……（background: gradient渐变 GPU杀手啊啊啊！）

　　总结：这些属性没有改变节点的大小和位置，只是改变了节点内部的渲染效果，所以只重绘，不重布局。

针对浏览器的CSS性能优化

减少重绘和重排：

　　1.不要一个一个地单独修改属性，最好通过一个选集(class)来定义这些修改;

　　2.把对节点的大量修改操作放在页面之外:

　　　　①用documentFragment来修改；

　　　　②clone节点，做大量修改，然后替换掉之前的节点；

　　　　③通过display:none隐藏节点(一次重绘和重排)，大量修改样式属性，在显示节点(第二次重绘和重排),共两次重绘和重排。

　　3.不要频繁获取计算后的样式。如果你需要使用计算后的样式，最好暂存起来而不是直接从DOM上读取。

　　4.绝对定位元素通常就不会影响其他大部分元素。

CSS选择器的使用：

　　由于CSS selector选取元素是从右往左选取，所以在使用CSS selector时，嵌套的层数越深，selector性能会越差,后代选择器+元素选择器的组合性能非常差（比如：.foo p,这个选择器会首先选取页面上所有的p元素,然后再去它们的祖先里面找foo class）。不过这一理论随着现代浏览器的发展，对性能的影响已经越来越微不足道了。在现代浏览器里，甚至属性选择器之类性能都已得到优化，并不会产生明显的性能影响。

高性能CSS3动画注意事项

1.opacity是不会触发重绘的，当opacity值发生改变时，GPU只是通过改变图层的alpha值来达到效果，但前提是被改变opacity值的元素必须是一个图层。在动画制作中，opacity是个很好的选择。

2.在兼容性允许的情况下，transform变形绝对是开发页面动画的最佳选择，目前在很多CSS框架组件中使用的动画，都优选transform来实现。transform:translate3d(0, 0, 0)和transform: translateZ(0)可以强迫浏览器为其创建图层，这样就消除了在动画开始前图层的创建时间，使动画尽快开始。变形的还有一个重要优点是，transform平移、旋转、缩放都不会触发重布局，而以前使用的left、top均会触发重布局。

参考内容：http://www.html5rocks.com/en/tutorials/speed/high-performance-animations/

巴特西

CSS知识总结之浏览器

最新文章

热门文章