性能优化

图片优化：计算图片大小

一张100*100像素的图片，有10000个像素点（每个像素点用RGBA存储）---每个像素点有4个通道，每个通道1个字节（8位=1字节），图片大小39kb（10000*1*4/1024）

我们通过减少每个像素点的调色板--------压缩图片大小

减少像素点                                                                                                                         减少每个像素点能够显示的颜色 

图片加载优化

1.不用图片                  修饰图片用css代替

2.移动端               屏幕小，没必要加载原图浪费带宽，一般使用CDN加载

3.小图      使用base64格式

4.雪碧图

5.正确的图片格式      对于能够显示 WebP 格式的浏览器尽量使用 WebP 格式                                                    小图使用 PNG，其实对于大部分图标这类图片                                                                    照片使用 JPEG

DNS预解析：DNS解析也是需要时间的，通过预解析方式预先获得域名对应IP

节流

场景：  滚动事件发起网络请求——我们不希望滚动中一直发请求，而是隔一段时间发一次

// 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)                                                                                                    }                                                                                                                                         }                                                                                                                                      }                                                                                                                                  setInterval(                                                                                                                                          throttle(() => {                                                                                                                                  console.log(1)                                                                                                                 }, 500),                                                                                                                                  1                                                                                                                              ) 

防抖

场景 ：点击一个按钮触发网络请求，我们不希望每次点击都发起网络请求

当用户点击按钮一段时间后没有再次点击的情况才去发起网络请求，对于这种情况我们就可以使用防抖。

预加载：有些资源不需要马上用到，希望尽早获取

预加载其实是声明式的 fetch ，强制浏览器请求资源，并且不会阻塞 onload 事件，可以使用以下代码开启预加载

预加载可以一定程度上降低首屏的加载时间，因为可以将一些不影响首屏但重要的文件延后加载，唯一缺点就是兼容性不好。

预渲染： 可以通过预渲染将下载的文件预先在后台渲染

预渲染虽然可以提高页面的加载速度，但是要确保该页面大概率会被用户在之后打开，否则就是白白浪费资源去渲染。

懒执行：将某些逻辑延迟到使用时计算-----首屏优化

对于耗时不需要在首屏使用的---------------采用懒执行（一般用定时器或者函数调用执行）

懒加载：将不关键的资源延后加载

原理：是只加载自定义区域

实现图片懒加载：

先设置图片标签的 src 属性为一张占位图，将真实的图片资源放入一个自定义属性中，当进入自定义区域时，就将自定义属性替换为 src 属性，这样图片就会去下载资源，实现了图片懒加载。

CDN

原理：尽可能在各个地方分布机房缓存数据

这样即使我们服务器在国外，国内用户也可以通过国内机房迅速加载资源

将静态资源尽量使用 CDN 加载，

由于浏览器对于单个域名有并发请求上限，可以考虑使用多个 CDN 域名。

并且对于 CDN 加载静态资源需要注意 CDN 域名要与主站不同，否则每次请求都会带上主站的 Cookie，平白消耗流量。