前端性能优化之白屏时间

定场诗

曲木为直终必弯，养狼当犬看家难；
墨染鸬鹚黑不久，粉刷乌鸦白不天。
蜜饯黄莲终需苦，强摘瓜果不能甜；
好事总得善人做，哪有凡人做神仙。

前言

该篇文章会为您分享在前端性能优化中非常重要的一环-白屏时间，将从白屏时间的概念、重要性以及白屏的过程一一进行阐述，同时提供性能优化的策略与实践。

一、概念

白屏时间：即用户点击一个链接或打开浏览器输入URL地址后，从屏幕空白到显示第一个画面的时间。

白屏时间的长短将直接影响用户对该网站的第一印象。

二、白屏时间的重要性

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

打开一个页面就像你的女票召唤你一样，你出现的越迅速，女票肯定会愈加欣喜！反之，你千呼万唤始出来，那么你的女票很可能又要抛弃你了(为什么要对你说又呢? ...)

三、白屏是一个怎样的过程呢？

让我们一起来揭秘：从打开一个页面，到页面的画面展示经历了怎样的过程！

1. DNS Lookup

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

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

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

2. 建立TCP请求连接

浏览器和服务端TCP请求建立