web的首屏加载时间

watersu

stay foolish

白屏加载和首屏加载时间的区别

白屏时间是指浏览器从响应用户输入网址地址，到浏览器开始显示内容的时间。

首屏时间是指浏览器从响应用户输入网址地址，到首屏内容渲染完成的时间，此时整个网页不一定要全部渲染完成，但在当前视窗的内容需要。

白屏时间是首屏时间的一个子集。

如何计算白屏时间和首屏时间

白屏时间：performance.timing.responseStart - performance.timing.navigationStart

首屏时间：可以简单地通过DOMContentLoad去测量，如下:

document.addEventListener('DOMContentLoaded', (event) => {
    console.log('first contentful painting');
});

如果是CSR（客户端渲染）的渲染方式，以上的首屏时间获取方式不一定可靠，浏览器可能在接口内容还没返回前，就触发了DOMContentLoaded事件，导致得出的首屏时间要早很多。

所以有时需要手动去计算时间（手动埋点），可以定义在某块主要内容渲染完成的那一刻就意味着完成了首屏渲染。

正常来说，首屏加载时间不应该超过2s~3s。

如果一个页面完成首屏加载需要5秒以上，可能用户下次就从心理排斥打开这个页面，换句话说首屏加载时间对用户留存率影响很大。

如何优化首屏加载时间

http缓存（强缓存和协商缓存), 性价比最高的一个优化方式。需注意的是，浏览器不缓存XHR接口，自己可根据业务特性动态地选择缓存策略。比如一个体积很大的接口，但内容变更频率不是很频繁，这种情况就适合用协商缓存。
cdn分发（减少传输距离）。通过在多台服务器部署相同的副本，当用户访问时，dns服务器就近（物理距离）选择一台文件服务器并返回它的ip。
前端的资源动态加载：

路由动态加载
组件动态加载
图片懒加载(offScreen Image)，越来越多的浏览器支持原生的懒加载，通过给img标签加上loading="lazy来开启懒加载模式。

合并请求。这点在串行接口的场景中作用很明显，比如有两个串行的接口A和B，需要先请求A，然后根据接口A的返回结果去请求接口B。假如server和client的物理距离为D，那么这个串行的场景传输的物理路程为4D。如果合并成一个接口，物理路程可减小为2D。
页面使用骨架屏。意思是在首屏加载完成之前，通过渲染一些简单元素进行占位。骨架屏的好处在于可以减少用户等待时的急躁情绪。这点很有效，在很多成熟的网站都有大量应用。没有骨架屏的话，一个loading图也是可以的。
使用ssr渲染。
service worker：通过sw离线更新缓存的能力，理论上能做到每次访问页面都无需下载html，且所有静态资源都已经在本地有缓存。
引入http2.0。http2.0对比http1.1，最主要的提升是传输性能，在接口小而多的时候性能优势会更加明显。
利用好http压缩。即使是最普通的gzip，也能把bootstrap.min.css压缩到原来的17%。可见，压缩的效果非常明显，特别是对于文本类的静态资源。另外，接口也是能压缩的。接口不大的话可以不用压缩，因为性价比低（考虑压缩和解压的时间）。值得注意的是，因为压缩算法的特性，文件越大，压缩效果会越好。

10. 利用好script标签的async和defer这两个属性。

11. 使用 WebP 代替jpg/png。

WebP lossless images are 26% smaller in size compared to PNGs. WebP lossy images are 25-34% smaller than comparable JPEG images at equivalent SSIM quality index. --by Google Developers