哪些操作会触发'更新层树'?

时间:2016-08-01 11:48:18

标签: javascript html performance google-chrome rendering

有人可以帮我弄清楚哪些操作会触发操作'更新图层树'?以及更新层树的影响是什么?有页面加载持续时间吗?

1 个答案:

答案 0 :(得分:1)

查看https://csstriggers.com/

这是由几位Google工程师(PaulSurma)创建的工具,可回答问题"如果我更改了特定的CSS属性,浏览器将被强制执行哪些工作?要做什么?"浏览器工作分为三个主要区域(布局,绘图和复合),此工具说明了不同浏览器中哪些CSS属性触发的内容。请注意,Webkit和Gecko报告的信息存在一些问题(请参阅GitHub上的this issue),但总的来说这是一个很好的资源。

这样的工具应该是首选的信息来源,因为浏览器供应商总是在优化事物,开发人员不能总是依赖他们过去读过的静态信息。

如果您对此工具如何获取其数据感到好奇,可以查看source code。它使用一套完全自动化的测试来接入各种浏览器引擎,理论上应该始终是最新的。

因为这个工具是Google开发者倡导者所推荐的,所以它不太可能会失败,但是如果它确实存在,你总是可以自己从上面链接的源代码构建它。

关于更新布局(和图层树)所花费的时间,没有简单的答案。您在应用中拥有的DOM元素数量可能会影响每个布局所需的时间,并且还可以触发布局抖动"通过反复更新然后查询布局信息。这可能会导致浏览器在此步骤中花费更多时间。如果您担心特定的性能问题,最好的方法是使用浏览器性能工具衡量您自己的应用中实际发生的情况。