1、首屏时间
首屏时间是指用户打开网站开始,到浏览器首屏内容渲染完成的时间。
2、白屏时间
白屏时间是指浏览器开始显示内容的时间。因此,我们通常认为解析完 <head> 的时刻或开始渲染 <body> 标签就是页面白屏结束的时间。
3、如何计算首屏时间和白屏时间
1)首屏时间计算:
new Date().getTime() - performance.timing.navigationStart
2)白屏时间计算:
在 </head> 标签前的 <script> 标签内加入代码:
new Date().getTime() - performance.timing.navigationStart
4、如何优化首屏加载,减少白屏时间
1)DNS 预解析
使用 meta 标签
<meta http-equiv="x-dns-prefetch-control" content="on" />
使用 link 标签
<link rel="dns-prefetch" href="https://www.baidu.com" />
2)使用 HTTP2
HTTP 相比于 HTTP1,解析速度更快;支持多路复用,多个请求可以共用一个 TCP 连接;提供了首部压缩功能;支持服务器推送,服务器可以在发送 HTML 页面时,主动推送其他资源,而不用等到浏览器解析到相应位置发请求再响应。
3)减少 HTTP 请求数量,减少 HTTP 请求大小
4)合并、压缩文件;按需加载代码,减少冗余代码
5)采用 svg 图片或字体图标
6)使用 Defer 加载 JS
尽量将 CSS 放文件头部,JS 文件放在底部,以免堵塞渲染。JS 如果放在头部,给 script 标签加上 defer 属性,异步下载,延迟执行。
7)服务端渲染
客户端渲染:获取 HTML 文件,根据需要下载 JavaScript 文件并运行,生成 DOM,然后再渲染。
服务端渲染:服务端返回 HTML 文件,客户端只需解析 HTML。
优点:首屏渲染快,对搜索引擎优化(SEO)好。
缺点:配置麻烦,增加了服务器的计算压力。
8)静态资源使用 内容分发网络(CDN)
解决用户与服务器物理距离对响应时间的影响,在多个位置部署服务器,让用户离服务器更近,从而缩短请求时间。
9)资源缓存,不重复加载相同的资源
10)图片优化(雪碧图、图片懒加载、CSS 图片懒加载)