专栏名称: 前端JavaScript
分享 | 学习 | 交流 | 原创 分享是学习的开始;学习不必要从头开始,是从现在开始;交流能沟通你我,提高你的学识;期待你的加入!!! web前端技术交流,JavaScript,HTML5,CSS3……
目录
相关文章推荐
51好读  ›  专栏  ›  前端JavaScript

[S3-E403]高性能JavaScript阅读简记(一)

前端JavaScript  · 公众号  · Javascript  · 2017-08-17 07:22

正文

请到「今天看啥」查看全文



loadScript("./file1.js", function () {

loadScript("./file2.js", function () {

loadScript("./file3.js", function () {

//do something

})

})

})

再比如YUI3,比如lazyload.js,比如lab.js。


二、Data Acess 数据访问

数据存储在哪里,关系到代码运行期间数据被检索到的速度。JavaScript中有四种基本的数据存储位置:Literal values(直接量)、Variables(变量)、Array items(数组项)、Object members(对象成员)。对于直接量和局部变量的访问性能差异微不足道,性能消耗代价高一些的是全局变量、数组项、对象成员。


Managing Scope 管理作用

先了解一下 作用域 的原理

每一个JavaScript函数都是一个对象,也可以叫函数实例,函数对象和其他对象一样,拥有编程可以访问的属性和不能被程序访问,仅供JavaScript引擎使用的内部属性,一种有一个叫[[Scope]]的属性。[[Scope]]中包含函数作用域中对象的集合(作用域链),它表示当前函数环境中可访问的数据,以链式的形式存在。当一个函数被创建后,作用域链中被放入可访问的对象。例如:


function add (a,b) {

var result = a + b;

return result;

}

此时作用域链中被推入一个可变的全局对象(随便取个名叫“房间A”),代表了所有全局范围中的变量,包含window、document、navigator等的访问接口。

在函数运行期间,函数内部会建立一个内部对象,称为运行期上下文。这个对象定义了函数运行时的环境,每次函数运行,这个上下文都是独一的,多次调用函数就会多次创建运行期上下文对象,函数执行完毕,这个上下文对象会被销毁。这个上下文环境也有自己的作用域链,用来解析标识符(理解为寻找变量),当一个运行期上下文被创建时,它的作用域链被初始化,函数本身的[[Scope]]属性中的对象,按照原来的顺序被复制到运行期上下文的作用域链中。此时运行期上下文会创建一个新的对象,名叫“激活对象(取名叫“房间B”)”,“房间B”中存储了所有的局部变量、命名参数、参数集合和this的接口。然后“房间B”被推入到作用域链的前端。在刚刚所说的可变全局对象(“房间A”)的前面。


函数过程中,每遇到一个变量,标识符识别过程都要决定从哪里获得或者存储数据。它会搜索运行期上下文的作用域链,查找同名的标识符,搜索工作从作用域链的前端开始查找,也就是刚才的“房间B”那里查找,如果找到了,就是用对应的变量值,如果没找到就进入“房间A”进行查找,如果找到,就用对应的值,没有找到就认为这个标识符是未定义的("undefined");

在之前的add函数运行过程中,result/a/b三个变量的查找实际上都进行了上述的搜索过程,因此产生性能问题。当一个标识符所处位置越深,读写速度就越慢,所以函数中局部变量的访问速度是最快的,全局变量通常很慢,因为全局变量总是处于作用域链最后一个位置,前面的房间都找过了,没找到,才会过来他这里找。因此,就有了优化性能的办法:


用局部变量存储本地范围之外的变量值(如果这个变量值被多次使用)

比如:


function foo() {

var a = document.getElementById("a"),

b = document.getElementsByTagName("div");

}

这时候document被查找了两次,而且每次都要先找“房间B”,再找“房间A”才能找到,这时候就可以用一个局部变量暂存document:


function foo() {

var doc = document,

a   = doc.getElementById("a"),

b   = doc.getElementsByTagName("div");

}

减少使用动态作用域(Dynamic Scopes)

with()

with可以临时改变函数的作用域链,在某些特殊场景下,可以加快一些变量的访问。比如一个函数内多次使用document:







请到「今天看啥」查看全文