性能优化

使用浏览器开发者工具检测CSS动画性能

CSS动画性能非常好。虽然是简单的几个动画元素,如果你的代码没有让动画表现出其意义或者说使用页面变得更为复杂,网站的用户可能很快就会发现,并且有可能让用户觉得恶心。反而得不到相应的好评。在这篇文章中,我将介绍浏览器开发者工具的一些有用的功能,这些功能将能帮助你检查出你的CSS动画在渲染引擎下会发生些什么。这样,当你的动画看起来有点卡(帧率图有点波涛汹涌),你会找到地应的方法知道为什么为会这样以及如何解决它。

理解关键的渲染路径

当浏览器从服务器接收到一个HTML页面的请求时,到屏幕上渲染出来要经过很多个步骤。浏览器完成这一系列的运行,或者说渲染出来我们常常称之为“关键渲染路径”(Critical Rendering Path)。理解CRP(Critical Rendering Path)相关的知识可以更好的提高网站的性能。

CSS Animation性能优化

CSS Animation是实现Web Animation方法之一,其主要通过@keyframesanimation-*或者transition来实现一些Web动效。不过今天我们聊的不是怎么制作Web动画,咱们来聊聊CSS Animation性能相关的话题。

提高前端性能的一个案例

De Voorhoede,我们尽所能地为客户推进前端性能。虽然不是很容易就能说服客户完全按照我们的指令去做,但我们一直在尽全力和他们沟通,解释提高性能的重要性,或者将他们的性能与他们主要竞争对手进行比较。最近更新了我们的网站,除了设计上进行了大修,这也是一个将性能提高到最优的理想机会。我们的目标是有效控制,注重性能,与未来技术兼容,并将创建网站变为了一件有趣的事。以下是我们如何改进网站的具体做法。

【转载】高性能的动画

让我们直接进入主题。现代浏览器在完成以下四种属性的动画时,消耗成本较低: position(位置), scale(比例缩放), rotation(旋转) 和 opacity(透明度)。如果你对其他的属性设置动画,你就需要对你的冒险负责。而且你的动画将可能达不到流畅的60fps

【转载】使用 Chrome Timeline 来优化页面性能

有时候,我们就是会不由自主地写出一些低效的代码,严重影响页面运行的效率。或者我们接手的项目中,前人写出来的代码千奇百怪,比如为了一个 Canvas 特效需要同时绘制 600 个三角形,又比如 Coding.net 的任务中心需要同时 watch 上万个变量的变化等等。那么,如果我们遇到了一个比较低效的页面,应该如何去优化它呢?

使用CSS3实现60FPS动画

使用动画在移动应用程序中很容易的。如果您遵循我们的建议,移动应用程序中使用动画变得很简单。虽然现在很多人在移动应用程序中使用CSS3 Animation来制作动画,当然很多人也不这么做。很多最佳实践,还是不断的被忽视。出现这种情况主要是因为仍有许多人并不真正了解这些最佳实践存在的真正原因,因此没有大力的支持。

【转载】使用 FLIP 来提高 Web 动画的性能

CSS 动画已经存在很多年了,使用恰当可以很好地提高网站的用户体验,也正是由于其容易使用,就很可能出现性能低下的动画,从而降低了整个页面的运行效率。回想一下:你曾经是否使用过 CSS 来改变元素的宽度、高度或绝对位置?如果回答是肯定的,就意味着你触发了性能低下的重排或重绘计算,在某些情况下甚至可能导致页面闪烁

使用Express Server和Handlebars优化Critical-Path性能

最近,我在一个React同构网站工作。这个网站建立在React上,运行于Express服务器上。一切都进行得十分顺利,但是我仍对CSS包的加载阻塞不满意。因此,我开始考虑如何在Express服务器上进行关键路径的优化。这篇文章主要是如何使用Express和Handlebars进行安装以及配置一个关键路径的性能优化的笔记。

字体加载策略大全

本指南不针对于具有优先级加载以及用例示范的font icons,或许,SVG会是一个更好地长期选择。如果你正在寻找具体的方法,这里的一些相关链接可能对你的帮助会更加直接。

页面

返回顶部