提高JavaScript动画的性可以

  • 时间:2018-06-18 22:58 作者:程序你好 来源:程序你好 阅读:110
  • 扫一扫,手机访问
摘要:在本文中,我收集了少量开发技巧,以帮助您处理JavaScript动画的性可以问题,并使您更容易实现在web上实现流畅移动的60fps(每秒帧数)目标。1、避免用昂贵的CSS属性你能否打算用CSS动画CSS属性转换/ CSS关键帧或者JavaScript,重要的是要知道哪些属性带来的改变页面的几何(布

在本文中,我收集了少量开发技巧,以帮助您处理JavaScript动画的性可以问题,并使您更容易实现在web上实现流畅移动的60fps(每秒帧数)目标。

1、避免用昂贵的CSS属性

你能否打算用CSS动画CSS属性转换/ CSS关键帧或者JavaScript,重要的是要知道哪些属性带来的改变页面的几何(布局)——这意味着页面上的其余元素的位置将会重新计算,或者将涉及绘画操作。布局和绘制任务对于浏览器来说都是非常昂贵的,特别是当你的页面上有几个元素时。因而,假如您避免对触发布局或者绘制操作的CSS属性进行动画化,并坚持用诸如转换和不透明度之类的属性,那么您将看到动画性可以的明显提高,由于现代浏览器在优化这些属性方面做得非常出色。

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

提高JavaScript动画的性可以

更改仅触发复合操作的CSS属性是优化web动画性可以的一个简单而有效的步骤。

2、提升你想要的元素到他们自己的层(谨慎)

假如您想要动画的元素在它自己的compositor层上,少量现代浏览器通过将工作卸载到GPU来利使用硬件加速。假如用得当,这个动作能对动画的体现产生积极的影响。

要将元素放在自己的层上,您需要对其进行更新。一种方法是用CSS will-change属性。这个属性允许开发人员警告浏览器他们想要在一个元素上做出的少量更改,这样浏览器即可以提前进行必要的优化。

然而,并不是建议你在他们自己的层面上推广太多的元素,或者者你是夸大其词。事实上,浏览器创立的每个层都需要内存和管理,这可可以会很昂贵。

在Nick Salloum的CSS will-change属性详情中,您能理解如何用will-change的细节、它的优点和缺点。

3、使用requestAnimationFrame替换setTimeOut/setInterval

JavaScript动画通常用setInterval()或者setTimeout()方法。

代码像是这样的:

var timer;function animateElement() { timer = setInterval( function() { // animation code goes here } , 2000 );}// To stop the animation, use clearIntervalfunction stopAnimation() { clearInterval(timer);}

尽管这是可行的,但是jank的风险很高,由于回调函数在帧中的某个点(可可以在最后)运行,这可可以导致丢失一个或者多个帧。现在,您能用一个为流畅的web动画(DOM animation, canvas等)定制的本地JavaScript方法,称为requestAnimationFrame()。

requestAnimationFrame()在最适合浏览器的时间执行动画代码,通常在框架的开始。

你的代码能是这样的:

function makeChange( time ) { // Animation logic here // Call requestAnimationFrame recursively inside the callback function requestAnimationFrame( makeChange ):}// Call requestAnimationFrame again outside the callback functionrequestAnimationFrame( makeChange );

4、将事件与代码中的动画分离

以每秒60帧的速度,浏览器在每一帧上都有16.67ms来完成它的工作。这并不是很多时间,所以保持代码的准确性会对动画的流畅性产生影响。

将解决诸如滚动、调整大小、鼠标事件等事件的代码与用requestAnimationFrame()解决屏幕升级的代码分离开来,是优化动画代码以提高性可以的好方法。

5、避免长时间运行的JavaScript代码

浏览器用主线程运行JavaScript,以及其余任务,如样式计算、布局和绘制操作。长时间运行的JavaScript代码可可以会对这些任务产生负面影响,这可可以导致帧被跳过,并导致janky动画。因而,简化代码一定是确保动画平稳运行的好方法。

对于不需要访问DOM的复杂JavaScript操作,能考虑用Web worker。工作线程执行任务时不会影响使用户界面。

6、利使用浏览器的DevTools来控制性可以问题

您的浏览器的开发工具提供了一种方法来监控您的浏览器在运行JavaScript代码或者第三方库的过程中有多困难。它们还提供有关帧速率和更多的有使用信息。

您能通过右键单击web页面并在上下文菜单中选择Inspect来访问Chrome DevTools。

例如,用性可以工具记录web页面将使您理解该页面上的性可以瓶颈:

提高JavaScript动画的性可以

点击录制按钮,几秒钟后中止录制:

提高JavaScript动画的性可以

此时,您应该有大量的数据来帮助您分析页面的性可以:

提高JavaScript动画的性可以

Chrome DevTools指南将帮助您充分利使用DevTools来分析性可以,并在您的Chrome浏览器中提供大量其余类型的数据。假如Chrome不是你选择的浏览器,那也没什么大不了的,由于现在大多数浏览器都有超强大的DevTools,你能利使用它们来优化你的代码。

7、用屏幕外的画布进行复杂的绘图操作

这个技巧与优化HTML5 Canvas的代码有关。

假如您的框架涉及复杂的绘图操作,那么一个好主意是创立一个屏幕外的画布,您在其中执行所有的绘图操作一次或者仅当发生更改时,而后在每个框架上绘制屏幕外的画布。

结论

为性可以优化代码是一项必要的任务,但它绝不总是简单或者直接的。你的动画效果不佳可可以有几个起因,但假如你尝试一下上面列出的技巧,你将会在很大程度上避免最常见的动画性可以圈套,从而改善你的网站或者应使用的使用户体验。

  • 全部评论(0)
最新发布的资讯信息
【系统环境|】2019年web前端开发技术框架有哪些(2019-07-20 12:06)
【系统环境|】什么是Web?零基础能不能学Web前端开发?(2019-07-19 07:04)
【网页前端|HTML】为什么学Web前端?选择Web前端理由(2019-07-17 20:28)
【网页前端|JS】Java面经-百度新入职老哥整理近半年学习经验,面试刷题路线!(2019-07-16 22:16)
【网页前端|HTML】最全面的前端开发指南(2019-07-15 12:57)
【系统环境|数据库】零基础如何快速学好大数据?(2019-06-29 12:27)
【系统环境|Linux】零基础如何学好大数据?必备需要学习知识(2019-06-18 11:54)
【系统环境|】Hadoop环境中管理大数据存储八大技巧(2019-06-15 11:01)
【系统环境|服务器应用】现在国内IT行业是不是程序员过多了?(2019-06-11 06:34)
【系统环境|服务器应用】新贵 Flutter(2) 自己设置 Widget(2019-06-11 06:34)
手机二维码手机访问领取大礼包
返回顶部