文章目录
前端性能优化如何识别页面加载速度慢的原因性能优化的方式提高资源的请求速度http缓存 --提升二次访问的响应速度CDN缓存静态资源缓存webpack的hash策略-文件资源缓存减少资源请求量图片懒加载代码构建优化webpack资源压缩tree sharking -js代码的精简分包按需加载浏览器渲染优化web workerGPU加速前端性能优化
如何识别页面加载速度慢的原因
方式1:lighthouse
浏览器开发者工具lighthouse插件，该插件会对当前的页面进行性能分析，并提出详细的文档和建议，解释为什么是这个分数，最后指出页面存在的问题，为进一步改进给出方案
总阻塞时间:阻塞主线程并影响页面可用性的时间，比如异步任务过长导致阻塞主线程渲染(JS线程和渲染线程冲突)
方式2：window的performance 对象
通过window.performance对象可以获取到当前页面与性能相关的信息
方式3：在控制台中的load显示首屏加载的时间
性能优化的方式
从两个维度进行优化
提高资源的请求速度减少资源请求量浏览器渲染的优化
提高资源的请求速度
http缓存 --提升二次访问的响应速度
笔记
CDN缓存静态资源缓存
笔记
CDN内容分发网络缓存静态资源，在多个位置部署服务器。用户访问时，CDN根据网络情况、负载情况等将会用请求导向到最近的服务器，提升响应速度
webpack的hash策略-文件资源缓存
文件名[hash]一般结合浏览器缓存使用的,相当于资源名称后面加版本名
hash:修改其中一个文件后，每一次重新构建webpack打包，都会生成一个新的hash值，所有资源都共用这个hash值，即使没有修改的文件hash值也会变chunkhash:根据chunk生成的hash值。如果打包来源与同一个chunk，那么哈希值一样。（chunk:从入口开始该入口的依赖，一个入口对应一个chunk）
使用场景: 我们把一些公共库和程序入口文件区分开来，单独打包构建，接着可以采用 chunkhash 方式来生成 hash 值，那么只要我们不改动公共库的代码，就可以保证其 hash 值不受影响，这样也起到缓存的作用。contenthash:根据文件内容生成hash值
减少资源请求量
图片懒加载
笔记
代码构建优化
webpack资源压缩
js:去掉无效代码、去掉日志输出代码、缩短变量名等优化uglifyjs-webpack-plugin插件，默认是集成在生产模式中，如果需要更多自定义也可以对该插件进行配置
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");/*include要被处理的文件exclude不被处理的文件chunkFilter 判断哪些chunk可以被压缩，返回值为true的辉被压缩，false则不会被压缩*/module.exports = {optimization: {minimizer: [new UglifyJsPlugin({chunkFilter: (chunk) => {// `vendor` 块不压缩if (chunk.name === "vendor") {return false;}return true;},}),],},};
css:删除无效代码，css语义合并
css-minimizer-webpack-plugin插件
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");module.exports = {// ...optimization: {minimizer: [new CssMinimizerPlugin(),],},};
html
html-webpack-plugin插件除了帮助我们简化HTML文件的创建，也可以压缩HTML文件
module.exports = {plugins: [new HtmlWebpackPlugin()],};
图片压缩 loader
url-loader:css内联图片小于尺寸图片转为base64编码
module: {rules: [{test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,loader: 'url-loader',options: {limit: 10, // 小于10KB图片，转base64编码}}]}
file-loader + image-webpack-loader: import/require到.js或.html中require(图片路径)的图
rules: [{test: /\.png$/i, // 以png为例use: ['file-loader',{loader: 'image-webpack-loader',options: {pngquant: {quality: [0.65, 0.90] // 设置png的品质区间},}},],}]
tree sharking -js代码的精简
基于ES6的静态模块结构，删除无用代码
实现原理
1.收集模块导出变量记录到模块依赖关系图中
2.遍历关系图标记(启动标记:optimization:usedExports)模块导出变量中没有被使用的
3.生成产物时，如果没有被使用的就删除对应的导出语句。
4.进行tree sharking，删除不可能被执行的代码（DeadCode）
分包按需加载
import()引入的路由，路由懒加载
浏览器渲染优化
web worker
渲染线程和JS引擎是互斥的，所以对于一些计算密集型或高延迟的任务可能会阻塞页面的渲染
Web Worker 为 JavaScript 创造多线程环境，允许主线程创建 Worker 线程，将一些任务分配给后者运行。在主线程运行的同时，Worker 线程在后台运行，两者互不干扰。
GPU加速
当页面有一些复杂动画时，动画很卡的时候，可以将动画元素生成独立的图层，强制开启GPU加速，跳过布局和绘制阶段，新建图层交给GPU渲染。
GPU加速的本质是减少浏览器渲染页面每一帧过程中的回流和重绘。
开启GPU加速的方法
transformopacitywill-change
