WEB前端有哪些性能优化
问题
WEB前端有哪些性能优化
总的来说性能优化这个领域的很多内容都很碎⽚化，这⼀章节我们将来学习这 些碎⽚化的内容。
1 图⽚优化
计算图⽚⼤⼩
对于⼀张 100 * 100 像素的图⽚来说，图像上有 10000 个像素点，如果 每个像素的值是 RGBA 存储的话，那么也就是说每个像素有 4 个通道，每 个通道 1 个字节（ 8 位 = 1 个字节），所以该图⽚⼤⼩⼤概为 39KB （ 10000 * 1 * 4 / 1024 ）。
但是在实际项⽬中，⼀张图⽚可能并不需要使⽤那么多颜⾊去显示，我们可以通过减少每 个像素的调⾊板来相应缩⼩图⽚的⼤⼩。
了解了如何计算图⽚⼤⼩的知识，那么对于如何优化图⽚，想必⼤家已经有 2 个思路了：
- 减少像素点
- 减少每个像素点能够显示的颜⾊
2 图⽚加载优化
不⽤图⽚。很多时候会使⽤到很多修饰类图⽚，其实这类修饰图⽚完全可以⽤ CSS 去代 替。
对于移动端来说，屏幕宽度就那么点，完全没有必要去加载原图浪费带宽。⼀般图⽚都⽤ CDN 加载，可以计算出适配屏幕的宽度，然后去请求相应裁剪好的图⽚。
⼩图使⽤ base64 格式
将多个图标⽂件整合到⼀张图⽚中（雪碧图）
选择正确的图⽚格式：
-
对于能够显示 WebP 格式的浏览器尽量使⽤ WebP 格式。因为 WebP 格式具有更好的图像数据压缩算法，能带来更⼩的图⽚体积，⽽且拥有⾁眼识别⽆差异的图像质量，缺点就是兼容性并不好
-
⼩图使⽤ PNG ，其实对于⼤部分图标这类图⽚，完全可以使⽤ SVG 代替
-
照⽚使⽤ JPEG
3 DNS 预解析
DNS 解析也是需要时间的，可以通过预解析的⽅式来预先获得域名所对应的 IP 。
<link rel="dns-prefetch" href="//blog.poetries.top">
4 节流
考虑⼀个场景，滚动事件中会发起⽹络请求，但是我们并不希望⽤户在滚动过 程中⼀直发起请求，⽽是隔⼀段时间发起⼀次，对于这种情况我们就可以使⽤ 节流。
理解了节流的⽤途，我们就来实现下这个函数
// 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
)
5 防抖
考虑⼀个场景，有⼀个按钮点击会触发⽹络请求，但是我们并不希望每次点击 都发起⽹络请求，⽽是当⽤户点击按钮⼀段时间后没有再次点击的情况才去发 起⽹络请求，对于这种情况我们就可以使⽤防抖。
理解了防抖的⽤途，我们就来实现下这个函数
// 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)
}
}
6 预加载
在开发中，可能会遇到这样的情况。有些资源不需要⻢上⽤到，但是希望尽早获取，这时 候就可以使⽤预加载。
预加载其实是声明式的 fetch ，强制浏览器请求资源，并且不会阻塞 onload 事件， 可以使⽤以下代码开启预加载
<link rel="preload" href="http://blog.poetries.top">
预加载可以⼀定程度上降低⾸屏的加载时间，因为可以将⼀些不影响⾸屏但重 要的⽂件延后加载，唯⼀缺点就是兼容性不好。
7 预渲染
可以通过预渲染将下载的⽂件预先在后台渲染，可以使⽤以下代码开启预渲染
<link rel="prerender" href="http://blog.poetries.top">
预渲染虽然可以提⾼⻚⾯的加载速度，但是要确保该⻚⾯⼤概率会被⽤户在之后打开，否则就是⽩⽩浪费资源去渲染。
8 懒执⾏
懒执⾏就是将某些逻辑延迟到使⽤时再计算。该技术可以⽤于⾸屏优化，对于 某些耗时逻辑并不需要在⾸屏就使⽤的，就可以使⽤懒执⾏。懒执⾏需要唤 醒，⼀般可以通过定时器或者事件的调⽤来唤醒。
9 懒加载
懒加载就是将不关键的资源延后加载。
懒加载的原理就是只加载⾃定义区域（通常是可视区域，但也可以是即将进⼊可视区域） 内需要加载的东⻄。对于图⽚来说，先设置图⽚标签的 src 属性为⼀张占位图，将真实 的图⽚资源放⼊⼀个⾃定义属性中，当进⼊⾃定义区域时，就将⾃定义属性替换为 src 属性，这样图⽚就会去下载资源，实现了图⽚懒加载。
懒加载不仅可以⽤于图⽚，也可以使⽤在别的资源上。⽐如进⼊可视区域才开始播放视频 等等。
10 CDN
CDN 的原理是尽可能的在各个地⽅分布机房缓存数据，这样即使我们的根服 务器远在国外，在国内的⽤户也可以通过国内的机房迅速加载资源。
因此，我们可以将静态资源尽量使⽤ CDN 加载，由于浏览器对于单个域名有 并发请求上限，可以考虑使⽤多个 CDN 域名。并且对于 CDN 加载静态资源 需要注意 CDN 域名要与主站不同，否则每次请求都会带上主站的 Cookie ，平⽩消耗流量
更多面试题
如果你想了解更多的前端面试题，可以查看本站的WEB前端面试题 ,这里基本包涵了市场上的所有前端方面的面试题，也有一些大公司的面试图，可以让你面试更加顺利。
| 面试题 | ||
|---|---|---|
| HTML | CSS | JavaScript |
| jQuery | Vue.js | React |
| 算法 | HTTP | Babel |
| BootStrap | Electron | Gulp |
| Node.js | 前端经验相关 | 前端综合 |
| Webpack | 微信小程序 | - |
这些题库还在更新中，如果你有不错的面试题库欢迎分享给我，我整理后放上来；人人为我，我为人人，互帮互助，共同提高，祝大家都拿到心仪的Offer！
