前端学习笔记之常见性能优化

一、浏览器上：

1. 减少Http请求：当打开网页时会有多方面请求数据（图片，外部css、js等）
2. 浏览器查询缓存，cdn缓存，后端缓存：图片之类的可以上传到cdn上，这样用户在访问的时候会拿到最近的服务器上的图片，加快访问速度。
3. 预加载：preload
4. 预渲染： prerender
5. 异步加载（async/await 、 defer）

二、组件（元素）上：

        1、懒加载：lazyload

        2、预渲染：prerender

三、功能上：

1. 防抖：一般用即时搜索或防止点击会频繁发送请求

const debounce = (func, wait = 500) => {

    let timer = 0; // 定时器

    reutrn function(...args){

        if(itmer) clearTimeout(timer)

        timer = setTimeout(() => {

            func.apply(this, args)

            },wait)

        }

    }

1. 节流：一般用途在购物点击之类频繁操作的功能上

//  func为用户传入需要的函数

const throttle = (func, wait = 1000) => {

let lastTime = 0;

return function(...args){

    let nowTime = new Date();

    if(nowTime - lastTime > wait){

        lastTime =nowTime

        func.apply(this, args)

       }

}

setInterval(

throttle(() => {

console.log(1)

},1000),1000)

1. 懒加载：只加载可视区内容
2. 懒执行：用于首屏优化（把复杂的逻辑处理延迟计算，一般可通过定时器唤醒
                            上述内容web和移动端都适用