浏览器读取选择器，遵循的原则是从选择器的右边到左边读取。
-
减少嵌套：最多不要超过三层，并且后代选择器的开销较高，慎重使用
-
避免使用通配符，对用到的元素进行匹配即可
-
利用继承，避免重复匹配和定义
-
正确使用类选择器和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 结点的属性值放在一个循环里当成循环里的变量
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
图片的优化
雪碧图
借助减少http请求次数来进行优化
图片懒加载
在图片即将进入可视区域的时候进行加载（判断图片进入可视区域请参考这里）
使用CSS3代替图片
有很多图片使用 CSS 效果（渐变、阴影等）就能画出来，这种情况选择 CSS3 效果更好
图片压缩
压缩方法有两种，一是通过在线网站进行压缩，二是通过 webpack 插件 image-webpack-loader。它是基于 imagemin 这个 Node 库来实现图片压缩的。
使用 webp 格式的图片
webp 是一种新的图片文件格式，它提供了有损压缩和无损压缩两种方式。在相同图片质量下，webp 的体积比 png 和 jpg 更小。
webpack打包优化
缩小loader 匹配范围
-
优化loader配置
-
test、include、exclude三个配置项来缩⼩loader的处理范围
-
推荐include
include: path.resolve(__dirname, "./src"),
复制代码
resolve.modules
resolve.modules用于配置webpack去哪些目录下寻找第三方模块，默认是 node_modules。
寻找第三方，默认是在当前项目目录下的node_modules里面去找，如果没有找到，就会去上一级目录…/node_modules找，再没有会去…/…/node_modules中找，以此类推，和Node.js的模块寻找机制很类似。
如果我们的第三⽅模块都安装在了项⽬根⽬录下，就可以直接指明这个路径。
module.exports={
resolve:{
modules: [path.resolve(__dirname, "./node_modules")]
}
}
resolve.extensions
resolve.extensions在导⼊语句没带⽂件后缀时，webpack会⾃动带上后缀后，去尝试查找⽂件是否存在。
-
后缀尝试列表尽量的⼩
-
导⼊语句尽量的带上后缀。
如果想优化到极致的话，不建议用extensionx, 因为它会消耗一些性能。虽然它可以带来一些便利。
抽离css
借助mini-css-extract-plugin:本插件会将 CSS 提取到单独的文件中，为每个包含 CSS 的 JS 文件创建一个 CSS 文件，并且支持 CSS 和 SourceMaps 的按需加载。。
constMiniCssExtractPlugin = 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: [
newMiniCssExtractPlugin({
filename: "css/[name]_[contenthash:6].css",
chunkFilename: "[id].css"
})
]
复制代码
代码压缩
JS代码压缩
mode:production，使用的是terser-webpack-plugin
module.exports = {
// ...
optimization: {
minimize: true,
minimizer: [
newTerserPlugin({}),
]
}
}
复制代码
CSS代码压缩
css-minimizer-webpack-plugin
module.exports = {
// ...
optimization: {
minimize: true,
minimizer: [
newCssMinimizerPlugin({})
]
}
}
复制代码
Html文件代码压缩
module.exports = {
...
plugin:[
newHtmlwebpackPlugin({
...
minify:{
minifyCSS:false, // 是否压缩css
collapseWhitespace:false, // 是否折叠空格
removeComments:true// 是否移除注释
}
})
]
}
复制代码
设置了minify，实际会使用另一个插件html-minifier-terser
文件大小压缩
对文件的大小进行压缩，减少http传输过程中宽带的损耗
npm install compression-webpack-plugin -D
复制代码
newComepressionPlugin({
test:/.(css|js)$/, // 哪些文件需要压缩
threshold:500, // 设置文件多大开始压缩
minRatio:0.7, // 至少压缩的比例
algorithm:"gzip", // 采用的压缩算法
})
复制代码
图片压缩
一般来说在打包之后，一些图片文件的大小是远远要比 js 或者 css 文件要来的大，所以图片压缩较为重要
配置方法如下：
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：跳过整个模块/文件，直接查看该文件是否有副作用
两种不同的配置方案， 有不同的效果
usedExports
配置方法也很简单，只需要将usedExports设为true
module.exports = {
...
optimization:{
usedExports
}
}
复制代码
使用之后，没被用上的代码在webpack打包中会加入unused harmony export mul注释，用来告知 Terser 在优化时，可以删除掉这段代码
sideEffects
sideEffects用于告知webpack compiler哪些模块时有副作用，配置方法是在package.json中设置sideEffects属性
如果sideEffects设置为false，就是告知webpack可以安全的删除未用到的exports
如果有些文件需要保留，可以设置为数组的形式
最后
技术是没有终点的，也是学不完的，最重要的是活着、不秃。零基础入门的时候看书还是看视频，我觉得成年人，何必做选择题呢，两个都要。喜欢看书就看书，喜欢看视频就看视频。最重要的是在自学的过程中，一定不要眼高手低，要实战，把学到的技术投入到项目当中，解决问题，之后进一步锤炼自己的技术。
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
技术学到手后，就要开始准备面试了，找工作的时候一定要好好准备简历，毕竟简历是找工作的敲门砖，还有就是要多做面试题，复习巩固。
json中设置sideEffects属性
如果sideEffects设置为false，就是告知webpack可以安全的删除未用到的exports
如果有些文件需要保留，可以设置为数组的形式
最后
技术是没有终点的，也是学不完的，最重要的是活着、不秃。零基础入门的时候看书还是看视频，我觉得成年人，何必做选择题呢，两个都要。喜欢看书就看书，喜欢看视频就看视频。最重要的是在自学的过程中，一定不要眼高手低，要实战，把学到的技术投入到项目当中，解决问题，之后进一步锤炼自己的技术。
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
技术学到手后，就要开始准备面试了，找工作的时候一定要好好准备简历，毕竟简历是找工作的敲门砖，还有就是要多做面试题，复习巩固。
[外链图片转存中…(img-iYbxyb4l-1714509429247)]
21万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
