主页

前言

前段时间零零散散看了下《高性能JavaScript》这本书,虽然书的年代有一些比较久远,但其中依然有许多的方法是值得我们借鉴的。

加载和运行

浏览器对页面的解析是从上到下,当解析到script标签时,整个页面的更新都会受到停滞,并且需要等待script内的脚本下载和解析完成才能继续更新下面的UI界面,也就意味着这段的等待时间将会使页面出现短暂的空白。对于这个问题,有如下的解决方法。

1、改变script标签的位置
将所有script标签放置在页面的底部,紧靠 body 关闭标签< /body >的上方。此法可以保证页面在脚本运行之前完成界面的解析。
2、合并JavaScript
将脚本成组打包。页面的< script>标签越少,页面的加载速度就越快,响应也更加迅速。不论外部脚本文件还是内联代码都是如此。
3、压缩JavaScript代码
对JavaScript代码进行压缩可以减少加载JavaScript代码的负担,比如代码中的注释、长串的变量、空格等。当然这些工作不需要我们手动去做,有一些专门的压缩工具可供使用。

数据访问

在 JavaScript 中,数据存储位置可以对代码整体性能产生重要影响。有四种数据访问类型:直接量,变量,数组项,对象成员。它们有不同的性能考虑。

1、使用直接量
所谓直接量就是以字面的意思声明数组或对象。
例如:

// 声明一个数组
let arr = [1,2,3]
// 声明一个对象
let obj = {key:"value"}

所以更加建议使用此种方法来创建数组和对象,但随着浏览器解析性能的优化,这种方法对性能的提升的差异是微不足道的。

2、尽可能使用局部变量
在JavaScript中,对变量的使用是采用就近原则的,当你引用一个变量的时候,JavaScript会在当前作用域查找此变量的声明位置,若没找到就会再往下一级作用域查找,一层一层往外翻,直到找到为止。

因此局部变量比域外变量快,因为它位于作用域链的第一个对象中。变量在作用域链中的位置越深,访问所需的时间就越长。全局变量总是最慢的,因为它们总是位于作用域链的最后一环。

如果你必须要引用一个全局变量,那么最好就是用一个局部变量来保存此数据,那么下面再次需要访问这个全局变量的时候,我们就只需要引用那个局部变量就可以了,这样我们就可以减少对全局变量的查找次数。

3、减少对象成员的嵌套
一个属性或方法在原形链中的位置越深,访问它的速度就越慢,因为当你需要使用一个属性或方法的时候需要一层一层的查找,嵌套对象成员会造成重大性能影响,尽量少用。

4、减少对象成员的读取次数
每一次对对象成员的读取都会带来一些性能负担,因此我们要尽可能的减少读取对象成员的次数。

// 判断元素的类名
function hClass(element, className1, className2){ 
    return element.className == className1 || element.className == className2; 
}

以上代码中对element.className的访问进行了两次,很明显,在这个函数过程中它的值是不会改变的,但仍然引起两次对象成员搜索过程。你可以将它的值存入一个局部变量,消除一次搜索过程。修改如下:

// 判断元素的类名
function hClass(element, className1, className2) {
    let currentN = element.className;
    return currentN == className1 || currentN == className2;
}

此重写后的版本中成员搜索只进行了一次。既然两次对象搜索都在读属性值,所以有理由只读一次并将值存入局部变量中。局部变量的访问速度要快得多。当在一个多次的循环中使用此方法将会大大的提高代码的运行性能。

JavaScript

版权属于:Asnull
作品采用:本作品采用 知识共享署名-相同方式共享 4.0 国际许可协议 进行许可。
0
查看目录

目录

来自 《对提高JavaScript性能的一些总结》
评论

博主很懒,啥都没有
43 文章数
2,512 评论量
5 分类数
48 页面数
已在风雨中度过 54年87天16小时45分