[TOC] ## CDN的优化 * **使用第三方的CDN服务：** 如果想要开源一些项目，可以使用第三方的CDN服务 * **使用CDN进行静态资源的缓存：** 将自己网站的静态资源放在CDN上，比如js、css、图片等。可以将整个项目放在CDN上，完成一键部署。 * **直播传送：** 直播本质上是使用流媒体进行传送，CDN也是支持流媒体传送的，所以直播完全可以使用CDN来提高访问速度。CDN在处理流媒体的时候与处理普通静态文件有所不同，普通文件如果在边缘节点没有找到的话，就会去上一层接着寻找，但是流媒体本身数据量就非常大，如果使用回源的方式，必然会带来性能问题，所以流媒体一般采用的都是主动推送的方式来进行。 ## 懒加载 ### 懒加载的概念 * 懒加载也叫做延迟加载、按需加载，指的是在长网页中延迟加载图片数据，是一种较好的网页性能优化的方式。在比较长的网页或应用中，如果图片很多，所有的图片都被加载出来，而用户只能看到可视窗口的那一部分图片数据，这样就浪费了性能。 * 如果使用图片的懒加载就可以解决以上问题。在滚动屏幕之前，可视化区域之外的图片不会进行加载，在滚动屏幕时才加载。这样使得网页的加载速度更快，减少了服务器的负载。懒加载适用于图片较多，页面列表较长（长列表）的场景中。 ### 懒加载与预加载的区别 这两种方式都是提高网页性能的方式，两者主要区别是一个是提前加载，一个是迟缓甚至不加载。懒加载对服务器前端有一定的缓解压力作用，预加载则会增加服务器前端压力。 * **懒加载也叫延迟加载，指的是在长网页中延迟加载图片的时机，当用户需要访问时，再去加载**，这样可以提高网站的首屏加载速度，提升用户的体验，并且可以减少服务器的压力。它适用于图片很多，页面很长的电商网站的场景。懒加载的实现原理是，将页面上的图片的 src 属性设置为空字符串，将图片的真实路径保存在一个自定义属性中，当页面滚动的时候，进行判断，如果图片进入页面可视区域内，则从自定义属性中取出真实路径赋值给图片的 src 属性，以此来实现图片的延迟加载。 * **预加载指的是将所需的资源提前请求加载到本地，这样后面在需要用到时就直接从缓存取资源。**通过预加载能够减少用户的等待时间，提高用户的体验。我了解的预加载的最常用的方式是使用 js 中的 image 对象，通过为 image 对象来设置 scr 属性，来实现图片的预加载。 ## 回流与重绘 ### 减少回流与重绘的措施： * 操作DOM时，尽量在低层级的DOM节点进行操作 * 不要使用`table`布局， 一个小的改动可能会使整个`table`进行重新布局 * 使用CSS的表达式 * 不要频繁操作元素的样式，对于静态页面，可以修改类名，而不是样式。 * 使用absolute或者fixed，使元素脱离文档流，这样他们发生变化就不会影响其他元素 * 避免频繁操作DOM，可以创建一个文档片段`documentFragment`，在它上面应用所有DOM操作，最后再把它添加到文档中 * 将元素先设置`display: none`，操作结束后再把它显示出来。因为在display属性为none的元素上进行的 ### 如何优化动画？ 对于如何优化动画，我们知道，一般情况下，动画需要频繁的操作DOM，就就会导致页面的性能问题，我们可以将动画的`position`属性设置为`absolute`或者`fixed`，将动画脱离文档流，这样他的回流就不会影响到页面了。 ## 节流与防抖 ### 对节流与防抖的理解 * 函数防抖是指在事件被触发 n 秒后再执行回调，如果在这 n 秒内事件又被触发，则重新计时。这可以使用在一些点击请求的事件上，避免因为用户的多次点击向后端发送多次请求。 * 函数节流是指规定一个单位时间，在这个单位时间内，只能有一次触发事件的回调函数执行，如果在同一个单位时间内某事件被触发多次，只有一次能生效。节流可以使用在 scroll 函数的事件监听上，通过事件节流来降低事件调用的频率。 **防抖函数的应用场景：** * 按钮提交场景：防⽌多次提交按钮，只执⾏最后提交的⼀次 * 服务端验证场景：表单验证需要服务端配合，只执⾏⼀段连续的输⼊事件的最后⼀次，还有搜索联想词功能类似⽣存环境请⽤lodash.debounce **节流函数的****适⽤场景：** * 拖拽场景：固定时间内只执⾏⼀次，防⽌超⾼频次触发位置变动 * 缩放场景：监控浏览器resize * 动画场景：避免短时间内多次触发动画引起性能问题 ## 图片优化 ### 如何对项目中的图片进行优化？ 1. 不用图片。很多时候会使用到很多修饰类图片，其实这类修饰图片完全可以用 CSS 去代替。 2. 对于移动端来说，屏幕宽度就那么点，完全没有必要去加载原图浪费带宽。一般图片都用 CDN 加载，可以计算出适配屏幕的宽度，然后去请求相应裁剪好的图片。 3. 小图使用 base64 格式 4. 将多个图标文件整合到一张图片中（雪碧图） 5. 选择正确的图片格式： * 对于能够显示 WebP 格式的浏览器尽量使用 WebP 格式。因为 WebP 格式具有更好的图像数据压缩算法，能带来更小的图片体积，而且拥有肉眼识别无差异的图像质量，缺点就是兼容性并不好 * 小图使用 PNG，其实对于大部分图标这类图片，完全可以使用 SVG 代替 * 照片使用 JPEG ## Webpack优化 ### 如何提⾼**webpack**的打包速度**?** #### 优化 Loader * 对于 Loader 来说，影响打包效率首当其冲必属 Babel 了。因为 Babel 会将代码转为字符串生成 AST，然后对 AST 继续进行转变最后再生成新的代码，项目越大，**转换代码越多，效率就越低**。当然了，这是可以优化的。 * 代码压缩 * 按需加载 ### .如何⽤**webpack**来优化前端性能？ ⽤webpack优化前端性能是指优化webpack的输出结果，让打包的最终结果在浏览器运⾏快速⾼效。 * **压缩代码** ：删除多余的代码、注释、简化代码的写法等等⽅式。可以利⽤webpack的 UglifyJsPlugin 和 ParallelUglifyPlugin 来压缩JS⽂件， 利⽤ cssnano （css-loader?minimize）来压缩css * 利⽤CDN加速: 在构建过程中，将引⽤的静态资源路径修改为CDN上对应的路径。可以利⽤webpack对于 output 参数和各loader的 publicPath 参数来修改资源路径 * **Tree Shaking** : 将代码中永远不会⾛到的⽚段删除掉。可以通过在启动webpack时追加参数 \--optimize-minimize 来实现 * **Code Splitting:** 将代码按路由维度或者组件分块(chunk),这样做到按需加载,同时可以充分利⽤浏览器缓存 * **提取公共第三⽅库** : SplitChunksPlugin插件来进⾏公共模块抽取,利⽤浏览器缓存可以⻓期缓存这些⽆需频繁变动的公共代码 ### 其他：如何提⾼**webpack**的构建速度？ 1. 多⼊⼝情况下，使⽤ CommonsChunkPlugin 来提取公共代码 2. 通过 externals 配置来提取常⽤库 3. 利⽤ DllPlugin 和 DllReferencePlugin 预编译资源模块 通过 DllPlugin 来对那些我们引⽤但是绝对不会修改的npm包来进⾏预编译，再通过 DllReferencePlugin 将预编译的模块加载进来。 4. 使⽤ Happypack 实现多线程加速编译 5. 使⽤ webpack-uglify-parallel 来提升 uglifyPlugin 的压缩速度。 原理上 webpack-uglify-parallel 采⽤了多核并⾏压缩来提升压缩速度 6. 使⽤ Tree-shaking 和 Scope Hoisting 来剔除多余代码