白屏/首屏时间

白屏/首屏时间

---

前言

说起前端性能优化，不得不提到白屏/首屏时间，因为这也会影响到用户使用体验，如果说一个应用的白屏或是首屏加载时间很久，那么用户的体验就会越差。

---

一、白屏时间

概念

指用户输入内容回车到浏览器开始显示第一个字符或者图像，也就是页面开始显示内容的时间

重要性

页面渲染的时间越短，用户等待的时间就越短，用户感知到页面的时间就越快，可以极大提高用户体验，减少用户的跳出，提示页面的留存率

白屏过程

1、NDS Lookup

即浏览器从 DNS 服务器中进行域名查询，浏览器会先对页面进行域名解析，获取到服务器的 IP 地址后，进而和服务器进行通信

通常在整个页面加载过程中，浏览器会多次进行 DNS Lookup，包括页面本身的域名查询以及在解析 HTML 页面时加载的 JS、CSS、Image、Video 等资源产生的域名查询

2、建立 TCP 请求连接

浏览器和服务端 TCP 请求建立的过程，是基于 TCP/IP，该协议由网络层的 IP 和传输层的 TCP 组成。

TCP 通过建立三次握手的连接，并提供可靠的数据传输服务

3、服务器端请求响应

在 TCP 连接建立后，web 服务器接受请求，开始进行处理，同时浏览器端开始等待服务器的处理响应。

web 服务器根据请求类型的不同，进行相应的处理，静态资源直接进行响应，其他的请求会转发给相应的服务器，进行数据处理，最后按照约定的格式响应给浏览器。

在大型应用中，通常分为分布式服务架构，应用服务器的处理有可能经过多个系统的中间件，最终获取到需要的数据

4、客户端下载、解析、渲染页面

在服务器返回数据后，客户端浏览器接收数据，进行 HTML 下载，解析，渲染显示

a. 如果是 Gzip 包，则先解压为 HTML；

b. 解析 HTML 的头部代码，下载头部代码中的样式资源文件或脚本资源文件；

c. 解析 HTML 代码和样式文件代码，构建 HTML 的 DOM 树以及与 CSS 相关的 CSSOM 树；

d. 通过遍历 DOM 树和 CSSOM 树，浏览器依次计算每个节点的大小、坐标、颜色等样式，构造渲染树；

e. 根据渲染树完成绘制过程。

当解析 HTML 时遇到内联 JS 代码，会阻塞 DOM 树的构建。

当 CSS 样式文件没有下载完成时，浏览器解析 HTML 遇到了内联 JS 代码，此时！！！根据浏览器的安全解析策略，浏览器暂停 JS 脚本执行，暂停 HTML 解析。直到 CSS 文件下载完成，完成 CSSOM 树构建，重新恢复原来的解析。

如何计算白屏时间

白屏时间 = 页面开始展示的时间 - 开始请求的时间点。

白屏性能优化

1、NDS 解析优化

a、DNS 缓存优化

b、DNS 预加载策略

c、稳定可靠的服务器

2、TCP 网络链路优化

3、服务器端处理优化

范围较广，会涉及到 redis 缓存，数据库存储优化或是系统内的各种中间间以及 Gzip 压缩

4、浏览器下载、解析、渲染页面优化

a、尽可能精简 HTML 代码和结构

b、尽可能优化 CSS 文件和结构

c、合理防止 JS 代码，尽量不适用内联的 JS 代码

二、首屏时间

概念

指浏览器从响应用户输入网络地址到首屏内容全部渲染完成的时间

如何计算首屏时间

首屏时间 = 首屏内容渲染完全结束的时间点 - 开始请求的时间点