实用指南：前端性能优化？
目录
一、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内联
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的构建速度？
多⼊⼝情况下，使⽤ CommonsChunkPlugin 来提取公共代码
利用 externals 配置来提取常⽤库
绝对不会修改的npm包来进⾏预编译，再通过 DllReferencePlugin 将预编译的模块加载进来。就是利⽤ DllPlugin 和 DllReferencePlugin 预编译资源模块 通过 DllPlugin 来对那些我们引⽤但
使⽤ Happypack 实现多线程加速编译
使⽤ webpack-uglify-parallel 来提升 uglifyPlugin 的压缩速度。 原理上 webpack-uglify-parallel 采⽤了多核并⾏压缩来提升压缩速度
使⽤ Tree-shaking 和 Scope Hoisting 来剔除多余代码
七、Vue 优化
1. 路由懒加载
4. 对于vue2中不需要的响应式素材，通过Object.freeze冻结，不让vue递归绑定响应式数据
还在完善中~~~~