erui _ eruie 0037个无垃圾JavaScript动画的性能提示

网络动画的作用已从单纯的装饰绒毛演变为服务于具体目的在用户体验的背景下-例如在用户与您的应用互动时提供视觉反馈，引导用户的注意力来实现您的应用目标，提供有助于用户理解您的应用界面的视觉提示等。

构思不良的动画令人恐惧的效果是jank，有关说明请参见jankfree.org像这样：

现代浏览器尝试与设备的刷新率同步刷新屏幕上的内容。 对于当今的大多数设备，屏幕将每秒刷新60次或60Hz。 如果屏幕上有一些运动（例如滚动，过渡或动画），则浏览器应每秒创建60帧以匹配刷新率。 当网站或应用程序无法跟上刷新率时，用户会看到Jank表示停滞，颤抖或只是突然停止。

是否计划使用以下方式对CSS属性进行动画处理CSS过渡/CSS关键帧或JavaScript，了解哪些属性会导致页面的几何形状（布局）发生变化很重要，这意味着必须重新计算页面上其他元素的位置，或者将涉及绘画操作。 布局和绘画任务对于浏览器来说都是非常昂贵的，尤其是在页面上有多个元素的情况下。 因此，如果避免对触发布局或绘画操作的CSS属性进行动画处理，并坚持使用诸如transform和opacity之类的属性，则动画性能会显着提高，因为现代浏览器在优化它们方面做得很好。

上CSS触发器您会找到CSS属性的最新列表，其中包含有关它们在每个现代浏览器中触发的工作的信息，包括第一次更改和后续更改。

如果您要设置动画的元素位于其自己的合成器层，则某些现代浏览器会通过将工作卸载到显卡。 如果谨慎使用，此举可以对动画效果产生积极影响。

要使元素位于其自己的层上，您需要对其进行升级。 您可以使用的一种方法是使用CSS会改变属性。 此属性使开发人员可以向浏览器警告他们要对元素进行的某些更改，以便浏览器可以提前进行所需的优化。

You can learn the details of how to use

will-change

, its benefits and downsides, in An Introduction to the CSS will-change Property by Nick Salloum.

JavaScript动画通常使用以下任一种进行编码setInterval（）要么setTimeout（）。

var timer;
function animateElement() {
timer = setInterval( function() {
// animation code goes here
} , 2000 );
}

// To stop the animation, use clearInterval
function stopAnimation() {
clearInterval(timer);
}

尽管此方法可行，但存在较高的风险，因为回调函数在帧中的某个点（可能在最后）运行，这可能会导致丢失一个或多个帧。 今天，您可以使用针对平滑Web动画（DOM动画，画布等）量身定制的本机JavaScript方法，称为requestAnimationFrame（）。

requestAnimationFrame()

executes your animation code at the most appropriate time for the browser, usually at the beginning of the frame.

function makeChange( time ) {
// Animation logic here

// Call requestAnimationFrame recursively inside the callback function
requestAnimationFrame( makeChange ):
}

// Call requestAnimationFrame again outside the callback function
requestAnimationFrame( makeChange );

Performance with requestAnimationFrame by Tim Evko here on SitePoint offers a great video introduction to coding with

requestAnimationFrame()

.

Decoupling the code for handling events like scrolling, resizing, mouse events, etc., from the code that handles screen updates using

requestAnimationFrame()

is a great way to optimize your animation code for performance.

有关此优化技巧和相关示例代码的深入讨论，请查看带有requestAnimationFrame的更精简，更快速的动画保罗·刘易斯（Paul Lewis）。

对于不需要访问DOM的复杂JavaScript操作，请考虑使用网络工作者。 工作线程在不影响用户界面的情况下执行其任务。

您可以通过右键单击网页并选择来访问Chrome DevTools。检查在上下文菜单中。 例如，使用性能工具记录您的网页将使您深入了解该页面上的性能瓶颈：

点击记录 button, then stop the 记录ing after a few seconds:

这个Chrome DevTools指南可以帮助您充分利用DevTools来分析性能以及Chrome浏览器中的许多其他类型的数据。 如果您不是Chrome浏览器的选择者，那就没什么大不了的，因为当今大多数现代浏览器都随附功能强大的DevTools，您可以利用它们来优化代码。

本技巧专门涉及优化代码以用于HTML5画布。

您可以在此技巧中找到有关细节和代码示例的更多信息，优化画布有关MDN的文章。

from: https://www.sitepoint.com//7-performance-tips-jank-free-javascript-animations/

dangzhuang7815 原创文章 0获赞 0访问量 325 关注 私信