性能

使用 Paint Timing API

现在是成为 Web 性能爱好者的最佳时间,特别是 Chrome 60 的 Paint Timing API 的出现更加证明了这一事实。虽说 Paint Timing API 仍属于正在激增的 Performance API 之一,但是它还提供了抓取 页面资源 耗时的能力,通过这个全新的实验性 API,你可以在页面开始绘制时就去抓取你需要的度量值。

Preload,Prefetch 和它们在 Chrome 之中的优先级

今天我们来深入研究一下 Chrome 的网络协议栈,来更清晰的描述早期网络加载(像 <link rel=“preload"><link rel=“prefetch”>)背后的工作原理,让你对其更加了解。像其他文章描述的那样,preload 是声明式的 fetch,可以强制浏览器请求资源,同时不阻塞文档 onload 事件。

资源预加载

当提到前端性能优化时,我们首先会联想到文件的合并、压缩,文件缓存和开启服务器端的 gzip 压缩等,这使得页面加载更快,用户可以尽快使用我们的 Web 应用来达到他们的目标。资源预加载是另一个性能优化技术,我们可以使用该技术来预先告知浏览器某些资源可能在将来会被使用到。

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

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

理解关键的渲染路径

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

CSS Animation性能优化

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

【转载】高性能的动画

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

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

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

字体加载策略大全

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

理解Critical CSS

CSS 资源的加载情况对浏览器渲染页面的影响很大,这是因为默认情况下浏览器只有在完成 <head> 部分 CSS 样式的加载、解析之后才会渲染页面。这种渲染方式意味着,如果 CSS 文件很大,那么用户就必须等待很长的时间才能看到渲染结果。针对这一问题,我们将在接下来的内容中讨论一种非常规的解决方案,提高页面的渲染速度,这一方案常被称为 critical rendering path

页面

返回顶部