理解Critical CSS
CSS 资源的加载情况对浏览器渲染页面的影响很大，这是因为默认情况下浏览器只有在完成 <head> 部分 CSS 样式的加载、解析之后才会渲染页面。这种渲染方式意味着，如果 CSS 文件很大，那么用户就必须等待很长的时间才能看到渲染结果。针对这一问题，我们将在接下来的内容中讨论一种非常规的解决方案，提高页面的渲染速度，这一方案常被称为 critical rendering path。
南北 找到『 24篇 』带有"性能"标签的文章列表.
南北 字体加载策略大全
本指南不针对于具有优先级加载以及用例示范的font icons，或许，SVG会是一个更好地长期选择。如果你正在寻找具体的方法，这里的一些相关链接可能对你的帮助会更加直接。
静子 【转载】高性能的动画
让我们直接进入主题。现代浏览器在完成以下四种属性的动画时，消耗成本较低： position（位置）， scale（比例缩放）, rotation（旋转） 和 opacity（透明度）。如果你对其他的属性设置动画，你就需要对你的冒险负责。而且你的动画将可能达不到流畅的60fps。
大漠 CSS Animation性能优化
CSS Animation是实现Web Animation方法之一，其主要通过@keyframes和animation-*或者transition来实现一些Web动效。不过今天我们聊的不是怎么制作Web动画，咱们来聊聊CSS Animation性能相关的话题。
大漠 理解关键的渲染路径
当浏览器从服务器接收到一个HTML页面的请求时，到屏幕上渲染出来要经过很多个步骤。浏览器完成这一系列的运行，或者说渲染出来我们常常称之为“关键渲染路径”（Critical Rendering Path）。理解CRP（Critical Rendering Path）相关的知识可以更好的提高网站的性能。
大漠 使用浏览器开发者工具检测CSS动画性能
CSS动画性能非常好。虽然是简单的几个动画元素，如果你的代码没有让动画表现出其意义或者说使用页面变得更为复杂，网站的用户可能很快就会发现，并且有可能让用户觉得恶心。反而得不到相应的好评。在这篇文章中，我将介绍浏览器开发者工具的一些有用的功能，这些功能将能帮助你检查出你的CSS动画在渲染引擎下会发生些什么。这样，当你的动画看起来有点卡（帧率图有点波涛汹涌），你会找到地应的方法知道为什么为会这样以及如何解决它。
大漠 Preload，Prefetch 和它们在 Chrome 之中的优先级
今天我们来深入研究一下 Chrome 的网络协议栈，来更清晰的描述早期网络加载（像 <link rel=“preload"> 和 <link rel=“prefetch”>）背后的工作原理，让你对其更加了解。像其他文章描述的那样，preload 是声明式的 fetch，可以强制浏览器请求资源，同时不阻塞文档 onload 事件。
大漠 使用 Paint Timing API
现在是成为 Web 性能爱好者的最佳时间，特别是 Chrome 60 的 Paint Timing API 的出现更加证明了这一事实。虽说 Paint Timing API 仍属于正在激增的 Performance API 之一，但是它还提供了抓取 页面 和 资源 耗时的能力，通过这个全新的实验性 API，你可以在页面开始绘制时就去抓取你需要的度量值。
大漠 初探CSS的容器模块
CSS的容器模块指的是CSS Containment Module，到目前为止主要分为 Level 1 和 Level 2两个版本。在容器模块中主要包含了CSS的 contain 和 content-visibility 两个属性。这两个属性都可以帮助我们提高Web页面的性能，那么它们是如何工作的？我们在实际项目中又应该怎么使用呢？如果你感兴趣的话，请继续往下阅读。
大漠 仅使用CSS提高页面渲染速度
用户在访问一个Web网站（页面）或应用时，总是希望它的加载速度快，功能流畅。如果过于慢，用户就很有可能失去耐心而离开你的Web网站或应用。作为开发人员，给自己应用提供更快的访问速度，提供很好的用户体验是必备的基础技能，而且Web开发者在开发中也可以做很多事情来改善用户体验。那我们今天就来和大家聊聊，在CSS方面有哪些技巧可以帮助我们来提高Web页面的渲染速度。
大漠