定义
1.白屏时间(First Paint):是指浏览器从响应用户输入网址地址,到浏览器开始显示内容的时间。
白屏时间 = 页面开始展示的时间点 - 开始请求的时间点=window.performance.timing.responseStart-window.performance.timing.navigationStart
2.首屏时间(First Contentful Paint):是指浏览器从响应用户输入网络地址,到首屏内容渲染完成的时间。
首屏时间 = 首屏内容渲染结束时间点 - 开始请求的时间点
影响因素
1.白屏时间是从用户开始请求页面时开始计算到开始显示内容结束,中间过程包括DNS查询、建立TCP链接、发送首个HTTP请求、返回HTML文档、HTML文档head解析完毕。
因此影响白屏时间的因素:网络、服务端性能、前端页面结构设计。
2.首屏的影响因素除了包含白屏影响因素以外,害包括首屏资源量。
优化方法
1.白屏:
使用CDNSSR小文件合并减少http请求图片、js资源压缩开启gzip懒加载(路由、首屏图片资源、js文件等)js大文件分块按需加载js文件 defer、async加载ui框架按需加载为了给用户好的体验,用骨架图
2.首屏:
包括白屏的优化方案以,另需要特别注意首页资源的懒加载问题。