1.防抖和节流
什么是防抖和节流？
防抖和节流都是为了限制函数执行频率的方法，防止函数触发频率过高导致性能问题。
- 防抖：当事件触发的n毫秒后再执行，如果短时间内连续触发相同事件，那么只有这个事件被触发的最后一次会被执行，只会执行一次，在最后一次触发的段时间后。
需要用到防抖的场景：输入框实时搜索、窗口大小调整、表单校验、登录按钮、发短信按钮等。
原理：定义一个计时器，计时器结束后执行需要防抖的事件，如果计时器还在计时中没结束却再次触发防抖函数的话，则清空计时器重新计时，直到计时器结束执行防抖事件。
const debounce = (fn,time) => {
let timeout = null;
return () => {
if(timeout){
clearTimeout(timeout);
timeout = null;
}
timeout = setTimeout(() => {
fn();
timeout = null;
},time)
}
}
const clickButton1 = debounce(() = > {
console.log('点击按钮1了')
},3000)
- 节流：短时间内事件只会执行一次，在事件执行的n毫秒内不管触发多少次都不会再执行，直到n毫秒后再次触发。
需要用到节流的场景：滚动事件监听、电商抢购按钮。
原理：定义一个计时器，如果计时器没在计时的话则执行需要节流的事件，节流事件执行后开始计时，在执行后的n毫秒内再次触发函数的话则不执行节流事件，直到计时器结束后的再次触发。
const thorttle = (fn,time) => {
let timeout = null;
return () => {
if(!timeout){
fn();
timeout = setTimeout(() => {
timeout = null;
},time)
}
}
}
const clickButton2 = thorttle(() => {
console.log('点击按钮2了')
},3000)
2.图片懒加载
什么是图片懒加载？
指的是延迟加载图片，只加载当前视窗内的图片，可视区域外的图片不会进行加载，只有当屏幕滚动到该图片的范围的时候才加载。
优点：
提高网页加载速度，提升用户体验
原理：
- 将图片地址存储在data-xxx属性上
- 绑定scroll监听事件
- 判断图片是否在可视区域内
- 如果在的话，就设置图片的src
3.图片压缩
将项目中的静态资源图片进行压缩，减少图片的体积，提高加载速度，推荐使用TinyPNG进行压缩，TinyPNG拥有智能压缩功能，通过高级压缩算法，可以在不降低图片质量的前提下，大幅减少文件的大小，不损失画质和观感，压缩率大部分可以达到70%上下。
TinyPNG官网地址：tinypng.com/1
4.base64的使用
将小图标或小图片转为base64格式，减少静态资源或网络请求的使用（推荐20KB以下的小图片转为base64）
5.Vue优化点
- 合理使用watch与computed，减少不必要的性能开销
- 使用路由懒加载，在需要的时候进行加载，避免一次性加载太多路由导致页面阻塞
- 使用Vuex或pinia缓存数据
- 使用mixins或hooks抽离公共代码
- 使用keep-alive缓存组件，避免组件重复加载
6.Webpack优化点
- 静态资源使用CDN加载，减少服务器压力
- 压缩代码体积
- 使用tree-shaking删除未使用的代码
- 按需加载代码，在使用的时候加载代码
7.网络优化
- 使用HTTP/2
- 使用HTTP缓存，如强缓存和协商缓存
- 使用CDN，将资源分布到各地的服务器上，减少访问延迟
