什么是白屏时间
用户输入URL回车后到页面加载完成中间经历了什么
简要流程
1、首先，在浏览器地址栏中输入url。
2、浏览器先查看浏览器缓存-系统缓存-路由器缓存，如果缓存中有，会直接显示页面内容；若没有，就需要向后台发送请求。
3、在发送http请求前，需要域名解析(DNS解析)，解析获取相应的IP地址。（一个IP可以对应多个域名，一个域名只能对应一个IP）
4、浏览器向服务器发起tcp连接，与浏览器建立tcp三次握手。
5、握手成功后，浏览器向服务器发送http请求，请求数据包。
6、服务器处理收到的请求，将数据返回至浏览器。
7、浏览器收到HTTP响应，读取页面内容，开始进行渲染。
查找缓存
渲染机制
为什么HTML需要等待JavaScript呢？
Reflow 和Repaint的区别：
影响白屏时间的因素
1. 过多的网络请求
如果页面需要加载大量的资源文件，比如CSS、JavaScript、图片等，会导致页面加载时间延长。可以通过减少资源文件的大小、合并文件、使用CDN本地缓存等方式来优化。
2. JavaScript执行时间过长
如果页面中的JavaScript代码执行时间过长，会阻塞页面的渲染，导致白屏时间延长。可以通过优化JavaScript代码、延迟加载部分脚本、使用异步加载等方式来优化。
3. Vue组件过多或复杂
如果页面中包含大量的Vue组件，或者某个Vue组件非常复杂，会导致页面加载和渲染时间增加。可以考虑对Vue组件进行拆分、懒加载、使用虚拟滚动等方式来优化。
4. 数据请求过多
如果页面需要从后端请求大量数据，会增加页面加载时间。可以考虑减少不必要的数据请求、使用分页加载数据、使用缓存等方式来优化。
白屏优化方案
为了优化页面加载白屏时间长的问题，可以采取以下措施：
1. 代码拆分
将页面代码拆分成多个小模块，按需加载，减少首屏加载时间。
2. 懒加载
延迟加载部分组件或资源，优先加载页面核心内容，提高用户体验。
3. 图片优化
压缩图片大小、使用适当的图片格式，减少图片加载时间。
4. 异步加载
将不影响首屏展示的内容延迟加载，提高页面加载速度。
5. 服务端渲染SSR+SPA
使用服务端渲染(SSR)可以减少客户端渲染时间，提高页面加载速度。
首屏使用SSR+跳转使用SPA