哪些动作触发'更新层树'

退房https://csstriggers.com/

这是一个由两位谷歌工程师（Paul和Surma）创建的工具，回答了"如果我更改特定的CSS属性，浏览器将被迫做什么工作？"浏览器工作分为三个主要区域（布局、绘制和合成），该工具说明了不同浏览器中哪些CSS属性会触发什么。请注意，Webkit和Gecko报告的信息存在一些问题（请参阅GitHub上的此问题），但总的来说，这是一个很好的资源。

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

如果你想知道这个工具是如何获取数据的，你可以查看源代码。它使用一套完全自动化的测试来利用各种浏览器引擎，理论上应该始终是最新的。

因为这个工具是谷歌开发者拥护者推荐的，所以它不太可能宕机，但如果宕机了，你可以从上面链接的源代码中自己构建它。

关于花了多少时间更新布局（和图层树），没有简单的答案。应用程序中DOM元素的数量会影响每个布局所需的时间，还可以通过重复更新然后查询布局信息来触发"布局抖动"。这可能会导致浏览器在此步骤中花费更多的时间。如果你担心某个特定的性能问题，最好的方法是使用浏览器性能工具来衡量你自己的应用程序中实际发生了什么。