web的首屏加载时间（页面首次加载）

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

白屏时间是首屏时间的一个子集如何计算白屏时间和首屏时间白屏时间：performance.timing.responseStart - performance.timing.navigationStart 。

首屏时间：可以简单地通过DOMContentLoad去测量，如下:document.addEventListener(DOMContentLoaded, (event) => { / N; W \- r1 V console.log(first contentful painting); ) _2 p Z4 h! r8 t5 K, \' u });

如果是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.0http2.0对比http1.1，最主要的提升是传输性能，在接口小而多的时候性能优势会更加明显 利用好http压缩即使是最普通的gzip，也能把bootstrap.min.css压缩到原来的17%。

可见，压缩的效果非常明显，特别是对于文本类的静态资源另外，接口也是能压缩的接口不大的话可以不用压缩，因为性价比低（考虑压缩和解压的时间）值得注意的是，因为压缩算法的特性，文件越大，压缩效果会越好水苏：聊聊http压缩

3 赞同 · 0 评论文章10. 利用好script标签的async和defer这两个属性。

img11. 使用 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自己的一些理解

Q: 接口多会影响静态资源的加载吗？A: 没啥影响接口体积一般较小，对带宽的占用较低，很少会因为接口触发带宽瓶颈，浏览器渲染页面的过程也不会被接口影响（但js，css静态资源会），所以影响不大举例，无需过多担心埋点类的请求会影响页面性能。

Q: 两个小的js文件a.js & b.js VS 合并成一个大的js文件(bundle.js)？A: bundle.js的优势：减少了一个http请求（http2中这点变得不明显）更好的压缩率bundle.js的劣势：。

缓存颗粒度变大，a.js的改动会导致整个文件都丢失缓存性能测试工具lightHousewebpagetest工具对业务是无感知的，所以它们给出的都是通用性的一些建议若想进一步优化，需要自己根据业务特点去寻找可以优化的点。

参考链接Content-Encodingsummary_large_imagehttps://web.dev/first-contentful-paint/?utm_source=devtools