实用指南：前端性能优化？

目录

一、CDN

二、懒加载

三、回流与重绘

四、节流与防抖

1. 对节流与防抖的理解

五、图片优化

六、Webpack优化

1. 如何提⾼webpack的打包速度?

2. 如何减少 Webpack 打包体积

3. 如何⽤webpack来优化前端性能？

4. 如何提⾼webpack的构建速度？

七、Vue 优化

---

一、CDN

• 使用第三方的CDN服务：若是想要开源一些任务，可以使用第三方的CDN服务
• 启用CDN进行静态资源的缓存：通过将自己网站的静态资源放在CDN上，比如js、css、图片等。能够将整个项目放在CDN上，完成一键部署。
• 直播传送：主动推送的方式来进行就是直播本质上是使用流媒体进行传送，CDN也是支持流媒体传送的，故而直播完全许可利用CDN来提高访问速度。CDN在处理流媒体的时候与处理普通静态文件有所不同，普通材料要是在边缘节点没有找到的话，就会去上一层接着寻找，但是流媒体本身数据量就非常大，如果使用回源的方式，必然会带来性能疑问，所以流媒体一般采用的都

二、懒加载

图片懒加载

三、回流与重绘

回流：位置会发生改变（eg：元素的增加删除）

重绘：位置不会发生改变视觉会变化（eg： 样式变化）

四、节流与防抖

1. 对节流与防抖的理解

• 函数防抖是指在事件被触发 n 秒后再执行回调，如果在这 n 秒内事件又被触发，则重新计时。这可以使用在一些点击请求的事件上，避免因为用户的多次点击向后端发送多次请求。
• 指规定一个单位时间，在这个单位时间内，只能有一次触发事件的回调函数执行，如果在同一个单位时间内某事件被触发多次，只有一次能生效。节流可以运用在 scroll 函数的事件监听上，借助事件节流来降低事件调用的频率。就是函数节流

防抖函数的应用场景：

• 按钮提交场景：防⽌多次提交按钮，只执⾏最后提交的⼀次
• 服务端验证场景：表单验证需要服务端配合，只执⾏⼀段连续的输⼊事件的最后⼀次，还有搜索联想词机制类似⽣存环境请⽤lodash.debounce

节流函数的适⽤场景：

• 拖拽场景：固定时间内只执⾏⼀次，防⽌超⾼频次触发位置变动
• 缩放场景：监控浏览器resize
• 动画场景：避免短时间内多次触发动画引起性能疑问

五、图片优化

1. 小图允许运用雪碧图减少网络请求，或者使用iconfont，或者使用base64内联

2. webp格式替代其他图片格式

3. 图片懒加载

IntersectionObserver是浏览器原生提供的构造函数，经过给每个图片绑定观察者，判断是否图片出现在了视口区域。

六、Webpack优化

1. 如何提⾼webpack的打包速度?

（1）优化 Loader

（2）HappyPack

（3）DllPlugin

（4）代码压缩

2. 如何减少 Webpack 打包体积

（1）按需加载

（2）Scope Hoisting

（3）Tree Shaking

3. 如何⽤webpack来优化前端性能？

• 压缩代码

• 利⽤CDN加速

• Tree Shaking

• Code Splitting

• 提取公共第三⽅库

4. 如何提⾼webpack的构建速度？

1. 多⼊⼝情况下，使⽤ CommonsChunkPlugin 来提取公共代码

2. 利用 externals 配置来提取常⽤库

3. 绝对不会修改的npm包来进⾏预编译，再通过 DllReferencePlugin 将预编译的模块加载进来。就是利⽤ DllPlugin 和 DllReferencePlugin 预编译资源模块 通过 DllPlugin 来对那些我们引⽤但

4. 使⽤ Happypack 实现多线程加速编译

5. 使⽤ webpack-uglify-parallel 来提升 uglifyPlugin 的压缩速度。 原理上 webpack-uglify-parallel 采⽤了多核并⾏压缩来提升压缩速度

6. 使⽤ Tree-shaking 和 Scope Hoisting 来剔除多余代码

七、Vue 优化

1. 路由懒加载

2. keep-alive 缓存组件

3. v-for的key值使用唯一id

4. 对于vue2中不需要的响应式素材，通过Object.freeze冻结，不让vue递归绑定响应式数据

5. v-if 和 v-for不要同时应用

还在完善中~~~~