- 浏览: 2609003 次
- 性别:
- 来自: 北京
文章分类
- 全部博客 (1286)
- js-oop (2)
- js-window (10)
- js-event (19)
- js-string (37)
- js-array (27)
- js-page (4)
- js-dom (62)
- js-lang (8)
- js-number (7)
- js-platform (3)
- js-object (15)
- js-element (3)
- js-browser (7)
- js-url (6)
- js-date (10)
- css基础 (48)
- css优化 (15)
- html基础 (17)
- html标签 (19)
- js基础 (117)
- js-兼容性差异 (33)
- js引擎 (3)
- js性能 (14)
- json (6)
- jQuery源码浅析 (43)
- web mobile开发资料 (78)
- js跨域 (2)
- html5 (74)
- html5-canvas (7)
- css3 (53)
- 浏览器 (5)
- api设计学 (3)
- js-加载 (3)
- linux (37)
- 架构师 (1)
- php (2)
- self开发的脚本库--凤凰 (2)
- web应用名词 (6)
- javascript新特性翻译 (8)
- ajax (6)
- jQuery动画效果 (7)
- prototype的解读 (13)
- 优秀插件翻译 (1)
- css解决方案 (26)
- 数据库 (2)
- english daily (59)
- 浏览器内核探究 (1)
- jQuery插件介绍 (9)
- jquery基础篇 (26)
- chrome浏览器问题整理 (14)
- js选择器那些事 (3)
- 前端框架 (26)
- Firefox私有属性 (11)
- webkit私有属性集合 (17)
- 书籍推荐 (21)
- 数据结构 (1)
- 网站建设相关 (7)
- 好文翻译 (2)
- 个人作品 (3)
- kissy的解读 (4)
- css-layout(布局研究) (5)
- less研究 (1)
- YUI探究 (1)
- hash探究 (1)
- js动画 (7)
- 前端面试题 (37)
- css书写规范 (1)
- js模板引擎 (6)
- js模块化 (19)
- 编写高质量代码 (3)
- 性能探究--应用协议 (2)
- 前端图像处理 (19)
- Mac OS相关 (21)
- 正则表达式 (11)
- 离线应用相关 (0)
- 前端工具 (65)
- nodeJS (55)
- jquery优化篇 (2)
- 设计模式探究系列 (3)
- windows7 (2)
- IE10 (10)
- 微博开放平台探究 (2)
- 常用web服务接口 (1)
- 数据存储相关 (8)
- 零时文件 (2)
- jQuery Mobile (16)
- backbone (15)
- underscore (22)
- sass (11)
- android (3)
- phonegap (10)
- IE私有 (11)
- qwrap (8)
- git (14)
- chrome extensions (5)
- freemarker (11)
- angularJS (3)
- seo (2)
- markdown (3)
- css动画 (4)
- 安卓开发 (2)
- React (7)
- 活动页技术 (1)
- 网络安全 (3)
- grunt (7)
- Lo-Dash (3)
- 前端国际化 (4)
- 版本控制 (2)
- 盒模型 (4)
- 微信开发 (1)
- Mock数据工具 (1)
- sails (1)
- vim (1)
- js-color (1)
- iOS 基础 (43)
最新评论
-
jertom:
<div id="showInfo" ...
addEventListener等事件监听的参数细谈 -
乌托邦国王:
引用[u][/u]
css3动画属性系列之transform细讲移动translate -
hvang1988:
能提供附件下载吗,找不到js库,google封了访问不了
Syntaxhighlighter---代码高亮插件介绍 -
sscsacdsadcsd:
我的天 那到底是为什么function是object我看und ...
typeof func ==='function'的疑惑 -
wkjiangwk:
试了,没用,你们从不去测试。
介绍一下x-webkit-speech -------实现语音输入
前言:
本来按照自己的计划是推出的是
- 常用性能分析工具介绍和使用帮助
- 内存泄露相关
- js内核介绍优化分析
- js解析执行机制
- 分段和延迟加载
- 。。。。。。。
---------------任务是艰巨的,道路是漫长的,一步一步,认认真真地走下去。切勿浮躁
正文:
好了,言归正传,以前记得一个同学说过理解Javascript,就必须弄明白执行环境,闭包,词法作用域,作用域链,标识符解析,预解析等等。。。
1、执行环境
- 高级编程上曾经说过:
i、作为拥有变量松散类型的Javascript,决定了它的变量只在特定的时间用于保存特定值。
ii、执行环境定义了变量或者函数有权访问的其他数据,决定了它们各自的行为。每一个执行环境中定义的所有 变量和函数多保存在一个关联的变量对象里面。代码无法访问这个变量对象,但是解析器在处理数据的时候 会使用它。
这边我以前一直在想一个问题:变量定义了,分配了存储位置,就一定会有读取和写入的效率。那么每一个函数在被调用的时候都会创建自己的执行环境,那么怎样才能提高数据被检索到的速度呢。
- 高性能上曾经说过:
--------我们可以把数据存取位置分为下列4种:
- 直接量----代表自身,不存储在特定的位置。包括字符串、数字、布尔值等等。
- 变量----var 出来的。
- 数组元素----存储在数组对象内部,以数字作为索引。
- 对象成员----存储在对象内部,以字符串作为索引。
相比而言,一个直接量和一个局部变量中存取数据的性能差异是很小的,但是访问数组元素和对象成员就会高一点。当然每一个浏览器的内核(不了解内核,嘻嘻可以看看v8)不一样,所以具体的差别还是针对不一样的浏览器。
这边有一个特例:ff3优化了数组项的存取,所以速度得到了优化。
2、作用域
无论从性能角度去分析还是一般从我们代码的设计去实现某些功能的角度去分析或者说一些方法安全角度去考虑这个“作用域”的问题,多是很有意义的。因为里面涉及到比如变量可以被谁去访问或者this的时候咋去赋值。
作用域链----在代码执行环境中会创建由变量对象构成的。
- 用途:保证对执行环境有权访问的所以变量和函数的有序访问
- 内部: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
发表评论
-
自执行函数相关
2013-05-07 20:39 1388整理几种自执行函数: 在最前最后加括 ... -
一淘首页优化总结
2013-02-01 17:10 0尽量减少DOM节点 不需要初始加载就渲染 ... -
严格模式探究
2013-01-18 17:32 1449探究一下严格模式 ... -
《JavaScript高级程序设计》性能探究之优化DOM交互
2012-10-20 17:50 1451本文来自《JavaScript高级程序设计》阅读笔记 ... -
《JavaScript高级程序设计》性能探究之最小化语句数
2012-10-20 16:18 1400本篇主要整理于《JavaScript高级程序设计》的第三版 6 ... -
翻译学习《how-web-page-loads》
2012-10-19 17:42 1345本文大部分来源于: http://www.douban ... -
关于页面的资源文件组织合理性探究
2012-10-18 13:55 1417本文主要来自于kejun's Blog里面的js和css的顺序 ... -
js性能之最小化重绘和重排(样式相关)
2012-09-22 20:18 1502前面有一篇记录了重绘和重排(http://zhangyaoch ... -
js性能-DOM编程之重绘和重排
2012-09-19 16:59 7233浏览器下载完页面中的所有组件----HTML标记,Js,CSS ... -
IE下的:hover
2012-09-19 16:22 1563从IE7(严格模式下)任何元素都可以使用:hover这 ... -
书写高质量JavaScript代码的要点(The Essentials of Writing High Quality JavaScript)翻译
2012-02-25 17:08 1657前言: 1、文章尾部带有原文的链接和来自zhang ... -
关于ajax类库的局限思考
2012-01-17 20:35 1471目前对于各大前端框架来言,都支持访问一个ajax对象,它屏蔽了 ... -
关于iframe加载完成的判断
2011-10-28 21:18 0//创建iframe var iframe = ... -
你会用string.lastIndexOf()吗?
2011-10-15 16:29 2115很多的人可能会不屑这个问题,请听我慢慢说道。 需求设计 ... -
js性能优化之 Object/Array直接量
2011-10-14 14:30 2702以前可能自己写的时候也有这个习惯,但是理论性的没有认真去中总结 ...
相关推荐
JavaScript中的Protobuf(Protocol Buffers)编码与解码是一个重要的数据序列化技术,它允许开发者在不同的编程语言之间高效地交换结构化数据。本项目"js-protobuf-encode-decode-master.zip"提供了一个在线工具,...
本资源包“crypto-js加密解密资源包(含所有前台加密的js代码)”正是为了解决这一问题而设计的,它提供了一系列JavaScript实现的加密算法,适用于那些无法访问Google服务,无法轻易获取此类库的开发者。 首先,...
3. **操作数据**:SheetJS 提供了一系列API,可以对数据进行增删改查操作,如添加行、删除行、修改单元格内容、合并单元格等。 4. **自定义样式**:库允许用户定义单元格的样式,如字体、颜色、背景、边框等,使...
本文将深入探讨如何使用JavaScript SDK(esdk-obs-browserjs-es5-3.19.9.js)来与华为云OBS进行交互。 首先,了解JavaScript SDK是至关重要的。它是一个轻量级的库,为开发者提供了在浏览器环境中操作OBS的API接口...
Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境,它让开发者能够在服务器端使用 JavaScript 进行编程。在 Node.js 的生态中,有许多丰富的库和模块,其中 `node-crypto-api` 是一个专门用于处理加密货币...
在64位Windows环境下运行Jaspersoft Studio,可以充分利用系统的内存资源,处理大数据集时性能更优。64位系统能够分配超过4GB的内存给应用程序,这对于处理复杂报表和大型数据集至关重要。此外,对于处理多线程任务...
首先,这张图可能包含JavaScript的基础语法部分,如变量声明(var、let、const)、数据类型(原始类型和引用类型)、运算符(算术、比较、逻辑、赋值等)以及流程控制语句(条件语句、循环语句)。 其次,函数是...
在JavaScript编程领域中,IP地址的显示是一种常见的需求,特别是在网络应用或者数据分析的场景下。这个"javascript经典特效---IP地址的显示(说明).rar"压缩包文件可能包含了一个详细的示例或教程,用于教导如何在...
这个API包含了地图渲染、图层管理、地理编码、空间分析、数据可视化等一系列GIS功能。 2. **版本4.27特性** - **性能提升**:4.27版本在性能方面进行了优化,加载速度更快,用户体验更流畅。 - **增强的地图操作*...
- **高效的数据读写策略**:如何优化JavaScript中的数据访问方式以提高应用性能。 - **数据结构选择**:根据应用场景选择合适的数据结构来提升数据访问效率。 **技术细节:** - 数据访问的性能直接影响到应用的整体...
在JavaScript编程中,实时修改表格(Table)数据是一项常见的需求,特别是在动态网页应用中。这里我们将深入探讨如何使用JavaScript,结合Ajax和JSON技术,来实现这一功能。 首先,我们需要了解HTML表格的基本结构...
【标题】"管理系统系列--基于and-design-vue的vue后台管理系统模板"是一个针对开发者设计的前端项目模板,它利用了流行的Vue.js框架以及and-design-vue库,为开发高效、美观的后台管理系统提供了基础框架。...
总结来说,`django-js-variable-injector`是Django开发者的一个实用工具,它方便了服务器端数据与前端JavaScript的交互,提高了开发效率。正确地理解和使用这个库,可以帮助你更好地构建基于Django的Web应用,实现...
" crypto-js-develop "是一个专注于前端加密的JavaScript库,它提供了丰富的加密算法,使得开发者能够在浏览器环境中安全地处理敏感数据。这个库是基于"CryptoJS"的,CryptoJS是一个广泛使用的开源项目,它提供了...
标题中的“Node.js-mongo-express-基于Web的MongoDB管理界面采用Node.js和express开发”揭示了我们讨论的主题:一个使用Node.js和Express框架构建的MongoDB Web管理界面,名为“mongo-express”。这个工具提供了图形...
BaseX是一个高性能、XML数据库系统,常用于处理XML数据。在JavaScript环境中,BaseX的JavaScript接口允许开发者在Web应用中直接与BaseX服务器进行交互。 在深入讲解这个文件之前,让我们先了解一下ExtJS和BaseX的...
Electron通过将浏览器环境与Node.js的运行时环境相结合,使得开发者可以访问到操作系统级别的功能,同时还能利用丰富的Node.js生态系统。 其次,`Element-UI`是一个基于Vue.js的组件库,它提供了一系列美观且易于...
- **闭包**:一个函数与其相关的引用环境组合在一起形成闭包,允许函数访问其外部作用域中的变量。 #### 知识点四:面向对象编程的具体实现方式 - **构造函数**:通过构造函数可以定义类,并使用`new`关键字实例化...