html – Chrome渲染图层 – 创建条件？

概述我的网站上有一个动画,我的速度很慢. 经过一些调查后,我发现(通过DevTools时间线选项卡)问题是整个页面正在被重新绘制而不仅仅是动画div. 我检查了“显示合成图层边框”选项,发现有时动画div位于另一个渲染层中. 但我找不到一致的行为： >当div不在另一层时 – 动画很慢. >当div在另一层时,有时动画很快,有时它很慢,这取决于页面中其他元素的存在(具有位置的div：固定,选取框等). 我的网站上有一个动画,我的速度很慢.
经过一些调查后,我发现(通过DevTools时间线选项卡)问题是整个页面正在被重新绘制而不仅仅是动画div.

我检查了“显示合成图层边框”选项,发现有时动画div位于另一个渲染层中.
但我找不到一致的行为：

>当div不在另一层时 – 动画很慢.
>当div在另一层时,有时动画很快,有时它很慢,这取决于页面中其他元素的存在(具有位置的div：固定,选取框等).这些其他元素似乎与DOM树中的动画div完全无关,但显然会对动画期间页面的渲染产生影响.

我发现了一些文章(1,2,3,4,5),这些文章提出了“强制”Chrome在另一个渲染层中渲染元素的可能方法,但大多数都是旧的(事情可能已经改变).
而且,它们通常不解决元素如何相对于渲染层相互影响.

> Chrome如何确定将哪个元素放入哪个图层？
>我怎样才能知道我的案件决定了什么？ (即调试渲染层)
>关于渲染层,不同元素如何相互影响？
>如何在另一个图层中生成元素的动画,从而重新绘制整个页面？ (在某些情况下这会发生)
>如何确保快速渲染动画？即 – 将元素强制转换为另一个图层,并确保动画不会导致整个页面的重新绘制.
>最后 – 我如何能够掌握浏览器渲染算法的变化,以便将来不再返回这些问题？

解决方法 好的,所以我终于找到了解决问题的方法.

>这SO answer解释了如何在Chrome DevTools中启用“图层面板”.该面板允许您实时查看(甚至在动画期间)哪些元素位于页面上的哪些层中.
此外,每个图层都有一些属性可以告诉您为什么Chrome决定从中创建一个图层.
>使用这个工具,我能够确定我的一个元素是整个页面的叠加(当有模态div时屏蔽页面)有时会获得自己的层,有时不会.
>只有当页面上出现一些其他元素(如字幕)时才获得图层的原因是,Chrome检测到“元素可能与其他复合元素重叠”.
当这些“其他合成元素”不存在时,此叠加元素不会获得它自己的图层.当我打开模态时,还有一个关于叠加div的不透明度的动画.而且由于它不在一个单独的层中 – 它导致整个页面在每个帧中重新绘制自己(这有时被称为“绘画风暴”).
>我通过确保叠加div将始终获得自己的图层来解决问题,方法是将-webkit-backface-visibility: hidden添加到此div的样式中.

总结

以上是内存溢出为你收集整理的html – Chrome渲染图层 – 创建条件？全部内容，希望文章能够帮你解决html – Chrome渲染图层 – 创建条件？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。