前端性能优化

1、页面优化

减少http请求：减少资源的体积,用webpack进行js、css、iamge文件压缩;减少资源的访问次数，雪碧图、合并代码、缓存机制；懒加载（图片懒加载，上滑加载更多），当dom进入视线内再进行请求；虚拟滚动，当列表数据过大时，分页加载的话，数据在不断的累加，用虚拟滚动做优化，原理： 无论我们如何滚动，我们可视区域的大小其实是不变的，那么要做到性能最大化就需要尽量少地渲染 DOM 元素，而这个最小值也就是可视范围内需要展示的内容，也就是只做可视区域之内的元素渲染。css放在 head,JS放在Body最下面加载/cdn的方式加载；对DOM查询进行缓存频繁DOM *** 作，合并到一起插入DOM结构

2、代码优化

函数的封装防抖、节流

// 防抖 debounce
// 实例：监听一个输入框，文字变化后触发change事件
// 防抖：用户输入结束或者暂停时，才会触发change事件
// 输入一个字符后，触发事件 定义一个定时器，500毫秒之后执行，紧接着输入2， 此时timer有值，清空，再定义一个定时器，紧着输入3后，
// 此时timer有值，清空，再定义一个定时器, 此时暂停了，没有再输入，5毫秒之后进行了打印
let timer = null
input1.addEventListener('keyup',()=>{
    if(timer) {
        clearTimeout(timer)
    }
    timer = setTimeout(()=>{
        // 触发change事件
        console.log(input1.value)
        // 清空定时器
        timer = null
    }, 500)
})


// 节流： 频繁输入
// 实例：拖拽一个元素时，要随时拿到该元素被拖拽的位置
// 每隔500毫秒 了后才执行某个 *** 作
// 拖拽第一次时，创建一个定时器，100毫秒后执行，再次拖拽时，此时timer存在，直接return不做任何反应，当100毫秒后直接执行，某个 *** 作，
// 并把timer置空，再次拖拽时，此时timer是k空的，会创建定时器。。。。
let div1 = docuemnt.getElementById('div1')
let timer = null
div1.addEventListener('drag', function(e) => {
    if(timer) {
        return
    }
    timer = setTimeout(()=>{
        console.log(e.offsetX, e.offsetY)
        timer = null
    }, 500)
})