共计 2095 个字符，预计需要花费 6 分钟才能阅读完成。
定场诗
曲木为直终必弯，养狼当犬看家难；墨染鸬鹚黑不久，粉刷乌鸦白不天。蜜饯黄莲终需苦，强摘瓜果不能甜；好事总得善人做，哪有凡人做神仙。前言
该篇文章会为您分享在前端性能优化中非常重要的一环 - 白屏时间，将从白屏时间的概念、重要性以及白屏的过程一一进行阐述，同时提供性能优化的策略与实践。
一、概念
白屏时间：即用户点击一个链接或打开浏览器输入 URL 地址后，从屏幕空白到显示第一个画面的时间。
白屏时间的长短将直接影响用户对该网站的第一印象。
二、白屏时间的重要性
当用户点开一个链接或者是直接在浏览器中输入 URL 开始进行访问时，就开始等待页面的展示。页面渲染的时间越短，用户等待的时间就越短，用户感知到页面的速度就越快。这样可以极大的提升用户的体验，减少用户的跳出，提升页面的留存率。
打开一个页面就像你的女票召唤你一样，你出现的越迅速，女票肯定会愈加欣喜！反之，你千呼万唤始出来，那么你的女票很可能又要抛弃你了(为什么要对你说又呢? …)
三、白屏是一个怎样的过程呢？
让我们一起来揭秘：从打开一个页面，到页面的画面展示经历了怎样的过程！
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 代码！！！
四、白屏 - 性能优化
至此，我们已经了解了从浏览器在打开一个链接开始，到屏幕展示的过程 - 白屏时间的历程，那这对每个环节中发生的事情，我们可以有针对性的进行相关的优化。
1. DNS 解析优化
针对 DNS Lookup 环节，我们可以针对性的进行 DNS 解析优化。
- DNS 缓存优化
- DNS 预加载策略
- 稳定可靠的 DNS 服务器
2. TCP 网络链路优化
针对网络链路的优化，好像除了花钱没有什么更好的方式！
3. 服务端处理优化
服务端的处理优化，是一个非常庞大的话题，会涉及到如 Redis 缓存、数据库存储优化或是系统内的各种中间件以及 Gzip 压缩等 …
4. 浏览器下载、解析、渲染页面优化
根据浏览器对页面的下载、解析、渲染过程，可以考虑一下的优化处理：
- 尽可能的精简 HTML 的代码和结构
- 尽可能的优化 CSS 文件和结构
- 一定要合理的放置 JS 代码，尽量不要使用内联的 JS 代码
声明
本文为胡哥拜读周涛明、张荣华、张新兵几位大佬所著《大型网站性能优化实战》一书并结合自身经验所得，愿对诸位小伙伴有所帮助。手动微笑.gif
后记
以上就是胡哥今天给大家分享的内容，喜欢的小伙伴记得 收藏 、 转发 、点击右下角按钮 在看，推荐给更多小伙伴呦，欢迎多多留言交流 …
胡哥有话说，一个有技术，有情怀的胡哥！京东开放平台首席前端攻城狮。与你一起聊聊大前端，分享前端系统架构，框架实现原理，最新最高效的技术实践！
长按扫码关注，更帅更漂亮呦！关注胡哥有话说公众号，可与胡哥继续深入交流呦！
