性能优化

图片的优化

图片在 Web 中除了占有重要的一席之地之外,对资源的使用也是非常的大,而且对用户的体验影响也非常大。虽然 <img> (或 CSS 中其他能用<image> 数据类型的属性,比如 background-imagemask-imageborder-image 以及 list-style-image 等)看上去不是很起眼,但图片使用的好坏直接会影响用户的体验,Web 的性能(加载,渲染相关的性能)。或者简单地说,它直接影响 CWV (Core Web Vitals)的几个关键指标,比如 LCPCLSFID。为什么说图片会对 LCP、CLS 和 FID 有着直接影响呢?我们先从 <img> 的使用开始,然后逐步来分析。

编写高效 CSS 选择器

早在十多年前,在社区就有很多专业人士探讨和深究过 CSS 选择器对渲染性能的影响。特别是对于今天的现代浏览器而言,他们经过了多年的变化(和优化),浏览器变得更聪明!对于 Web 开发人员,“不应该需要担心优化选择器的问题”,他对页面的渲染性能影响已经非常的小。即使如此,CSS的选择器的使用还是有分高效和非高效的,我们在编码的时候,还是应该尽可能的使用高效的CSS选择器,因为高效的CSS选择器对于页面的渲染是有一定帮助的,哪怕这种帮助很微小。但对于追求极致的渲染体验,这一切都是值得的,因为你要付出的并不会太多,反而得到的会较多。如果对网站的所有领域,包括CSS都进行微小的改进,那么他们将产生更多的实质性变化;用户总是会受益的

理解 Web 的重排和重绘

Web 中 的重排和重绘是 Web 渲染中常见的问题,即 Relayout(重排)和 Repaint(重绘)。其中重排(Relayout)也常被称为回流(Reflow)。另外在 Web 中聊渲染相关的话题,除了 Repaint、Reflow、Relayout之外,还有 Restyle(重写样式)和 Rendering(渲染)。这五个带有 R 开头的单词简称 5R ,对于 Web 性能的优化有着决定性的影响。如果要提高页面的渲染性能就需要深究造成 Repaint 和 Reflow 的相关原因。

消除阻塞页面渲染的资源

在 Web 页面渲染过程中,有些资源文件(比如 HTML、CSS 和 JavaScript)会阻塞页面的渲染。当浏览器遇到渲染阻塞资源时,它就会停止下载其余的资源,直到这些关键文件得到处理(关键资源)。在此期间,整个渲染过程被搁置。另一方面,非渲染阻塞资源并不会延迟页面的渲染。浏览器可以在最初的页面渲染之后在后台安全地下载它们。然则,并不是所有被浏览器视为阻塞渲染的资源都是首屏渲染所必需的;这完全取决于页面的特征。你可以使用一些技术手段(最佳实践),将这些非关键的渲染阻塞资源变成非渲染的阻塞资源。此外,你也可以减少那些仍然关键的,无法消除的阻塞渲染的资源数量或大小。了解阻塞渲染资源将使你能够解决常见的 Web 性能问题。

关键渲染路径(CRP)

介绍Web页面解析时曾提到过:DOM树和CSSOM树结合在一起会构建出 Render Tree(渲染树),渲染树结合 Layout 绘制在屏幕上,从而展现出来。常常把这个过程称为 关键渲染路径(Critical Rendering Path)简称 CRP。也就是说,CRP 所用的时间直接决定了页面首次渲染页面的时间。即,通过优化关键渲染路径,可以显著缩短首次渲染页面的时间。如果我们要优化一个 Web 页面性能,那就必须对关键渲染路径中每一步中发生了什么,只有优化了关键路径才能彻底优化渲染性能。通过优化关键渲染路径,我们可以显著缩短首次渲染页面的时间。此外,了解关键渲染路径还可以构建高性能交互式应用打下基础。

初探 CSS 渲染引擎

最近一直在探索 Web 渲染性能相关技术,这也是自己一直比较弱的地方。虽然和渲染中的 Style 常打交到,但并未触及浏览器和渲染底层相关的知识。最近饿补了一下这方面的知识。整理了一些有关于 CSS 渲染引擎相关的文章。文章内容较长,图也多。但主要分为三个部分:浏览器理论基础、Web页面解析 和 CSS 渲染引擎。

仅使用CSS提高页面渲染速度

用户在访问一个Web网站(页面)或应用时,总是希望它的加载速度快,功能流畅。如果过于慢,用户就很有可能失去耐心而离开你的Web网站或应用。作为开发人员,给自己应用提供更快的访问速度,提供很好的用户体验是必备的基础技能,而且Web开发者在开发中也可以做很多事情来改善用户体验。那我们今天就来和大家聊聊,在CSS方面有哪些技巧可以帮助我们来提高Web页面的渲染速度。

初探CSS的容器模块

CSS的容器模块指的是CSS Containment Module,到目前为止主要分为 Level 1Level 2两个版本。在容器模块中主要包含了CSS的 containcontent-visibility 两个属性。这两个属性都可以帮助我们提高Web页面的性能,那么它们是如何工作的?我们在实际项目中又应该怎么使用呢?如果你感兴趣的话,请继续往下阅读。

使用 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 事件。

页面

返回顶部