浏览器渲染优化3

Posted 2020-09-11 web developer

我们之前已经学到并非所有样式更改都是对等的，某些会触发布局，绘制和渲染层合成流程，某些只会触发绘制和渲染层合成流程，而某些仅触发渲染层合成流程，在这节课里，你将学习如何优化渲染管道的最后两个阶段，及绘制和渲染层合成。如果你想详细了解样式是如何影响到渲染管道的，请看https://csstriggers.com/，如果你想知道你要创建动画效果的内容是否会触发布局，绘制和合成流程也可以看看https://csstriggers.com/。

我们来看看我们的工具包中有没有解决绘制难题的工具，绘制流程通常是最能干扰帧率的方面，而这正是我们要避免的，我们看看https://www.html5rocks.com/static/demos/parallax/demo-1a/demo.html，当你向下滚动时看起来很正常，但是可以做的更好，该网站出现了大量的绘制工作，绘制问题会比你肯能遇到的任何其他性能瓶颈都要糟糕。我将打开开发者工作，看看发生了什么情况，打开rendering，如果你担心流程的话，就可以通过选中该项看看发生了什么情况，它会告诉你绘制流程在页面上的什么地方发生了，何时发生了。

 

 

之前我们讨论了你不会出发渲染管道的每个部分，实际上工作量很大程度上取决于你更改了哪个属性经常有人问我是应该用js还是CSS使样式产生动画效果，哪个更快，实际上根本关系不大，大部分情况下速度是一样的，原因在与无论如何更改，更改宽度都会出发布局，无论使用js还是css，如果你更改了宽度，高度，顶部，左侧就会触发布局，如果触发布局就会触发绘制流程，或者只是更改了元素的盒阴影，这不会触发布局，但是会触发绘制流程，而绘制流程代价非常高，尤其是在移动设备上，你不能触发布局而不触发绘制流程，需要小心都更改了哪些样式，何时更改的，在生命周期里，及RAIL过程，包括响应，动画，闲置和加载，你可以在加载，闲置和响应时间里执行这些代价高的样式更改，但是不能在动画过程，对，在动画过程里，你需要尽量避免，布局和绘制流程，因为通常时间成本实在太高，无法满足有限的时间预算，如果不行的话，则需要找到减少影响的方式，在下节课里我们将讨论着方面的知识。