日期:2014-05-16  浏览次数:20413 次

js性能研究系列之----数据访问相关

前言

?

本来按照自己的计划是推出的是

?

  1. 常用性能分析工具介绍和使用帮助
  2. 内存泄露相关
  3. js内核介绍优化分析
  4. js解析执行机制
  5. 分段和延迟加载
  6. 。。。。。。。
---------------任务是艰巨的,道路是漫长的,一步一步,认认真真地走下去。切勿浮躁

正文

?? ? ?好了,言归正传,以前记得一个同学说过理解Javascript,就必须弄明白执行环境闭包词法作用域作用域链,标识符解析,预解析等等。。。


1、执行环境
  • 高级编程上曾经说过:
?? ? ? ? ?i、作为拥有变量松散类型的Javascript,决定了它的变量只在特定的时间用于保存特定值
?? ? ? ? ?ii、执行环境定义了变量或者函数有权访问的其他数据,决定了它们各自的行为。每一个执行环境中定义的所有 ? ? ? ? ? ? ? ? ? ? 变量和函数多保存在一个关联的变量对象里面。代码无法访问这个变量对象,但是解析器在处理数据的时候 ? ? ? ? ? ? ? ? ? ? ?会使用它。

?? ? ?这边我以前一直在想一个问题:变量定义了,分配了存储位置,就一定会有读取和写入的效率。那么每一个函数在被调用的时候都会创建自己的执行环境,那么怎样才能提高数据被检索到的速度呢。

  • 高性能上曾经说过:
?? ? ? ? ?--------我们可以把数据存取位置分为下列4种
  1. 直接量----代表自身,不存储在特定的位置。包括字符串、数字、布尔值等等。
  2. 变量----var 出来的。
  3. 数组元素----存储在数组对象内部,以数字作为索引。
  4. 对象成员----存储在对象内部,以字符串作为索引。 ? ? ? ? ? ? ? ? ?
?? ? 相比而言,一个直接量和一个局部变量中存取数据的性能差异是很小的,但是访问数组元素和对象成员就会高一点。当然每一个浏览器的内核(不了解内核,嘻嘻可以看看v8)不一样,所以具体的差别还是针对不一样的浏览器。

?? ? 这边有一个特例:ff3优化了数组项的存取,所以速度得到了优化。

2、作用域

?

?? ? ? ?无论从性能角度去分析还是一般从我们代码的设计去实现某些功能的角度去分析或者说一些方法安全角度去考虑这个“作用域”的问题,多是很有意义的。因为里面涉及到比如变量可以被谁去访问或者this的时候咋去赋值。

?

?? ? ? 作用域链----在代码执行环境中会创建由变量对象构成的。

?

  1. ??用途:保证对执行环境有权访问的所以变量和函数的有序访问
  2. ??内部:a.链的前端是当前执行的代码所在的环境的变量对象 b.下一个变量对象来自外部 c.最末端是全局执行环境 ?下的对象如全局变量、window这样的
function test(val1.val2){
     var total = val1 + val2;      //一般我们不建议将随便两个任意类型的变量做和
     return total;
}

//这样test()作用域链包含两个对象
//1个是自身的包含arguments的变量对象
//1个是全局环境下的变量对象如navigator/document
?

test在执行的时候会创建一个“运行期上下文”的内部对象。多次调用同一个函数会导致创建多个运行期上下文。但是函数执行完毕后它会被销毁。

?

请注意:1.当函数执行的时候,解析到变量的时候,多会需要一次标识符的解析,看看它在哪来获取或存储数据的。

?? ? ? ? ? ? 2.解析标识符的过程其实是在运行期上下文的作用链中进行的,找到即停止,没有找到继续作用域链的下一个对 ? ? ? ? ? ? ? ? ? 象。

?

所以机会提出下列编码优化

?

?

function init(){
   var  target =  document.body, 
          news= document.getElmentById("news"),
          spinbar = document.getElmentById("spins");
    ...........

}
//因为document是全局对象
//优化的重点是将全局对象赋值给局部变量
//下面多是引用
/*var doc = document,
          target = doc.body,
          news = doc.getElementById("news")
            .........

*/

//核心还是对于全局对象最好在函数内部定义局部变量赋值引用
其实如果你研究过jquery源码你会发现在函数内部的局部变量包含document = window.document
userAgent =navigator.userAgent      toString =Object.prototype.toString
还有就是很多人已经发现的jQuery在闭包的参数就是window