`
zhangyaochun
  • 浏览: 2609003 次
  • 性别: Icon_minigender_1
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

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
1
0
分享到:
评论

相关推荐

    js-protobuf-encode-decode-master.zip

    JavaScript中的Protobuf(Protocol Buffers)编码与解码是一个重要的数据序列化技术,它允许开发者在不同的编程语言之间高效地交换结构化数据。本项目"js-protobuf-encode-decode-master.zip"提供了一个在线工具,...

    crypto-js加密解密资源包(含所有前台加密的js代码)

    本资源包“crypto-js加密解密资源包(含所有前台加密的js代码)”正是为了解决这一问题而设计的,它提供了一系列JavaScript实现的加密算法,适用于那些无法访问Google服务,无法轻易获取此类库的开发者。 首先,...

    sheetjs js-xlsx

    3. **操作数据**:SheetJS 提供了一系列API,可以对数据进行增删改查操作,如添加行、删除行、修改单元格内容、合并单元格等。 4. **自定义样式**:库允许用户定义单元格的样式,如字体、颜色、背景、边框等,使...

    esdk-obs-browserjs-es5-3.19.9_javascrip_

    本文将深入探讨如何使用JavaScript SDK(esdk-obs-browserjs-es5-3.19.9.js)来与华为云OBS进行交互。 首先,了解JavaScript SDK是至关重要的。它是一个轻量级的库,为开发者提供了在浏览器环境中操作OBS的API接口...

    Node.js-node-crypto-api提供一个API来消费来自多个加密货币市场的数据

    Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境,它让开发者能够在服务器端使用 JavaScript 进行编程。在 Node.js 的生态中,有许多丰富的库和模块,其中 `node-crypto-api` 是一个专门用于处理加密货币...

    TIB-JS-studiocomm-6.2.0-windows64位

    在64位Windows环境下运行Jaspersoft Studio,可以充分利用系统的内存资源,处理大数据集时性能更优。64位系统能够分配超过4GB的内存给应用程序,这对于处理复杂报表和大型数据集至关重要。此外,对于处理多线程任务...

    javascript-in-one-pic

    首先,这张图可能包含JavaScript的基础语法部分,如变量声明(var、let、const)、数据类型(原始类型和引用类型)、运算符(算术、比较、逻辑、赋值等)以及流程控制语句(条件语句、循环语句)。 其次,函数是...

    javascript经典特效---IP地址的显示(说明).rar

    在JavaScript编程领域中,IP地址的显示是一种常见的需求,特别是在网络应用或者数据分析的场景下。这个"javascript经典特效---IP地址的显示(说明).rar"压缩包文件可能包含了一个详细的示例或教程,用于教导如何在...

    arcgis-js-v427-api.zip

    这个API包含了地图渲染、图层管理、地理编码、空间分析、数据可视化等一系列GIS功能。 2. **版本4.27特性** - **性能提升**:4.27版本在性能方面进行了优化,加载速度更快,用户体验更流畅。 - **增强的地图操作*...

    高性能JavaScript.pdf

    - **高效的数据读写策略**:如何优化JavaScript中的数据访问方式以提高应用性能。 - **数据结构选择**:根据应用场景选择合适的数据结构来提升数据访问效率。 **技术细节:** - 数据访问的性能直接影响到应用的整体...

    js实时修改table数据

    在JavaScript编程中,实时修改表格(Table)数据是一项常见的需求,特别是在动态网页应用中。这里我们将深入探讨如何使用JavaScript,结合Ajax和JSON技术,来实现这一功能。 首先,我们需要了解HTML表格的基本结构...

    管理系统系列--基于and-design-vue的vue后台管理系统模板.zip

    【标题】"管理系统系列--基于and-design-vue的vue后台管理系统模板"是一个针对开发者设计的前端项目模板,它利用了流行的Vue.js框架以及and-design-vue库,为开发高效、美观的后台管理系统提供了基础框架。...

    PyPI 官网下载 | django-js-variable-injector-1.0.2.tar.gz

    总结来说,`django-js-variable-injector`是Django开发者的一个实用工具,它方便了服务器端数据与前端JavaScript的交互,提高了开发效率。正确地理解和使用这个库,可以帮助你更好地构建基于Django的Web应用,实现...

    crypto-js-develop

    " crypto-js-develop "是一个专注于前端加密的JavaScript库,它提供了丰富的加密算法,使得开发者能够在浏览器环境中安全地处理敏感数据。这个库是基于"CryptoJS"的,CryptoJS是一个广泛使用的开源项目,它提供了...

    Node.js-mongo-express-基于Web的MongoDB管理界面采用Node.js和express开发

    标题中的“Node.js-mongo-express-基于Web的MongoDB管理界面采用Node.js和express开发”揭示了我们讨论的主题:一个使用Node.js和Express框架构建的MongoDB Web管理界面,名为“mongo-express”。这个工具提供了图形...

    extjs-basex.js

    BaseX是一个高性能、XML数据库系统,常用于处理XML数据。在JavaScript环境中,BaseX的JavaScript接口允许开发者在Web应用中直接与BaseX服务器进行交互。 在深入讲解这个文件之前,让我们先了解一下ExtJS和BaseX的...

    electron.js数据库应用---导航菜单(element-ui+mysql)

    Electron通过将浏览器环境与Node.js的运行时环境相结合,使得开发者可以访问到操作系统级别的功能,同时还能利用丰富的Node.js生态系统。 其次,`Element-UI`是一个基于Vue.js的组件库,它提供了一系列美观且易于...

    Object-Oriented JavaScript

    - **闭包**:一个函数与其相关的引用环境组合在一起形成闭包,允许函数访问其外部作用域中的变量。 #### 知识点四:面向对象编程的具体实现方式 - **构造函数**:通过构造函数可以定义类,并使用`new`关键字实例化...

Global site tag (gtag.js) - Google Analytics