performance

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进行安装以及配置一个关键路径的性能优化的笔记。

12步创建高性能Web APP

现在,Web App 日益重视用户的交互体验,了解性能优化的方式则可以有效提高用户体验。阅读和实践下面的性能优化技巧,可以帮你改善应用的流畅度、渲染时间和其他方面的性能表现。对 Web App 进行性能优化是一份冗杂沉重的工作,这不仅是因为构建一个 Web App 需要前后端协作,而且需要多方面的技术栈:数据库、后端、前端,需要运行在多种平台:iOS,安卓,Chrome,Firefox,Edge。这太复杂了!不过,还是有一些历经实践的通用方式可以用来优化 Web App 的性能。在接下来的小节中,我们将逐步介绍相关的细节。

性能工具

嗨,各位,又到了周末总结时间!得益于大量的 Grunt 和 Gulp 插件,我们可以轻松实现网站数据的可视化,虽然深入理解这些工具还比较困难,但分门别类的将它们列出来,也是很有帮助的。

如何让你的移动端网站更快

Cindy Krum 最近发表了一篇非常值得一读的文章:《9 Things You Need to Know About Google's Mobile-Friendly Update》,强烈建议在阅读本文前理解一下该文的思想。已经准备好了?那我们开始吧。为了在 4 月 21 号前迅速优化为移动端网站,最简单的方法就是牺牲一些性能。但是谷歌曾经多次提醒我们,站点的响应性能是非常重要的搜索权重点,比如 2010关于桌面端2013 关于移动端 的这两篇文章。在本文中,我将会讲述一下最佳实践方案,希望你在创建或重构设计时牢记这些经验。此外,建议你精读谷歌关于移动友好型站点的指导文档

页面

返回顶部