一、什么是首屏加载

首屏时间（First Contentful Paint），指的是浏览器从响应用户输入网址地址，到首屏内容渲染完成的时间，此时整个网页不一定要全部渲染完成，但需要展示当前视窗需要的内容

二、怎么获取首屏时间

1. 监听documentContentLoad
2. 使用performance

// 方案一：
document.addEventListener('DOMContentLoaded', (event) => {
    console.log('first contentful painting');
});
// 方案二：
performance.getEntriesByName("first-contentful-paint")[0].startTime
 
// 会返回一个 PerformancePaintTiming的实例，结构如下：
{
  name: "first-contentful-paint",
  entryType: "paint",
  startTime: 507.80000002123415,
  duration: 0,
};

三、加载慢的原因

在页面渲染的过程，导致加载速度慢的因素可能如下：

1.网络延时问题

2. 资源文件体积是否过大

3. 资源是否重复发送请求去加载了

4. 加载脚本的时候，渲染内容堵塞了

四、几种常见的几种SPA首屏优化方式

1.减小入口文件体积： 路由懒加载（如vue-router里的动态加载路由）

2.静态资源本地缓存：

- HTTP缓存机制
- 采用`Service Worker`离线缓存
- 合理使用本地存储localstorage 等

3. UI框架按需加载： import 按需加载，不要加载整个第三方库

4. 图片资源的压缩：可以使用线字体图标，雪碧图等，减轻HTTP的压力

5. 组件重复打包：多个路由使用同一个js文件，会造成多次下载

- 配置webpack：`minChunks`为3表示会把使用3次及以上的包抽离出来，放进公共依赖文件，避免了重复加载组件

6. 开启GZip压缩：配置webpack

7. 使用SSR 服务端渲染技术： 比如vue的nuxt

const CompressionPlugin = require('compression-webpack-plugin')
 
configureWebpack: (config) => {
        if (process.env.NODE_ENV === 'production') {
            // 为生产环境修改配置...
            config.mode = 'production'
            return {
                plugins: [new CompressionPlugin({
                    test: /\.js$|\.html$|\.css/, //匹配文件名
                    threshold: 10240, //对超过10k的数据进行压缩
                    deleteOriginalAssets: false //是否删除原文件
                })]
            }
        }

总结：