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

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

前端性能优化

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

网络方向

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

HTTP缓存

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

本地储存

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

HTTP升级

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

DNS预解析

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

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

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

使用CDN

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

渲染方向

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

HTML

• 压缩精简 HTML。
• 懒加载：先加载可视区，剩下的延迟加载。
• 减少重拍重绘：减少DOM操作，对DOM操作统一管理，例如REACT使用的虚拟DOM。

CSS

• 合并多个 CSS 样式文件，压缩 CSS。
• 按需加载样式。
• 位置放在里，尽早进行样式解析，构建 CSSOM 树。
• 减少重排重绘，例如修改样式不一条条修改，可以设置 class 一次性修改。

JS

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

图片

• 小图标使用 web font 字体代替
• 小体积图片使用 base64 编码
• 阴影、简单动画图效可用 CSS3 代替
• 图片懒加载/预加载

Webpack优化

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), 这样做到按需加载,同时可以充分利用浏览器缓存。