首屏加载和白屏时间：

白屏时间

白屏时间概念：

白屏时间是指浏览器开始显示内容的时间。因此，我们通常认为解析完 的时刻或开始渲染 标签就是页面白屏结束的时间。

白屏时间计算：

在html中 head 标签前的 script 标签内加入代码：
new Date().getTime() - performance.timing.navigationStart

首屏加载时间：

从用户输入网址开始到首屏内容完成渲染的时间。整个页面不一定要全部的渲染完成，但是要展示当前视窗需要的内容。 可以说首屏加载是用户体验中非常重要的一个环节

首屏加载时间计算：

方式一：

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

方式二：

performance.getEntriesByName("first-contentful-paint")[0].startTime

加载慢的原因

• 网络延时问题
• 资源文件体积是否过大
• 资源是否重复发送请求去加载了
• 加载脚本的时候，渲染内容堵塞了

解决方案：

减少首屏渲染时间的方法有很多，总的来讲可以分成两大部分 ：资源加载优化 和 页面渲染优化

减少入口文件体积：

常用的手段是路由懒加载，把不同路由对应的组件分割成不同的代码块，待路由被请求的时候会单独打包路由，使得入口文件变小，加载速度大大增加

UI框架按需加载

合并、压缩文件；按需加载代码，减少冗余代码

使用 Defer 加载 JS

尽量将 CSS 放文件头部，JS 文件放在底部，以免堵塞渲染。JS 如果放在头部，给 script 标签加上 defer 属性，异步下载，延迟执行。

静态资源使用（CDN）

解决用户与服务器物理距离对响应时间的影响，在多个位置部署服务器，让用户离服务器更近，从而缩短请求时间。

资源缓存

不重复加载相同的资源，

图片资源的压缩

图片资源虽然不在编码过程中，但它却是对页面性能影响最大的因素 对于所有的图片资源，我们可以进行适当的压缩 对页面上使用到的icon，可以使用在线字体图标，或者雪碧图，将众多小图标合并到同一张图上，用以减轻http请求压力