作者:明霞学 | 来源:互联网 | 2020-09-05 13:13
作为一名前端工程师,对于Javascript大家都不陌生,这篇文章从更深层次的方向——JS引擎去理解Javascript到底是怎么运行的,从而进行优化。
JS Code—— Talk is cheap
看到这,你肯定会想,我知道这有啥用,Talk is cheap,有没有代码可以分析的。 那么大家请看以下示例代码,通过分析代码后,我再详细介绍其中的原理
示例代码一:
// first case
var a = {}
var b = {}
console.time()
for (let k = 0; k <9999999; k++) {
a[k] = 0
}
for (let i = 0; i <9999999; i++) {
b[i] = 0
}
console.timeEnd()
// second case
var a = {}
var b = {}
console.time()
for (let k = 0; k <9999999; k++) {
a[k] = 0
}
for (let i = 10000000; i <19999999; i++) {
b[i] = 0
}
console.timeEnd()
// third case
var a = {}
var b = {}
console.time()
for (let k = 0; k <9999999; k++) {
a[k] = 0
}
for (let i = 9999999; i <0; i--) {
b[i] = 0
}
console.timeEnd()
看完以上代码,内容很简单,就是定义object a和b 然后不断添加属性,唯一区别的是,first case是a和b重复添加相同的属性,second case是a和b添加不同的属性,third case是a和b重复添加相同的属性,但是处理b的时候是相反顺序的。
那么问题来了:三块代码,运行速度有没有快慢之分,分别又大不大呢? (不用去确认循环次数,都是一样滴!)
答案来了:用时时间大概是 3 (500ms)<1 (1000ms) <2 (2000ms),几乎就是2倍的速度差了。
V8 Engine —— Hidden Class
我们知道,js是动态脚本语言,什么意思呢,就是你可以很简单的给object添加/删除属性,或者改变其类型,大部分的js解释器(interpreter)使用字典结构,在内存中存储变量属性值的地址,这种方式比起java和C#(非动态语言,当然了C#的dynamic类型另当别论,不在此赘述)要低效率的多,因为js的类型是可以随时转换的,本来使用字典结构结合固定的类型进行判断,可以较容易的找到变量属性值的位置,而在js中就难以实现了。
所以V8引擎就使用了一种高效率的方法叫Hidden Class。其他的引擎也有类似的方法,有叫Map的, Structures的,Hidden Class的等等,在这里我们用Shape来定义它,这样方便大家理解。
当我们定义一个object的时候,它会包含以下内容:
通过以上的原理解释,相信大家肯定能够推算解释出,我们的示例代码的执行速度的区别了。
First Case:
1. Shape (empty) for a和b
2. Shape 1....9999999 for a
3. Shape 1....9999999 for b
a和b都共用了相同的shape,可以重复使用
Second Case:
1. Shape (empty) for a和b
2. Shape 1....9999999 for a
3. Shape 10000000....19999999 for b
一共定义了 1 到 19999999的shape,那么second case肯定时间要比first case要花多一倍的时间了
Thrid Case:
1. Shape (empty) for a和b
2. Shape 1....9999999 for a
3. Shape 9999999 ....1 for b
源码:https://github.com/likeconan/Alipay_Wechat_Integration
更多Javascript知识请关注PHP中文网js特效大全栏目。
以上就是理解并优化Javascript代码的详细内容,更多请关注 第一PHP社区 其它相关文章!