白屏、首屏的定义、影响因素、优化方法

定义

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

• 白屏时间 = 页面开始展示的时间点 - 开始请求的时间点
• =window.performance.timing.responseStart -window.performance.timing. navigationStart

2.首屏时间(First Contentful Paint)：是指浏览器从响应用户输入网络地址，到首屏内容渲染完成的时间。

• 首屏时间 = 首屏内容渲染结束时间点 - 开始请求的时间点

影响因素

1.白屏时间是从用户开始请求页面时开始计算到开始显示内容结束，中间过程包括DNS查询、建立TCP链接、发送首个HTTP请求、返回HTML文档、HTML文档head解析完毕。

因此影响白屏时间的因素：网络、服务端性能、前端页面结构设计。

2.首屏的影响因素除了包含白屏影响因素以外，害包括首屏资源量。

优化方法

1.白屏：

1. 使用CDN
2. SSR
3. 小文件合并减少http请求
4. 图片、js资源压缩
5. 开启gzip
6. 懒加载（路由、首屏图片资源、js文件等）
7. js大文件分块按需加载
8. js文件 defer、async加载
9. ui框架按需加载
10. 为了给用户好的体验，用骨架图

2.首屏：

1. 包括白屏的优化方案以，另需要特别注意首页资源的懒加载问题。