当我们常说web性能优化，它到底指的是什么呢？

我们可以思考以下场景：

当你做了一个页面较多，用好几个体积较大的插件时。在每次代码的打包时就会显得非常的慢。

当打开一个网页，需要等待很久才会出来，资源加载和页面渲染的时间太长。

在浏览页面时，做的动画卡一卡的非常影响用户流畅操作体验。

当然还有很多常见的场景，这里就不一一展现了，那么这多地方怎样做到，打包快，资源加载快，页面渲染快、体验流畅呢？

在这里总结了一些方法。

打包快

使用HardSourceWebpackPlugin，利用缓存，减少第二次打包时间

在打包时，一定要过滤不想关的目录

使用多进程打包 相关插件有thread-loader、terser-webpack-plugin和HappyPack，注意，当项目较小时，多进程打包反而会使打包速度变慢。

资源加载快

在传输量上（下载量变小/速度提高）

• 构建时压缩HTML，JS，CSS将它们压缩合并相同格式的文件。
• 在传输上图片一定占据一些资源，可以将图片压缩，或者使用SVG、sprite还有字体图标
• 可以在服务器端开启Gzip，数据在传输之前再次压缩。
• 单页应用路由懒加载，减少首次加载的资源体积
• 组件懒加载，减少首次加载的资源体积
• 图片懒加载，减少首次加载的资源体积

提高server宽带

同时可以将使用外部的cdn来加速传输和减少打包的时间

重复的选择器合并，重复的属性合并

DNS服务的优化

当我们打开搜索栏，会先DNS的查询，可以花钱购买更好的配置的DNS。

http请求优化

实现链接复用（keep-alive）不中断TCP链接复用它。

资源的复用

可以采取HTTP的缓存策略，将一些必要的放在缓存里面，减少二次加载时间

给css/js/img加入http缓存，html永远不缓存

页面渲染快

根据用户习惯，先加载CSS 再加载JS

再Heade里面放入css样式，js放在body最下面

实现懒加载，组件懒加载，图片懒加载。

加载CSS推荐用 link 少用 @import

实现第二页的预加载

体验流畅

尽量使用transition和animation来实现动画，尽量少使用JS来实现动画

动画尽量多用transfrom 和 opacity （无需重绘和回流，性能最好）

减少DOM的增少操作。