CSS优化:用 DevTools 优化动画性可以

作者 : 开心源码 本文共2140个字,预计阅读时间需要6分钟 发布时间: 2022-05-11 共67人阅读

大家好,很久没给大家升级文章,今天给大家分享少量CSS优化,也希望本文对正在学习web前台的小伙伴学习有所帮助。

CSS动画被认为是超高性可以的。这种情况对于少数元素的简单动画来说是事实,假如您没有在考虑性可以的情况下,对动画进行编码,会添加很多复杂性,网站使用户很快就会注意到,可可以会感到恼火。

我将详情少量有使用的浏览器开发者工具的功可以,这些功可以将可以够帮助你在用 CSS 执行动画时检查究竟发生了什么。 这样,当一个动画效果看起来不太连贯时,你将会更好地理解为什么以及如何处理它。

CSS优化:用 DevTools 优化动画性可以

CSS性可以相关的开发者工具

你的动画至少需要达到60 fps(每秒帧数)才可以在浏览器中流畅运行。 速率越低,动画效果越差。 这意味着浏览器在一帧内完成工作的时间不超过16毫秒。 但是在短的时间内究竟发生了什么呢? 你怎样知道你的浏览器能否跟上了预期的帧率?

在评估动画的质量时,我认为没有什么可以比使用户体验更好。但是,现代浏览器中的开发者工具,尽管并不总是100%可靠,但已变得越来越智可以,而且你能用它们来查看,编辑和调试您的代码。

当您需要检查帧率和CSS动画性可以时,也是如此。 来看看它是如何工作的。

Firefox的性可以调试工具初探

在本文中,我用 Firefox 性可以工具。另一个重要的竞争者是 Chrome 性可以工具。你能选择你最喜欢的,由于这两个浏览器提供强大的性可以功可以。

要打开 Firefox 的开发者工具,需要以下几步:

右键点击网页,选择菜单里的“Inspect Element(查看元素)”。

假如你使用键盘的话,Windows的快捷键是 Ctrl + Shift + I , Linux或者者苹果OS X的快捷键是 Cmd + Opt + I 。

CSS优化:用 DevTools 优化动画性可以

CSS优化:用 DevTools 优化动画性可以

CSS优化:用 DevTools 优化动画性可以

Waterfall(瀑布)部分非常适合检查和 CSS transition、关键帧动画相关的问题。另两个部分分别是“(Call Tree)调使用树”和“(JS Flame Chart)JS火焰图”,您能用它来查找 JavaScript 代码中的瓶颈。

Waterfall(瀑布)顶部有一个摘要部分,并有详细的分类。在这两个数据都是有相应的颜色编码的:

黄色条代表 JavaScript 操作。

紫色条是指计算HTML元素的CSS样式(重新计算样式)以及页面布局(layout,布局)。 布局操作对于浏览器来说是开销相当高昂,所以假如你为牵涉重复布局(也称为reflows(回流) – 如margin,padding,top,left,等等)的属性设置动画效果时,结果可可以会很糟糕。

绿色条是指将你的元素绘制成一个或者多个位图(Paint)。涉及绘制操作的动画属性,如color,background-color,box-shadow 等,会带来高昂的绘制开销,这可可以是动画缓慢和使用户体验不佳的起因。

CSS优化:用 DevTools 优化动画性可以

瀑布摘要部分下方的绿色条代表帧率信息。

一个正常的页面,可可以每秒帧数看起来很高,但更重要的是一致性,—— 即没有太多的起伏。

我们使用下面这个例子加以说明。

性可以检查工具

这是一个利使用@keyframes关键字做出的CSS动画的例子。测试页面是这样的:

CSS优化:用 DevTools 优化动画性可以

CSS优化:用 DevTools 优化动画性可以

紫色的矩形会在视窗内做无限循环的滑入和滑出动画。

我通过设置这个div元素的margin-left来控制这个元素在视窗里位置。@keyframes关键帧的设置如下:

CSS优化:用 DevTools 优化动画性可以

CSS优化:用 DevTools 优化动画性可以

帧率视图看起来有点锯齿,帧率平均为44.82 fps,有点低。

另外,请注意动画过程中发生的所有布局和绘画操作。这些是浏览器在主线程里的开销较大的操作,会对性可以产生有负面影响。

最后,假如你访问 Inspector(检查器) 工具,点击动画部分,将鼠标悬停在动画名称上,会弹出一个信息框,显示所有关于当前动画的相关数据。假如你的动画经过优化,这里会有一条消息明确指示出来。本例的动画未经优化。

CSS优化:用 DevTools 优化动画性可以

现在帧率更高(56.83 fps),瀑布图没有显示开销大的布局和绘制操作。

假如你打开“Inspector(查看器)”,查看“Animation(动画)”面板,而后鼠标悬停在动画名上,你会看到如下信息:

CSS优化:用 DevTools 优化动画性可以

仅只对CSS的 Opacity,Transforms 和 Filters 应使用动画效果

也许你听过相似的建议,但以防万一,还是需要再重复一遍:假如你希望动画效果流畅,那么只利使用opacity,transforms,filters这些属性做动画。没有限制的动画会让浏览器不堪重负,在很少的时间内执行开销很大的操作,最终并不可以达到很好的效果。

就像开发者工具显示的这样,重新布局页面或者者绘制元素都不是帮助我们的朋友。

然而, 不同浏览器解决CSS属性稍有不同。假如你希望知道哪些浏览器会针对哪些属性触发页面的布局、绘制事件(尤其是升级某些属性时,可可以会涉及到动画的),请看CSS Triggers。

为了保证高性可以动画,常使用的方法就是迫使浏览器把属性升级的任务交给GPU(图形解决器)去做,这样就通过利使用硬件加速减轻了浏览器主线程的压力。你还能用will-change这一CSS属性,或者者translateZ(0)以及translate3d(0,0,0)的小技巧。上面的方法都行的通,但假如你过度用也仍然可可以引起不可避免的性可以问题,比方说动画卡慢。

好了,今天内容就分享到这里,也欢迎你能在下面一起学习交流,共同成长!!

说明
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是摆设,本站源码仅提供给会员学习使用!
7. 如遇到加密压缩包,请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » CSS优化:用 DevTools 优化动画性可以

发表回复