一、白屏时间

1.基本概念

白屏时间是指用户输入内容回车到浏览器开始出现第一个字符，也就是说（页面）开始显示内容的时间。

2.白屏时间的重要性

当用户点开一个链接或者是直接在浏览器中输入URL开始进行访问时，就开始等待页面的展示。页面渲染的时间越短，用户等待的时间就越短，用户感知到页面的速度就越快。这样可以极大的提升用户的体验，减少用户的跳出，提升页面的留存率。

3.白屏是一个怎样的过程呢？

(1). DNS Lookup

DNS Lookup 即浏览器从DNS服务器中进行域名查询。

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

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

(2). 建立TCP请求连接

浏览器和服务端TCP请求建立的过程，是基于TCP/IP，该协议由网络层的IP和传输层的TCP组成。IP是每一台互联网设备在互联网中的唯一地址。

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

(3). 服务端请求处理响应

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

Web服务器根据请求类型的不同，进行相应的处理。静态资源如图片、CSS文件、静态HTML直接进行响应；如其他注册的请求转发给相应的应用服务器，进行如数据处理、缓存中取数据，将数据按照约定好的格式响应给浏览器。

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

(4). 客户端下载、解析、渲染显示页面

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

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

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

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

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

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

浏览器下载HTML后，首先解析。头部代码，进行样式表下载，然后继续向下解析HTML代码，构建DOM树，同时进行样式下载。当DOM树构建完成后，立即开始构造CSSOM树。理想情况下，样式表下载速度够快，DOM树和CSSOM树进入一个并行的过程，当两棵树构建完毕，构建渲染树，然后进行绘制。

Tips:浏览器安全解析策略对解析HTML造成的影响：

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

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

因此，一定要合理放置JS代码！！！

4.白屏-性能优化

至此，我们已经了解了从浏览器在打开一个链接开始，到屏幕展示的过程-白屏时间的历程，那这对每个环节中发生的事情，我们可以有针对性的进行相关的优化。

(1). DNS解析优化

针对DNS Lookup环节，我们可以针对性的进行DNS解析优化。

DNS缓存优化。

DNS预加载策略。

稳定可靠的DNS服务器。

(2). TCP网络链路优化

针对网络链路的优化，好像除了花钱没有什么更好的方式！

(3). 服务端处理优化

服务端的处理优化，是一个非常庞大的话题，会涉及到如Redis缓存、数据库存储优化或是系统内的各种中间件以及Gzip压缩等...

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

根据浏览器对页面的下载、解析、渲染过程，可以考虑一下的优化处理：

尽可能的精简HTML的代码和结构。

尽可能的优化CSS文件和结构。

一定要合理的放置JS代码，尽量不要使用内联的JS代码！！

 5.白屏时间计算

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

二、首屏时间

1.基本概念

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

2.首屏时间计算

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

要知道首屏时间总是比白屏时间长的。

首屏时间 = 白屏时间 + 首屏（开始渲染到）完全渲染完成的时间。