前端面试-SPA 首屏加载速度慢怎么解决？

July 28, 2022

什么是首屏加载

首屏时间（First Contentful Paint），指的是浏览器从响应用户输入网址地址，

到首屏内容渲染完成的时间，此时整个网页不一定要全部渲染完成，但需要展示当前视窗需要的内容

通过 DOMContentLoad 或者 performance 来计算出首屏时间

// 方案一：
document.addEventListener('DOMContentLoaded', (event) => {
    console.log('first contentful painting');
});
// 方案二：
performance.getEntriesByName("first-contentful-paint")[0].startTime

// performance.getEntriesByName("first-contentful-paint")[0]
// 会返回一个 PerformancePaintTiming的实例，结构如下：
{
  name: "first-contentful-paint",
  entryType: "paint",
  startTime: 507.80000002123415,
  duration: 0,
};

javascript

加载慢的原因

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

1.网络延时问题

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

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

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

解决方案

1.减少入口文件体积常用的手段是路由懒加载，只有在解析路由时才会加载组件

const routes = [
{
   path: 'blogs',
   name: 'blogsName',
   component: () => import('./components/BlogsName.js')
}

javascript

2.静态资源本地缓存

后端返回资源： 采用 HTTP 缓存

前端合理利用：localStorage

CDN 静态资源缓存 react, react-dom, react-router-dom, axios 3.UI 框架按需加载

在日常使用的 UI 框架，例如 element-UI, antd, 我们要按需引入

import { Button } from ‘antd’

javascript

4.避免组件重复打包

假如 A.js 文件是一个常用的库，现在有多个路由使用 A.js 文件，这样就造成重复下载

解决方案：在 webpack 的 config 文件中，修改 CommonsChunkPlugin 的配置 minChunks:2，

minChunks 为 2 会把使用 2 次及以上的包抽离出来，放进公共依赖文件中避免了重复加载组件。

5.图片资源压缩

图片资源虽然不在编码过程中，但它却是对页面性能影响最大的因素

对于所有的图片资源，我们可以进行适当的压缩

对于页面上使用的 icon，可以使用在线字体图标，或者雪碧图，将众多的小图标合并到一张图中，用以减轻 http 请求的压力

6.开启 GZip 压缩

拆完包后，我们再用 gzip 做一下压缩，安装 compression-webpack-plugin

cnmp i compression-webpack-plugin -D

javascript

webpack 中配置安装

const CompressionWebpackPlugin = require('compression-webpack-plugin')
const productGzipExtensions = ['js', 'css']
// 配置compression-webpack-plugin压缩
new CompressionWebpackPlugin({
	algorithm: 'gzip',
	test: 'new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$')',
	threshold: 10240,
	minRation: 0.8
})

javascript

7.使用 SSR

SSR（Server side ），也就是服务端渲染，组件或页面通过服务器生成 html 字符串，再发送到浏览器

从头搭建一个服务端渲染是很复杂的，vue 应用建议使用 Nuxt.js 实现服务端渲染

← 返回插件实验室