浏览器渲染机制与相应优化策略

浏览器渲染机制与相应优化策略

浏览器渲染树

我们假设HTTP响应后HTML和CSS、JavaScript文件已经齐备了,此时浏览器会怎么做呢?当前HTTP响应浏览器的普适渲染方式:
首先,浏览器会根据HTML文件生成DOM树,载入CSS文件构建CSS Object Model。然后,在DOM树和CSS Object Model上建立渲染树(render tree):渲染树就是渲染时用到的树。渲染树其实就是DOM树和CSS的组合,和DOM树相同的是每个HTML标签对应一个渲染树节点,不同的是,文本节点比较特殊,每一行文本对应一个渲染树节点,并且,由于渲染树识别CSS,<head>标签以及设置为{display: none}的标签不在DOM树上。除此之外,渲染树上的每个节点该是什么样式也已经计算出来了,此时就涉及CSS选择器的优先级了:浏览器默认样式<外部样式表<style内部样式表,同一样式表内部又有#id > .class > tagName > a:hover,important的样式优先级最高。最后,渲染树建立之后,就可以在屏幕上开始绘制(paint)节点。

重绘和回流

当然这仅仅是第一次绘制,实际中会有交互行为,因此页面结构以及CSS会随时变化,这就涉及到重绘(repaint)和回流(reflow)。回流是指渲染文档的结构被改变了,此时要重新布局了,导致回流的操作包括:DOM元素的删改、表单或文本内容变化、CSS属性的更改或重新计算、修改class属性、浏览器窗口变化(滚动或缩放)、伪类激活。重绘是指元素的样式改变不影响文档流整体结构时,渲染树结构也就没有变化,因此仅仅是重新显示样式。重绘的代价是比较小的。注意,这并不是说样式改变不会导致回流,只是特定样式(background-color, color, visibility)改变才不会导致回流。第二个需要注意的点是,回流一定需要重绘,但是重绘却不需要回流,我发现一些文章没搞清顺序。

浏览器优化策略

回流以及重绘会造成不必要的开销,这是浏览器要优化的问题之一,罪魁祸首就是JavaScript代码执行时会改变DOM树和CSS样式,因此常见做法是缓存JavaScript操作,然后通过一次回流或重绘解决几个操作的问题,当然也可以人为改变这一浏览器自主行为,方法就是通过获取元素属性迫使浏览器立即重绘和回流,为什么会这样呢?假设某一操作要读取元素的height属性,此时浏览器已经缓存了几个操作,这些操作可能会改变height值,而此时浏览器要返回当前的精确值,就不得不立即执行回流,否则是得不到这个精确值的。

// 最终只有一次重绘和回流被触发
var $body = $('body');
$body.css('padding', '1px'); // 触发重绘与回流
$body.css('color', 'red'); // 触发重绘
$body.css('margin', '2px'); // 触发重绘与回流

//两次回流
var $body = $('body');
$body.css('padding', '1px');
$body.css('padding'); // 此处触发强制回流
$body.css('color', 'red');
$body.css('margin', '2px');

开发优化策略

理解浏览器重绘以及回流的主要目的是为了优化开发,或许这些开销对浏览器不重要,但是了解了这些对一些优化实践就会有更深入的了解。
比如:批量的DOM操作可以通过复制DOM节点,然后在复制的节点上进行一系列操作,再替换原节点即可,因为节点只要不加到DOM树上就不影响渲染树,所以怎么折腾都没事,最后添加之后只执行一次回流。这就是“用innerHTML代替DOM操作,减少DOM操作次数,优化javascript性能。”的原因。
样式计算也是同样的道理。(1)不要逐个修改CSS中的样式,每次修改可能都是一次重绘或回流,所以最好是在原始CSS里定义不同的class,通过改变class实现样式转换。(2)只对position为absolue/fixed的元素设置动画,因为这些元素不在文档流中,怎么动都不会导致回流,只会重绘。(3)当需要设置的样式很多时设置className而不是直接操作style。(4)避免使用CSS Expression(css表达式)又称Dynamic properties(动态属性)。

http://www.phpied.com/renderi...
http://taligarsiel.com/Projec...

相关推荐