前言
前端优化大概可以有以下几个方向：
- 网络优化
- 页面渲染优化
JS优化- 图片优化
webpack打包优化React优化Vue优化
网络优化
DNS预解析
link标签的rel属性设置dns-prefetch，提前获取域名对应的IP地址
使用缓存
减轻服务端压力，快速得到数据（如强缓存协商缓存等）
使用 CDN（内容分发网络）
用户与服务器的物理距离对响应时间也有影响。
内容分发网络（CDN）是一组分散在不同地理位置的 web 服务器，用来给用户更高效地发送内容。典型地，选择用来发送内容的服务器是基于网络距离的衡量标准的。例如：选跳数（hop）最少的或者响应时间最快的服务器。
压缩响应
压缩组件通过减少 HTTP 请求产生的响应包的大小，从而降低传输时间的方式来提高性能。从 HTTP1.1 开始，Web 客户端可以通过 HTTP 请求中的 Accept-Encoding 头来标识对压缩的支持（这个请求头会列出一系列的压缩方法）
如果 Web 服务器看到请求中的这个头，就会使用客户端列出的方法中的一种来压缩响应。Web 服务器通过响应中的 Content-Encoding 头来告知 Web 客户端使用哪种方法进行的压缩
目前许多网站通常会压缩 HTML 文档，脚本和样式表的压缩也是值得的（包括 XML 和 JSON 在内的任何文本响应理论上都值得被压缩）。但是，图片和 PDF 文件不应该被压缩，因为它们本来已经被压缩了。
使用多个域名
Chrome 等现代化浏览器，都会有同域名限制并发下载数的情况，不同的浏览器及版本都不一样，使用不同的域名可以最大化下载线程，但注意保持在 2~4 个域名内，以避免 DNS 查询损耗。
避免图片src为空
虽然 src 属性为空字符串，但浏览器仍然会向服务器发起一个 HTTP 请求：
IE 向页面所在的目录发送请求； Safari、Chrome、Firefox 向页面本身发送请求； Opera 不执行任何操作。
页面渲染优化
避免css阻塞
css影响renderTree的构建，会阻塞页面的渲染，因此应该尽早（将 CSS 放在 head 标签里）和尽快（启用 CDN 实现静态资源加载速度的优化)的将css资源加载
降低css选择器的复杂度
浏览器读取选择器，遵循的原则是从选择器的右边到左边读取。
- 减少嵌套：最多不要超过三层，并且后代选择器的开销较高，慎重使用
- 避免使用通配符，对用到的元素进行匹配即可
- 利用继承，避免重复匹配和定义
- 正确使用类选择器和id选择器
避免使用CSS 表达式
css 表达式会被频繁地计算。
避免js阻塞
js可以修改CSSOM和DOM，因此js会阻塞页面的解析和渲染，并且会等待css资源的加载。也就是说js会抢走渲染引擎的控制权。所以我们需要给js资源添加defer或者async，延迟js脚本的执行。
使用外链式的js和css
在现实环境中使用外部文件通常会产生较快的页面，因为 JavaScript 和 CSS 有机会被浏览器缓存起来。对于内联的情况，由于 HTML 文档通常不会被配置为可以进行缓存的，所以每次请求 HTML 文档都要下载 JavaScript 和 CSS。所以，如果 JavaScript 和 CSS 在外部文件中，浏览器可以缓存它们，HTML 文档的大小会被减少而不必增加 HTTP 请求数量。
使用字体图标 iconfont 代替图片图标
- 图片会增加网络请求次数，从而拖慢页面加载时间
- iconfont可以很好的缩放并且不会添加额外的请求
首屏加载优化
- 使用骨架屏或者动画优化用户体验
- 资源按需加载，首页不需要的资源延迟加载
减少重绘和回流
增加多个节点使用documentFragment：不是真实dom的部分，不会引起重绘和回流
用 translate 代替 top ，因为 top 会触发回流，但是translate不会。所以translate会比top节省了一个layout的时间
使用
visibility替换display: none，因为前者只会引起重绘，后者会引发回流（改变了布局）；opacity代替visiability，visiability会触发重绘（paint），但opacity不会。把 DOM 离线后修改，比如：先把 DOM 给
display:none(有一次 Reflow)，然后你修改 100 次，然后再把它显示出来不要把 DOM 结点的属性值放在一个循环里当成循环里的变量
javascript复制代码for (let i = 0; i < 1000; i++) {
// 获取 offsetTop 会导致回流，因为需要去获取正确的值
console.log(document.querySelector('.test').style.offsetTop)
}尽量少用table布局，table布局的话，每次有单元格布局改变，都会进行整个tabel回流重绘；
最好别频繁去操作DOM节点，最好把需要操作的样式，提前写成class，之后需要修改。只需要修改一次，需要修改的时候，直接修改className，做成一次性更新多条css DOM属性，一次回流重绘总比多次回流重绘要付出的成本低得多；
动画实现的速度的选择，动画速度越快，回流次数越多，也可以选择使用
requestAnimationFrame每次访问DOM的偏移量属性的时候，例如获取一个元素的scrollTop、scrollLeft、scrollWidth、offsetTop、offsetLeft、offsetWidth、offsetHeight之类的属性，浏览器为了保证值的正确也会回流取得最新的值，所以如果你要多次操作，最取完做个缓存。更加不要for循环中访问DOM偏移量属性，而且使用的时候，最好定义一个变量，把要需要的值赋值进去，进行值缓存，把回流重绘的次数减少；
将频繁运行的动画变为图层，图层能够阻止该节点回流影响别的元素。比如对于
video标签，浏览器会自动将该节点变为图层。
JS中的性能优化
使用事件委托
防抖和节流
尽量不要使用JS动画
css3动画和canvas动画都比JS动画性能好
多线程
复杂的计算开启webWorker进行计算，避免页面假死
计算结果缓存
减少运算次数，比如vue中的computed、react中的useMemo
图片的优化
雪碧图
借助减少http请求次数来进行优化
图片懒加载
在图片即将进入可视区域的时候进行加载
使用CSS3代替图片
有很多图片使用 CSS 效果（渐变、阴影等）就能画出来，这种情况选择 CSS3 效果更好
图片压缩
压缩方法有两种，一是通过在线网站进行压缩，二是通过 webpack 插件 image-webpack-loader
使用渐进式jpeg
使用渐进式jpeg，会提高用户体验 参考文章
使用 webp 格式的图片
webp 是一种新的图片文件格式，它提供了有损压缩和无损压缩两种方式。在相同图片质量下，webp 的体积比 png 和 jpg 更小。
webpack打包优化
抽离css
借助mini-css-extract-plugin：本插件会将 CSS 提取到单独的文件中，为每个包含 CSS 的 JS 文件创建一个 CSS 文件，并且支持 CSS 和 SourceMaps 的按需加载。
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
{
test: /\.less$/,
use: [
// "style-loader", // 不再需要style-loader，⽤MiniCssExtractPlugin.loader代替
MiniCssExtractPlugin.loader,
"css-loader", // 编译css
"postcss-loader",
"less-loader" // 编译less
]
},
plugins: [
new MiniCssExtractPlugin({
filename: "css/[name]_[contenthash:6].css",
chunkFilename: "[id].css"
})
]
代码压缩
JS代码压缩：
mode:production，使用的是terser-webpack-pluginmodule.exports = {
// ...
optimization: {
minimize: true,
minimizer: [
new TerserPlugin({}),
]
}
}CSS代码压缩：
css-minimizer-webpack-pluginmodule.exports = {
// ...
optimization: {
minimize: true,
minimizer: [
new CssMinimizerPlugin({})
]
}
}HTML代码压缩：设置了
minify，实际会使用另一个插件html-minifier-tersermodule.exports = {
...
plugin:[
new HtmlwebpackPlugin({
...
minify:{
minifyCSS:false, // 是否压缩css
collapseWhitespace:false, // 是否折叠空格
removeComments:true // 是否移除注释
}
})
]
}文件大小压缩：对文件的大小进行压缩，减少
http传输过程中宽带的损耗new ComepressionPlugin({
test:/.(css|js)$/, // 哪些文件需要压缩
threshold:500, // 设置文件多大开始压缩
minRatio:0.7, // 至少压缩的比例
algorithm:"gzip", // 采用的压缩算法
})图片压缩
module: {
rules: [
{
test: /.(png|jpg|gif)$/,
use: [
{
loader: 'file-loader',
options: {
name: '[name]_[hash].[ext]',
outputPath: 'images/',
}
},
{
loader: 'image-webpack-loader',
options: {
// 压缩 jpeg 的配置
mozjpeg: {
progressive: true,
quality: 65
},
// 使用 imagemin**-optipng 压缩 png，enable: false 为关闭
optipng: {
enabled: false,
},
// 使用 imagemin-pngquant 压缩 png
pngquant: {
quality: '65-90',
speed: 4
},
// 压缩 gif 的配置
gifsicle: {
interlaced: false,
},
// 开启 webp，会把 jpg 和 png 图片压缩为 webp 格式
webp: {
quality: 75
}
}
}
]
},
]
}
Tree shaking 去除死代码
Tree Shaking 是一个术语，在计算机中表示消除死代码，依赖于ES Module的静态语法分析（不执行任何的代码，可以明确知道模块的依赖关系）
在webpack实现Tree shaking有两种不同的方案：
- usedExports：通过标记某些函数是否被使用，之后通过Terser来进行优化的
- sideEffects：跳过整个模块/文件，直接查看该文件是否有副作用
css也可以进行tree shaking优化：安装PurgeCss插件
减少ES6转化ES5的冗余
Babel 插件会在将 ES6 代码转换成 ES5 代码时会注入一些辅助函数。在默认情况下， Babel 会在每个输出文件中内嵌这些依赖的辅助函数代码，如果多个源代码文件都依赖这些辅助函数，那么这些辅助函数的代码将会出现很多次，造成代码冗余。为了不让这些辅助函数的代码重复出现，可以在依赖它们时通过 require('babel-runtime/helpers/createClass') 的方式导入，这样就能做到只让它们出现一次。babel-plugin-transform-runtime 插件就是用来实现这个作用的，将相关辅助函数进行替换成导入语句，从而减小 babel 编译出来的代码的文件大小。
代码分离
将代码分离到不同的bundle中，之后我们可以按需加载，或者并行加载这些文件
默认情况下，所有的JavaScript代码（业务代码、第三方依赖、暂时没有用到的模块）在首页全部都加载，就会影响首页的加载速度
代码分离可以分出更小的bundle，以及控制资源加载优先级，提供代码的加载性能
可以通过splitChunksPlugin来实现，该插件webpack已经默认安装和集成，只需要配置即可
VUE
- v-for添加key
- 路由懒加载
- 第三方插件按需引入
- 合理使用computed和watch
- v-for的同时避免使用v-if
- destory时销毁事件：比如addEventListener添加的事件、setTimeout、setInterval、bus.$on绑定的监听事件等
React
- map循环展示添加key
- 路由懒加载
- 第三方插件按需引入
- 使用scu，memo或者pureComponent避免不必要的渲染
- 合理使用useMemo、memo、useCallback