2021年前端性能优化总结(持续更)

最新推荐文章于 2024-08-05 19:45:28 发布

努力的阿花

最新推荐文章于 2024-08-05 19:45:28 发布

阅读量234

点赞数 1

分类专栏： js

本文链接：https://blog.csdn.net/weixin_44005989/article/details/114666062

版权

js 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

1.借助“多线程”进行数据的海量查询，避免页面卡顿

当页面需要进行大量查询或者后端响应时间过长时，为了避免页面卡死以及保证用户体验，这个时候我们可以借助于web worker,实际上他是多进程(浏览器本身的运行机制就是单线程)，示例：

 let worker = new Worker('./worker.js');
    let data ={};
    worker.postMessage({"cmd":"INIT","data":data});
    worker.onmessage = function (event) {
        console.log('Received message ' + event.data);
        if(event.data.cmd=="RES"){
            // 业务逻辑

        }
    }

worker.js

self.addEventListener('message', function (e) {
    var data = e.data;
    console.log(e);
    console.log(data);
    switch (data.cmd) {
        case 'INIT':
            self.postMessage('WORKER STARTED !' );
            param=e.data.data;
            initWorker();// 自定义方法内，可进行大量的XMLHttpRequest请求
            break;
        default:
            self.postMessage('Unknown command: ' + data.msg);
    };
}, false);

这样一来，所有比较耗时的逻辑都放在了worker里,对页面本身并不会有影响，加点逻辑即可，比如woker获取数据后通过postMessage直接发送数据

2.利用一张大图替代无数的小图，并通过css来选取指定的图片

下列展示的是10个按钮，对杨10张图片，实际把它们放到一张图上即可

css 代码,主要通过 background-position-x， background-position-y属性来控制

.cloudBtn-one {
    cursor: pointer;
    width: 25px;
    height: 25px;
    position: absolute;
    background: url(../images/btns/allBtns.png) center no-repeat;
    background-position-y: -1px;
}

.uav-btn-cam {
    background-position-x: -254px !important;
    background-position-y: 105px;
}

3.js防抖与节流

常见的比如滚动条滚动时放一个监听程序和触发逻辑，实际上如果不加以控制，会多次甚至大量执行多余的方法造成内存的浪费。可以写个闭包，如果滚动条滚动时指定个时间，范围之内多次监听到滚动事件执行一次


// 防抖 可能很长时间都不发生
function debounce(fn,delay){
    console.log('debounce');
    let timer = null; //借助闭包
    return function() {
        if(timer){
            clearTimeout(timer)
        }
        timer = setTimeout(fn,delay) // 简化写法
    }
}

// 节流  指定时间内一定发生
function throttle(fn,delay) {
    let open = true;
    return function() {
        if(!open){
            //休息时间 暂不接客
            return false;
        }
        // 工作时间，执行函数并且在间隔期内把状态位设为无效
        open = false;
        setTimeout(() => {
            fn();
            open = true;
        }, delay)
    }
}

// 然后是旧代码
function showTop  () {
    var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
    console.log('滚动条位置：' + scrollTop);
}
window.onscroll = debounce(showTop,1000);  // 或者节流方法throttle(fn,delay)

ps: 节流的意思是，持续长的时间里一直触发滚动事件那么可能因为防抖一直不会执行指定的方法，节流就是指定时间内必须执行一次

4.文件压缩

使用webpack。gulp等打包工具的忽略。这个其实是日常容易被忽略的一部，一般开发人员拿到UI设计师给的图片都直接用，实际上完全可以通过工具来进一步压缩一下，使资源更小，目前很多在线压缩工具，有直接压缩原图片的，还有直接提取出base64格式的（直接百度在线压缩），例外对于原生JS,CSS,都是可以借助于工具压缩的，（去除多余空格，行，重命名，可以自己去看看很多打包工具打包出来的代码，方法名都只有一个字母而已....）

5.利用localstorage缓存经常用到且变动不大的信息

避免不要要的重复请求，很多信息可以缓存再localstorage中，具体的就是，localstaorage.get,和set,方法。需要注意的就是存取都是字符串，需要自己JSON.parse和stringify一下

6.可以的话，用字体图标或SVG代替图片

因为他们与像素无关，无论放大多少仍然是非常高清的，而普通图片会出现像素格，体验不友好

7.Promise作为异步的首选

promise 是es6异步编程的解决方案,状态只会发生一次，任何时候都可以取到它的结果。用过的人都说很香！自行百度

8.使用let 代替var 可以避免很多闭包的问题

比如，for循环动态生成dom并赋予关联参数点击事件，如果是var (for var i =0;i<count;i++){...}，代码块的处理函数，很容易在实际绑定的节点元素都是count值，为了避免这样的情况，需要将方法改为立即执行函数才可。但如果是let 声明完全不会出现这样的问题。原因就在于，var 拥有变量提升的功能，let 只在它的作用域内有效

9.如果存在一个图片资源并不确定是否有效，可以用promise去判断下，否则浏览器请求资源的时间会很长（Image.load方法会快的多）

10.对于容易出错的地方善用try,catch,避免错误使脚本无法完成执行

11.很小的一点：经常用的for循环，可以把数组长度记下，因为每次arr.length都要重新计算一下

12.善用事件委托，避免代码冗余

如监听li(无数个)的点击事件，这个时候完全没有必要一个个写监听事件的代码，完全可以将事件委托到它们的上层ul，只需写一个监听的方法,再利用冒泡和捕获原理进行处理

13.利用es6的Symbol数据类型，避免书写魔法值（自定义枚举值的时候）

14.善用JS闭包

一般如计数器，全局定义一个计数变量，计时方法进行累加，虽然一般我们并不会在除了累加方法之外去改变变量，但其实还是存在危险的，其他地方可以改变值，导致数据并不是很准确。如果用上了闭包，那计数器的显示的计数值就只有计数器才能改变，其他任何地方都改变不了！

let counterIncrease=(function(){ 
let count=0; 
return function(){ return ++count; }
 })(); 
counterIncrease(); 
counterIncrease(); 
// 其他任何地方都改变不了count值，但counterIncrease 返回的函数又在执行，并引用count 
// 内部匿名函数引入外部count变量形成闭包，而counterIncrease是立即执行函数，只执行一次，返回一个函数并执行