An invaluable article on the issue – JackPattishallJr提到
CSS如何在网页的特定区域对页面绘制时间有显着的负面影响？
例如：
>我不知道CSS根据用户在页面中的位置生效.这个行为确定它是吗？
>是否存在冲突或异常的CSS定位,动画等可能会导致性能不佳？
> CSS样式如何直接和一致地链接到页面性能？具体来说,页面涂装时间.
更新：我已经基于我刚做的两个测试编辑了问题和示例：
>在我的浏览器中没有启用javascript,性能不佳的问题(令人惊讶的)是一致的.
>删除问题区域的样式后,问题已解决(但不完全,因为现在我的页面是丑陋的).
问题页油漆时间
我注意到我的网页在网页的某个特定区域表现不佳(滞后).
为了研究这个问题,我启用了显示油漆矩形,并启用了连续页面重绘,以便在页面重绘率上得到一些读数.
Here’s a Youtube video that I took to demonstrate the issue.
这是一个健康的阅读,在我的页面的响应和顺利的地区：
这是一个不健康的阅读(在有问题的地方),页面的响应速度很慢,滚动是非常滞后的：
页面执行完美,在顶部(实际上是最活跃的活动)的健康重绘率,并且在页面的较低区域执行非常糟糕的(几乎停止).当我离开有问题的地区时,它恢复到完美的表现.
更新：我完全禁用Javascript,并获得与以前相同的性能问题和读数.
解决方法
I didn’t know CSS took effect based on the user’s location in the page. Does this behavior determine that it does?
它绝对是因为浏览器不想一次在页面上呈现所有内容.因此,需要更多处理的页面(如果有的话)的位置将比要处理较少的点更慢.
Is there conflicting or unusual CSS positioning,animation,etc. that might cause poor performance?
既然这是一个非常广泛的问题,我会比我通常会更广泛地回答.这是一篇关于what happens during an animation的文章,其中详细介绍了幕后发生的事情.实质上它说有一个主线程和组合线程;大多数时候你想留在合成器方面.这正是07001可以“没有浏览器做得太多”而“动画化”的原因.
我可以想到的其他原因会导致比平常更差的性能,如果元素的动画或变换可能会影响不是动画或转换的一部分的其他元素的布局或状态.重要的是要防止元素被动画化或转换为影响其他元素,特别是其布局,因为这会迫使他们回到主线程.
How is CSS styling directly and consistently linked to page performance? Specifically,page paint time.
CSS通过几种方式与页面性能相关.第一个是编译器读取CSS并将其应用于必需元素所需的时间.如果你特别处理大型样式表,Writing efficient selectors很重要.你想尽可能地削减角落.
第二个CSS效果的性能是元素是如何定位的.如果您将1000个元素置于相同的位置,那么自然会比在同一位置有1个更差,无论可以看到或影响多少布局.这与CSS完全没有关系,但CSS定位是决定元素的位置,因此有多少影响了一次性能.更改元素的布局会将其重新放入主线程,这样除了重绘之外,这也加强了处理器部分的思考.
您在问题中指定的第三个是涂漆时间. article you linked进行了很好的解释,说明盒子阴影发出油漆时间.有lot’s of reports因为它存在.这是你具体问题的本质;主要原因.你应该避免他们,特别是在大量的时候,无论你可以.使用梯度可能会改善油漆时间,因为它们更便宜.
第四是CSS决定使用cpu还是GPU渲染动画或转换.尽管我们还没有这个功能,Sara Soueidan Sara Soueidan深入了解了这一点.总而言之,cpu(中央处理单元)是计算机的大脑,并且在GPU(图形处理单元)渲染事物时速度更快,但是不能“想”的时间更长.目前我们做的是像translate3d(0,0)这样的技巧;或translateZ(0px)强制浏览器使用GPU渲染,但将来我们将具有will-change属性.
正如Sara在文章中所说,不要让GPU处理一切,因为浏览器正在尽可能地处理它,并且“一些可能与更改相关的更强的优化可能会使用很多一个机器的资源,当过度使用这样可能导致页面减慢甚至崩溃.“
总而言之,CSS可以通过增加绘画时间,改变元素的布局方式,迫使在cpu或GPU中处理太多元素以及多长时间来显着地影响页面在网页的特定区域的绘画时间使编译器解释和应用CSS.
当他评论的时候,
Box shadows typically are one of the most expensive to render in most any browser. There is almost no reason to have such a large spread – you might as well use a gradient or something
