图片优化：计算图片大小
一张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
<link rel="dns-prefetch" href="//yuchengkai.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) } } } setInterval( throttle(() => { console.log(1) }, 500), 1 )
防抖
场景 ：点击一个按钮触发网络请求，我们不希望每次点击都发起网络请求
当用户点击按钮一段时间后没有再次点击的情况才去发起网络请求，对于这种情况我们就可以使用防抖。
预加载：有些资源不需要马上用到，希望尽早获取
预加载其实是声明式的 fetch ，强制浏览器请求资源，并且不会阻塞 onload 事件，可以使用以下代码开启预加载
<link rel="preload" href="http://example.com">
预加载可以一定程度上降低首屏的加载时间，因为可以将一些不影响首屏但重要的文件延后加载，唯一缺点就是兼容性不好。
预渲染： 可以通过预渲染将下载的文件预先在后台渲染
<link rel="prerender" href="http://example.com">
预渲染虽然可以提高页面的加载速度，但是要确保该页面大概率会被用户在之后打开，否则就是白白浪费资源去渲染。
懒执行：将某些逻辑延迟到使用时计算-----首屏优化
对于耗时不需要在首屏使用的---------------采用懒执行（一般用定时器或者函数调用执行）
懒加载：将不关键的资源延后加载
原理：是只加载自定义区域
实现图片懒加载：
先设置图片标签的 src 属性为一张占位图，将真实的图片资源放入一个自定义属性中，当进入自定义区域时，就将自定义属性替换为 src 属性，这样图片就会去下载资源，实现了图片懒加载。
CDN
原理：尽可能在各个地方分布机房缓存数据
这样即使我们服务器在国外，国内用户也可以通过国内机房迅速加载资源
将静态资源尽量使用 CDN 加载，
由于浏览器对于单个域名有并发请求上限，可以考虑使用多个 CDN 域名。
并且对于 CDN 加载静态资源需要注意 CDN 域名要与主站不同，否则每次请求都会带上主站的 Cookie，平白消耗流量。
