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

sushi 发布于2019-08-21 15:27 / 1175人阅读

摘要：浏览器渲染树我们假设响应后和文件已经齐备了，此时浏览器会怎么做呢当前响应浏览器的普适渲染方式首先，浏览器会根据文件生成树，载入文件构建。

浏览器渲染树

我们假设HTTP响应后HTML和CSS、JavaScript文件已经齐备了，此时浏览器会怎么做呢？当前HTTP响应浏览器的普适渲染方式：
首先，浏览器会根据HTML文件生成DOM树，载入CSS文件构建CSS Object Model。然后，在DOM树和CSS Object Model上建立渲染树（render tree）：渲染树就是渲染时用到的树。渲染树其实就是DOM树和CSS的组合，和DOM树相同的是每个HTML标签对应一个渲染树节点，不同的是，文本节点比较特殊，每一行文本对应一个渲染树节点，并且，由于渲染树识别CSS，标签以及设置为{display: none}的标签不在DOM树上。除此之外，渲染树上的每个节点该是什么样式也已经计算出来了，此时就涉及CSS选择器的优先级了：浏览器默认样式<外部样式表 .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");

另一优化就是浏览器认为position为absolute或fixed的元素更改只会影响其本身和子元素，而static的元素变化则会影响之后的所有元素，具体请看https://segmentfault.com/a/11...，原因在于absolute和fixed认为元素从文档流中清除了，怎么操作是内部的事。

开发优化策略

理解浏览器重绘以及回流的主要目的是为了优化开发，或许这些开销对浏览器不重要，但是了解了这些对一些优化实践就会有更深入的了解。
比如：批量的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...

私有云超融合服务器阿里云的备份策略机制 jsp 浏览器渲染 linux安全策略与实例 linux安全策略与实例下载

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/88191.html

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

摘要：浏览器渲染树我们假设响应后和文件已经齐备了，此时浏览器会怎么做呢当前响应浏览器的普适渲染方式首先，浏览器会根据文件生成树，载入文件构建。 showImg(https://segmentfault.com/img/bVKUyX?w=630&h=292); 浏览器渲染树我们假设HTTP响应后HTML和CSS、JavaScript文件已经齐备了，此时浏览器会怎么做呢？当前HTTP响应浏览器...

suxier 2019-08-29 12:15 评论0 收藏0
浏览器渲染机制与相应优化策略

摘要：浏览器渲染树我们假设响应后和文件已经齐备了，此时浏览器会怎么做呢当前响应浏览器的普适渲染方式首先，浏览器会根据文件生成树，载入文件构建。 showImg(https://segmentfault.com/img/bVKUyX?w=630&h=292); 浏览器渲染树我们假设HTTP响应后HTML和CSS、JavaScript文件已经齐备了，此时浏览器会怎么做呢？当前HTTP响应浏览器...

spacewander 2019-08-01 16:32 评论0 收藏0
WEB/H5性能优化总结

摘要：如下图所示一重绘与回流前端性能优化最关键的就是减少页面的重绘与回流。很明显就是少了一步，这是因为把会触发回流的属性用替代，这样就使渲染的过程减少了这一步，使渲染的时间减少从而提高性能。我们今天来说说前端图形渲染优化，因为我接下来的时间可能要开始研究webgl方面的东西，所以就在这里把之前做过的H5做一个总结，现同步发布于GERRY_BLOG，TiMiGerry-知乎，转载请保留链接。...

stdying 2019-08-06 13:36 评论0 收藏0
WEB/H5性能优化总结

摘要：如下图所示一重绘与回流前端性能优化最关键的就是减少页面的重绘与回流。很明显就是少了一步，这是因为把会触发回流的属性用替代，这样就使渲染的过程减少了这一步，使渲染的时间减少从而提高性能。我们今天来说说前端图形渲染优化，因为我接下来的时间可能要开始研究webgl方面的东西，所以就在这里把之前做过的H5做一个总结，现同步发布于GERRY_BLOG，TiMiGerry-知乎，转载请保留链接。...

mingde 2019-08-23 12:13 评论0 收藏0
WEB/H5性能优化总结

摘要：如下图所示一重绘与回流前端性能优化最关键的就是减少页面的重绘与回流。很明显就是少了一步，这是因为把会触发回流的属性用替代，这样就使渲染的过程减少了这一步，使渲染的时间减少从而提高性能。我们今天来说说前端图形渲染优化，因为我接下来的时间可能要开始研究webgl方面的东西，所以就在这里把之前做过的H5做一个总结，现同步发布于GERRY_BLOG，TiMiGerry-知乎，转载请保留链接。...

elarity 2019-08-05 15:05 评论0 收藏0