概念
白屏时间:用户点击一个链接或打开浏览器输入url地址后,从屏幕空白到显示第一个画面的时间。
白屏时间的长短将直接影响用户对该网站的第一印象。
白屏时间的重要性
当用户点开一个链接或者直接在浏览器中输入url开始进行访问时,就开始等待页面的展示。页面渲染的事件越短,用户等待的时间就越短,用户感知到页面的速度就越快。这样可以极大的提升用户的体验,减少用户的跳出,提升页面的留存率。
白屏是怎样一个过程
- DNS Lookup
浏览器会先对页面进行域名解析,获取到服务器的IP地址后,进而和服务器进行通信。
Tips:通常在整个加载页面的过程中,浏览器会进行多次DNS
Lookup,包括页面本身的域名查询以及在解析HTML页面时加载的JS、CSS、Image、Video等资源产生的域名查询
-
建立TCP请求连接
浏览器和服务器端TCP请求建立的过程,是基于TCP/IP,该协议由网络层的IP和传输层的TCP组成。IP是每一台互联网设备在互联网中的唯一地址。
TCP通过三次握手简历连接,并提供可靠的数据传输服务。 -
服务端请求处理响应
在TCP连接建立后,Web服务器接收请求,开始进行处理,同时浏览器开始等待服务器的处理响应。
Web服务器根据类型的不同,进行相应的处理。静态资源如图片、css文件、静态HTML直接响应;如其他注册的请求转发给相应的应用服务器,进行如数据处理、缓存中取数据,将数据按照约定好的格式响应给浏览器。 -
客户端下载、解析、渲染显示页面
在服务器返回数据后,客户端浏览器接收数据,进行HTML下载、解析、渲染显示。
a.如果是Gzip包,则先解压为HTML
b.解析HTML的头部代码,下载头部代码中的样式资源文件或者脚本资源文件
c.解析HTML代码和样式文件代码,构建HTML的DOM树以及CSS相关的CSSOM树
d.通过遍历DOM树和CSSOM树,浏览器依次计算每个节点的大小、坐标、颜色等样式,构造渲染树
e.根据渲染树完成绘制过程
浏览器下载HTML后,首先解析头部代码,进行样式表下载,然后继续向下解析HTML代码,构建DOM树,同事进行样式下载。当DOM树构建完成后,立即开始构造CSSOM树。理想情况下,样式表下载速度够快,DOM树和CSSOM树进入下一个并行的过程,当两棵树构建完毕,构建渲染树,然后进行绘制。
浏览器安全解析策略对解析HTML造成的影响:
- 当解析HTML时遇到内联JS代码,会阻塞DOM树的构建。
- 特别悲催的情况:当css样式文件没有下载完成时,浏览器解析HTML遇到了内联JS代码,此时!!!根据浏览器的安全解析策略,浏览器暂停JS脚本执行,暂停HTML解析。直到css文件下载完成,完成CSSOM树构建,重新恢复原来的解析。
白屏——性能优化
- DNS解析优化
DNS缓存优化
DNS预加载策略
稳定可靠的DNS服务器 - TCP网络链路优化
针对网络链路的优化,好像除了花钱没有更好的方式 - 服务器端处理优化
根据浏览器对页面的下载、解析、渲染过程,可以考虑一下优化处理:
a.尽可能的精简HTML的代码和结构
b.尽可能的优化CSS文件和结构
c.一定要合理的防止JS代码,尽量不要使用内联的JS代码