浏览器首次渲染时间点的探究

当我们使用 Chrome Devtool 进行性能分析时，可以在 Performance 面板上看到用绿线标出来的 First-Contentful-Paint。这是什么意思？浏览器何时进行首次渲染？网上只能查到一些模棱两可的资料，今天我们来探究这个问题。

1. 引子

在掘金上用『首次渲染』进行搜索，得到的是一些似是而非的资料。一些文章仅仅是把首次渲染的时间点和一些优化的建议放在一起，并没有清晰地阐述什么是首次渲染。还有一些文章从原理上了首次渲染，但是并没有准确说明浏览器具体是在什么时候进行首次渲染的。

2. 什么是首次渲染

首次渲染，顾名思义，就是浏览器第一次在屏幕上显示内容的时间点。这个时间点很重要，因为它直接影响了用户体验。如果首次渲染时间过长，用户就会感到网页加载速度慢，从而影响他们的耐心和转化率。

3. 浏览器何时进行首次渲染

浏览器进行首次渲染的时间点取决于多个因素，包括：

• DOM 解析时间： 浏览器需要解析 HTML 代码并构建 DOM 树，这是渲染过程的第一步。DOM 解析时间会受到 HTML 代码复杂度、网络延迟和浏览器解析速度的影响。
• CSS 解析时间： 浏览器需要解析 CSS 代码并构建 CSSOM 树，这是渲染过程的第二步。CSS 解析时间会受到 CSS 代码复杂度、网络延迟和浏览器解析速度的影响。
• 布局计算时间： 浏览器需要计算每个 DOM 元素的布局，包括位置、大小和样式。布局计算时间会受到 DOM 树的复杂度和 CSS 规则的数量的影响。
• 绘制时间： 浏览器需要将布局好的 DOM 元素绘制到屏幕上。绘制时间会受到显卡性能和浏览器绘制算法的影响。

4. 如何优化首次渲染时间

优化首次渲染时间有很多方法，包括：

• 减少 HTML 代码大小： 减少不必要的 HTML 代码，例如注释和空行，可以缩短 DOM 解析时间。
• 使用 CSS 预解析器： CSS 预解析器可以在页面加载之前解析 CSS 代码，缩短 CSS 解析时间。
• 减少 CSS 代码大小： 减少不必要的 CSS 代码，例如冗余规则和未使用的选择器，可以缩短 CSS 解析时间。
• 使用布局优化技术： 可以使用布局优化技术，例如 Flexbox 和 Grid，来提高布局计算速度。
• 使用硬件加速： 硬件加速可以使用显卡来提高绘制速度。

5. 总结

首次渲染时间点是影响用户体验的重要指标。浏览器进行首次渲染的时间点取决于多个因素，包括 DOM 解析时间、CSS 解析时间、布局计算时间和绘制时间。通过优化这些因素，我们可以提高首次渲染速度，从而改善用户体验。

首次渲染, 浏览器渲染, 性能优化, Chrome Devtool, First-Contentful-Paint, DOM 解析, CSS 解析, 布局计算, 绘制, HTML 优化, CSS 优化, 硬件加速

首次渲染时间点是影响用户体验的重要指标。本文探究了浏览器进行首次渲染的时间点，影响因素以及优化方法，为提高网页性能和用户体验提供了指导。