html怎么添加图层,html – Chrome渲染图层 – 创建条件？

我的网站上有一个动画,我的速度很慢.

经过一些调查后,我发现(通过DevTools时间线选项卡)问题是整个页面正在被重新绘制而不仅仅是动画div.

我检查了“显示合成图层边框”选项,发现有时动画div位于另一个渲染层中.

但我找不到一致的行为：

>当div不在另一层时 – 动画很慢.

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

我发现了一些文章(1,2,3,4,5),这些文章提出了“强制”Chrome在另一个渲染层中渲染元素的可能方法,但大多数都是旧的(事情可能已经改变).

而且,它们通常不解决元素如何相对于渲染层相互影响.

> Chrome如何确定将哪个元素放入哪个图层？

>我怎样才能知道我的案件决定了什么？ (即调试渲染层)

>关于渲染层,不同元素如何相互影响？

>如何在另一个图层中生成元素的动画,从而重新绘制整个页面？ (在某些情况下这会发生)

>如何确保快速渲染动画？即 – 将元素强制转换为另一个图层,并确保动画不会导致整个页面的重新绘制.

>最后 – 我如何能够掌握浏览器渲染算法的变化,以便将来不再返回这些问题？