【前端性能】前端性能优化方法总结

在这里插入图片描述

关于前端性能指标和测量方法可以看这篇：【前端性能】前端性能指标和测量方法总结

前端性能优化

可以从网络请求方向和页面渲染方向进行优化：

在网络请求方面有使用HTTP缓存、使用本地储存、HTTP请求优化、DNS预解析和使用CDN。

HTTP缓存有强缓存和协商缓存，它可以将资源缓存在浏览器端，强缓存是在过期时间内都不需要向服务器发起请求，协商缓存只像服务器端发起询问缓存是否更新的请求，不更新的话也是直接使用浏览器端缓存的资源。
具体字段可见这篇文：HTTP系列之HTTP缓存 —— 强缓存和协商缓存

有Cookie、WebStorage(localStorage、sessionStorage)、IndexedDB等方式，可以将一些数据保存在前端，不需要和后端进行交互。

升级为 HTTP2.0/3.0，请求并发量增大，数据传输速度提升，进而减小 HTTP 请求时间。
HTTP 版本详细内容见这篇文：HTTP系列之HTTP版本 1.0 1.1 2.0 3.0 主要特性对比

dns-prefetch 尝试在请求资源之前解析域名。这可能是后面要加载的文件，也可能是用户尝试打开的链接目标。

<link rel="dns-prefetch" href="https://fonts.googleapis.com/" />

dns-prefetch 仅对跨源域上的 DNS 查找有效，因此请避免使用它来指向你的站点或域。这是因为，到浏览器看到提示时，你的站点背后的 IP 已经被解析了。

CDN (Content Delivery Network)，CDN 服务器通常分布在全球各地，当用户访问网站时，CDN 会将网站的内容缓存到离用户最近的服务器上，从而减少了数据传输的距离和时间，提高了加载速度。

渲染的主要是 HTML、CSS、JS、图片等静态资源。围绕减少资源个数和体积进行优化。

合并多个 JS 脚本文件，压缩 JS。
首屏渲染暂不需要且体积大的脚本可进行按需加载（通过 script 动态创建加载）。
位置放底部，让 JS 不阻塞 HTML 和 CSS 的解析。
async defer 模式加载。一般当我们的脚本与 DOM 元素和其它脚本之间的依赖关系不强时，我们会选用 async；当脚本依赖于 DOM 元素时，我们会选用 defer。(合理选择 script 加载模式，可以有效地提升性能) 具体可见这篇: JS 的异步加载方法: async、defer、动态加载
大数据计算，可使用 Web Worker 开启独立于主线程的并行计算

webpack 相关内容可看这篇：【前端工程化】Webpack介绍

构建结果分析：借助插件 webpack-bundle-analyzer 我们可以直观的看到打包结果中，文件的体积大小、各模块依赖关系、文件是够重复等问题，极大的方便我们在进行项目优化的时候，进行问题诊断。
压缩CSS：optimize-css-assets-webpack-plugin
压缩JS：在生成环境下打包默认会开启 js 压缩，但是当我们手动配置 optimization 选项之后，就不再默认对 js 进行压缩，需要我们手动去配置。
清除无用的CSS：purgecss-webpack-plugin 会单独提取 CSS 并清除用不到的 CSS。
Tree-shaking: 剔除没有使用的代码，以降低包的体积。
Code Splitting: 将代码按路由维度或者组件分块(chunk), 这样做到按需加载,同时可以充分利用浏览器缓存。