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