Hi! 我是小小,今天是本周的第一篇,本篇将会详细的介绍关于JavaScript的性能优化方面的知识。

为什么要关注性能

性能是创建网页和应用的一个重要方面

性能是创建网页或者应用程序的一个重要方面,如果性能相当的不好,会导致用户等待加载的时间过长。根据统计,47%的用户不希望网站3秒内还不能加载,如果加载超过了3秒,那么40%的用户就会离开。

当代用户对应用的提要要求提高了

几年前等待一个网页的时间是七秒,现在如果页面白屏大于2秒,将会由大多数的人离开,所以对应用的性能要求提高了。

应用的性能瓶颈在js上

三大框架什么的,这些都极度的依赖JavaScript,所以JavaScript的性能尤其显的重要,所以需要对JavaScript进行相关的性能优化。

如何提升JavaScript性能

性能影响体验,体验终将会成就产品,现在跟随者我们,一同对每一行代码进行检查,对代码进行检验,优化JavaScript的相关代码。

删除未曾使用的JavaScript代码

这是最简单的方式,使用这个方法可以减少JavaScript文件的大小,并缩短文件的传输时间,也可以减少页面的解析时间。需要删除如下的代码。
1. 未使用的功能代码和相关的代码
2. 多余的依赖库
3. 泛滥的npm包
4. 公共的模板文件,例如copy过来的一些公共方法,没有相关的引用关系就可以删除掉。

数组和对象操作避免使用构造函数

不推荐使用如下的写法

testArr = () => {
    let arr = new Array()
    arr[0] = '大叔'
    arr[1] = '二叔'
    arr[2] = '随便是什么都行'
    ……
    return arr
}
testObj = () => {
    let obj = new Object()
    obj.name = '大叔'
    obj.age = 18
    obj.sex = '男'
    return obj
}

推荐使用如下的写法

testArr = () => {
    let arr = ['大叔', '二叔', '随便是什么都行']
    return arr
}
testObj = () => {
    let obj = {
        name: '大叔',
        age: 18,
        sex: '男'
    }
    return obj
}

尽量避免全局变量

test = () => {
    var imgs = document.getElementByTagName("img");
    for(var i = 0, len = imgs.length; i < len; i++) {
        imgs[i].title = document.title + " image " + i;
    }
}

推荐写法

test = () => {
    var doc = document;
    var imgs = doc.getElementByTagName("img");
    for(var i = 0, len = imgs.length; i < len; i++) {
        imgs[i].title = doc.title + " image " + i;
    }
}

缓存机制

缓存是提高应用性能的一个常规手段,缓存的方式也有很多,比如说浏览器缓存,数据库缓存等等,

这里我们只谈js的缓存

比如说cookie localStorage sessionStorage

访问本地的数据很显然比远程数据要快快很多

哪些内容适合缓存?

1、实时性要求不严格的内容

2、经常访问但改动不频繁的内容

循环的活动进行减少

例如下方代码,不推荐

test = () => {
    var i
    var arr = [1, 2, 3, 4, 5, 6, 7, 8]
    for (i = 0, i < arr.length; i++) {
        return i
    }
}

推荐改成下方代码

test = () => {
        var i
        var arr = [1, 2, 3, 4, 5, 6, 7, 8]
        var l = arr.length
        for (i = 0, i < l; i++) {
            return i
        }
    }

不必要的变量减少

test = () => {
    let a = 1, b = 2
    return a + b
}

推荐改成如下所示:

test = () => {
    return 1 + 2
}

并不是代码越少性能依好

优化的时候,需要记住一点,并不是代码量越少,优化的性能就越好。

最小化语句数

JavaScript代码中,语句的数量也会影响执行操作的速度。完成多个操作的语句要比完成单个操作语句速度要快。
所以要进行合适的整合。
例如下面的例子,不推荐

test = () => {
    var a = 1
    var b = 2
    var c = 3
    return a + b + c
}

推荐改成下方代码

test = () => {
    var a = 1,
    b = 2,
    c = 3
    return a + b + c
}

原生方法更快

原生的方法一般都比较快,因为是C/C++语言直接写出来的,所以速度上会更快。

尽量避免使用闭包

闭包有三大特性,函数嵌套函数,函数内部可以引用外部的参数和变量,参数和变量不会被垃圾回收机制回收。闭包可以长期的保存在内存中,避免全局变量的污染,但是使用闭包会增长内存的使用量,同时也会造成内存的泄露。

那些人需要关注性能优化

程序猿~

关于作者

我是小小,双鱼座的程序猿,我们下去再见~bye