什么是白屏时间
白屏时间指的是在浏览器的搜索栏输入一串url,到页面中内容呈现的时间；
出现的原因
弱网条件下，网络延迟，js加载延迟等会阻塞页面； 客户端存在bug，缓存模块错乱等....
聚焦用户
这个是用户对于网站加载时间的感知体验
| 延迟时间 | 用户感知 |
|---|---|
| 0-16ms | 很流畅 |
| 0-100ms | 基本流畅 |
| 100-1000ms | 感觉到网站上有一些加载任务 |
| 1000ms or more | 失去耐心 |
所以大于100ms的尽量添加加载的效果
白屏形成的过程
接下来让我们一起看看前端做常见的面试题，输入一个url后发生了什么
DNS Lookup
DNS Lookup就是在DNS服务器中解析对应的域名
浏览器首先会对页面进行域名解析,根据输入的域名查找到对应的服务器ip，进而和服务器ip通信
DNS在解析的过程中会对整个页面包含的js，css，html等文件带来的域名进行解析；
建立TCP连接请求
浏览器服务器的通信是基于TCP/IP，这个协议是由网络层IP层和传输层TCP层,IP是每台电脑在互联网中的唯一标识；
TCP通过三次握手进行数据链接与传输；
服务端请求处理响应
TCP链接建立以后，服务器接受请求，开始处理，同时浏览器开始等待服务器的处响应；
Web服务器按照请求的类型进行响应。静态资源文件，css文件，html文件都是直接返回；一些需要转发的请求，转发给对应额服务器，然后将数据按照约定响应给浏览器；
客户端下载解析，渲染页面
服务端将浏览器的请求响应后，浏览器就会进行html文件的下载，解析，响应，渲染；
1.如果响应的类型为gzip，浏览器先解压html；
2.解析html的头部文件， 解析对应的css文件和脚本文件；
3．解析html的文件和样式文件资源，构建DOM树和CSSOM树；
4.遍历DOM树和CSSDOM树，根据节点计算大小，颜色等构建渲染树；
5.渲染页面
需要注意的点：
1.浏览器在渲染页面的时候，遇到js脚本资源，就会造成阻塞； 当css文件没有下载完成到，浏览器解析html文件时又遇到了内联的js代码，根据浏览器的安全策略机制， 浏览器会暂停js文件执行，暂停html的解析，优先下载css文件，直到css文件下载完成，完成CSSDOM树，重新恢复原来的js，所以一定要合理的放置js文件；
2.使用import引入的css样式， 并不会一次性下载完成，只有在运行到那个页面的时候才会下载对应的css文件，这样很容易造成页面样式错乱等；所以尽量不要使用import引入样式
知道了白屏产生的原因，接下来我们看看如何进行优化：
DNS LOOKUP
1.使用DNS缓存优化； 2.DNS预解析； 3.稳定可靠的DNS服务器；
建立TCP连接请求
链路层的优化， 主要在于花钱来解决
服务端请求处理响应
服务端的的优化是个非常庞大， 包括Redis缓存、数据库存储优化或是系统内的各种中间件以及Gzip压缩等...
客户端下载解析，渲染页面
- 优化css代码，html代码等，减少冗余代码； 2.合理正确的放置css代码和js代码的位置；
- 尽量不要使用import引入css以及较少内联的js的使用
觉得对你有用就给小姐姐点个赞呗！
