一、白屏时间
白屏时间: 即用户点击一个链接或打开浏览器输入URL地址后,从屏幕空白到显示第一个画面的时间。
二、白屏时间的重要性
当用户点开一个链接或者是直接在浏览器中输入URL开始进行访问时,就开始等待页面的展示。页面渲染的时间越短,用户等待的时间就越短,用户感知到页面的速度就越快。这样可以极大的提升用户的体验,减少用户的跳出,提升页面的留存率。
三、白屏的过程
从输入url,到页面的画面展示的过程
- 首先,在浏览器地址栏中输入
url
- 浏览器先查看浏览器缓存-系统缓存-路由器缓存,如果缓存中有,会直接在屏幕中显示页面内容。若没有,则跳到第三步操作。
- 在发送
http
请求前,需要域名解析(DNS
解析),解析获取相应的IP
地址。 - 浏览器向服务器发起
tcp
连接,与浏览器建立tcp
三次握手。 - 握手成功后,浏览器向服务器发送
http
请求,请求数据包。 - 服务器处理收到的请求,将数据返回至浏览器
- 浏览器收到
HTTP
响应 - 读取页面内容,浏览器渲染,解析
html
源码 - 生成
Dom
树、解析css
样式、js
交互,渲染显示页面
浏览器下载HTML
后,首先解析头部代码,进行样式表下载,然后继续向下解析HTML
代码,构建DOM
树,同时进行样式下载。当DOM
树构建完成后,立即开始构造CSSOM
树。理想情况下,样式表下载速度够快,DOM
树和CSSOM
树进入一个并行的过程,当两棵树构建完毕,构建渲染树,然后进行绘制。
Tips: 浏览器安全解析策略对解析HTML
造成的影响:
当解析HTML
时遇到内联JS
代码,会阻塞DOM
树的构建,会先执行完JS
代码;当CSS
样式文件没有下载完成时,浏览器解析HTML
遇到了内联JS
代码,此时,浏览器暂停JS
脚本执行,暂停HTML
解析。直到CSS
文件下载完成,完成CSSOM
树构建,重新恢复原来的解析。
JavaScript
会阻塞 DOM
生成,而样式文件又会阻塞 JavaScript
的执行,所以在实际的工程中需要重点关注 JavaScript
文件和样式表文件,使用不当会影响到页面性能的。
四、白屏-性能优化
1. DNS解析优化
针对DNS Lookup
环节,我们可以针对性的进行DNS
解析优化。
DNS
缓存优化DNS
预加载策略- 稳定可靠的
DNS
服务器
2. TCP网络链路优化
多花点钱吧
3. 服务端处理优化
服务端的处理优化,是一个非常庞大的话题,会涉及到如Redis
缓存、数据库存储优化或是系统内的各种中间件以及Gzip
压缩等…
4. 浏览器下载、解析、渲染页面优化
根据浏览器对页面的下载、解析、渲染过程,可以考虑一下的优化处理:
- 尽可能的精简HTML的代码和结构
- 尽可能的优化CSS文件和结构
- 一定要合理的放置JS代码,尽量不要使用内联的JS代码
- 将渲染首屏内容所需的关键CSS内联到HTML中,能使CSS更快速地下载。在HTML下载完成之后就能渲染了,页面渲染的时间提前,从而缩短首屏渲染时间;
- 延迟首屏不需要的图片加载,而优先加载首屏所需图片(
offsetTop<clientHeight
)
document.documentElement.clientHeight//获取屏幕可视区域的高度
element.offsetTop//获取元素相对于文档顶部的高度
因为JavaScript
会阻塞 DOM
生成,而样式文件又会阻塞 JavaScript
的执行,所以在实际的工程中需要重点关注 JavaScript
文件和样式表文件,使用不当会影响到页面性能的。