该知识点属于性能优化领域，性能优化这个领域的很多内容都很**碎片化**。 ## 图片优化 ### 计算图片大小 （100像素*100像素）=》（10000像素点）每个像素的值是RGBA存储的话，每个像素点有4个通道，每个通道1个字节（8位 = 1个自己）==》（10000*4/1024）39kb 实际项目中，一直图片可能并不需要使用那么多颜色去显示，我们可以通过**减少每个像素的调色板来相应缩小图片大小**。 优化图片 1. 减少像素点 2. 减少每个像素点能够显示的颜色 ### 图片加载优化 1. 不用图片，修饰类图片可以用css代替 2. 移动端，屏幕宽度小，没必要去加载原图浪费带宽。一般图片都用CDN加载，可以计算出适配屏幕的宽度，然后去请求相应裁剪好的图片。 3. 小图使用base64格式 4. 将多个图标文件整合到一张图片中（雪碧图） 5. 选择正确的图片格式 * 对于能够显示WebP格式的浏览器尽量使用WebP格式。（WebP格式具有更好的图像数据压缩算法，能够带来更小的图片体积，肉眼识别无差异的图像质量，兼容性不好） * 小图使用PNG，对于大部分图片这类图片，完全可以使用SVG替代 * 照片使用JPEG ## DNS预解析 DNS解析也是需要时间的，可以通过预解析的方式来**预先获得域名所对于的IP** ~~~ <link rel="dns-prefetch" href="//yunchengkai.cn" > ~~~ ## **节流** 滚动事件中会发起网络请求，但是我们并不希望用户在滚动过程中一直发起请求，而是隔一段时间发起一次，对于这种情况就可以使用节流。 ~~~ // func是用户传入需要防抖的函数 //wait是等待时间 const throttle = (func, wait= 50)=>{ //上一次执行该函数的时间 let lastTime = 0; return function(...args){ let now = + new Date(); //将当前时间和上一次执行函数的时间对比， //如果差值大于设置的等待时间就执行函数 if(now - lastTime> wait){ lastTime = now; func.apply(this, args); } } } setTnterval( throttle(()=>{ console.log(1); }, 500), 1 ) ~~~ ## **防抖** 有一个按钮会点击处罚网络请求，但是我们并不希望每次点击都发起网络请求，而是用户点击按钮一段时间后没有再次点击的情况才去发起网络请求，使用防抖 ~~~ //func 是用户传入需要防抖的函数 // wait是等待时间 const debounce = (func, wait = 50)=>{ //缓存一个定时器id let timer = 0; //这里返回的函数是每次用户时间调用的防抖函数 // 如果已经设定过定时器了就清空上一次的定时器 // 开始一个新的定时器，延迟执行用户传入的方法 return function(...args){ if(timer) clearTimeout(timer); timer = setTimeout(()=>{ func.apply(this, args) },wait) } } ~~~ ## 预加载 有些资源不需要马上用到，但是希望尽早获取，这时候可以使用预加载 **预加载其实是声明式的fetch**，强制浏览器请求资源，并且**不会阻塞onload事件**，可以使用以下代码开启预加载 ~~~ <link rel ="preload" href="http://example.com" > ~~~ 预加载可以一定程度上**降低首屏的加载时间**，因为可以将一些不影响首屏但重要的文件**延后加载**，唯一缺点就是**兼容性不好**。 ## 预渲染 通过预渲染将下载的文件预先在后台渲染，开启 ~~~ <link rel ="prerender" href="http://example.com" > ~~~ 预渲染虽然可以提高页面的加载速度，但是要确保该页面大概率会被用后在之后打开，否则就是白白浪费资源去渲染 ## 懒执行 懒执行就是将某些逻辑延迟到使用时再计算，该技术可以用于首屏优化，对于某些耗时逻辑并不需要在首屏就使用的，可以使用懒执行，懒执行需要唤醒，一般可以通过**定时器或者事件的调用来唤醒**。 ## 懒加载 懒加载就是将不关键的资源**延后加载**。 懒加载的原理就是**只加载自定义区域**（通常是可视区域，但也可以是即将进入可视区域）内需要加载东西。 图片：先设置图片标签的src属性为一张占位图，将真实的图片资源放入一个自定义属性中，**当进入自定义区域时，就将自定义属性替换为src属性**。这样图片就会去下载资源，实现了图片懒加载 别的资源：如进入可视区域开始播放视频 ## CDN CDN的原理是尽可能的在各个地方分布机房缓存数据，这样即使我们的根服务器远在国外，在国内的用户也可以通过国内的机房迅速加载资源。 我们可以**将静态资源尽量使用 CDN 加载**，由于浏览器对于单个域名有**并发请求上限**，可以考虑**使用多个 CDN 域名**。并且对于 CDN 加载静态资源需要注意 **CDN 域名要与主站不同**，否则每次请求都会带上主站的 Cookie，平白消耗流量。 ## 总结 出现性能问题是简单高效的提高性能（节流、防抖重要）