- 浏览: 2565154 次
- 性别:
- 来自: 北京
文章分类
- 全部博客 (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 1355整理几种自执行函数: 在最前最后加括 ... -
一淘首页优化总结
2013-02-01 17:10 0尽量减少DOM节点 不需要初始加载就渲染 ... -
严格模式探究
2013-01-18 17:32 1418探究一下严格模式 ... -
《JavaScript高级程序设计》性能探究之优化DOM交互
2012-10-20 17:50 1419本文来自《JavaScript高级程序设计》阅读笔记 ... -
《JavaScript高级程序设计》性能探究之最小化语句数
2012-10-20 16:18 1374本篇主要整理于《JavaScript高级程序设计》的第三版 6 ... -
翻译学习《how-web-page-loads》
2012-10-19 17:42 1301本文大部分来源于: http://www.douban ... -
关于页面的资源文件组织合理性探究
2012-10-18 13:55 1392本文主要来自于kejun's Blog里面的js和css的顺序 ... -
js性能之最小化重绘和重排(样式相关)
2012-09-22 20:18 1473前面有一篇记录了重绘和重排(http://zhangyaoch ... -
js性能-DOM编程之重绘和重排
2012-09-19 16:59 7172浏览器下载完页面中的所有组件----HTML标记,Js,CSS ... -
IE下的:hover
2012-09-19 16:22 1538从IE7(严格模式下)任何元素都可以使用:hover这 ... -
书写高质量JavaScript代码的要点(The Essentials of Writing High Quality JavaScript)翻译
2012-02-25 17:08 1632前言: 1、文章尾部带有原文的链接和来自zhang ... -
关于ajax类库的局限思考
2012-01-17 20:35 1444目前对于各大前端框架来言,都支持访问一个ajax对象,它屏蔽了 ... -
关于iframe加载完成的判断
2011-10-28 21:18 0//创建iframe var iframe = ... -
你会用string.lastIndexOf()吗?
2011-10-15 16:29 2070很多的人可能会不屑这个问题,请听我慢慢说道。 需求设计 ... -
js性能优化之 Object/Array直接量
2011-10-14 14:30 2664以前可能自己写的时候也有这个习惯,但是理论性的没有认真去中总结 ...
相关推荐
这个代码是一个基于Web的AI对象检测应用程序,使用了ML5.js和COCO-SSD模型。它可以通过计算机摄像头实时检测视频中的对象,并在屏幕上显示其位置和标签。这种应用程序可用于安全监控、自动化控制和智能家居等领域。 ...
在这个阶段,我们将通过实现缓存机制来减少数据库的访问次数,提高WordPress网站的性能。 ### 阶段三:图片优化 在这个阶段,我们将对WordPress网站中的图片进行优化,减少加载时间,提高用户体验。 ### 阶段四:...
变量和数据的访问;2. 选择性能高的DOM方法,及把DOM操作尽量整合到一次完成;3.优化for循环和ifelse条件判断;4.优化字符串郑泽操作;5.用定时器控制ui进程之行栈;6.选择合适的传输类型(json轻量html节省dom效率...
InterSystems IRIS数据平台具备以下特性: •高性能,具备并行的事务处理和分析处理能力,支持实时处理用例。 •支持实时执行机器学习、业务规则、自然语言处理、商业智能及SQL查询。...•提供可高度自定义的数据访问
在Javascript中,有四种基本的数据访问位置:1.Literalvalues直接量直接量仅仅代表自己,而不存储于特定的位置。Javascript的直接量包括:字符串(strings)、数字(numbers)、布尔值(booleans)、对象(objects)、数组...
每种数据类型的访问都需要付出点性能代价,对于直接量和局部变量基本都能消费得起,而访问数组项和对象成员则要代价高点。下图显示了不同浏览器,分别对这四种数据类型进行了200’000次操作所用的时间。 由上图...
其他好处: 一个依赖项(它是prop-types ) 性能-演示页面几乎总是保持60fps以上的速度 将您的组件分开-作为高阶组件让您控制-不会强制执行任何特定的标记,但会为您提供必要的样式和数据以供使用。遗产如果您正在...
Cue.js-数据驱动的CustomElements “使用完全由声明性域数据驱动的可重用组件来构建快速,React灵敏的Web应用程序。Cue扩展了具有类似助焊剂的数据绑定和React性的本机WebComponents 。它使您可以编写原始的...
ag-Grid:支持Javascript / React / AngularJS / Web组件的高级数据网格/数据表 ag-Grid ag-Grid 是一个功能齐全且高度可定制的 JavaScript 数据网格。 它提供出色的性能,没有第 3 方依赖项,并且可以与所有主要的...
文献资料要开始并了解有关RTI Connector for JavaScript的更多信息,请参见的例子examples/nodejs目录提供了几个示例: simple演示如何创建基本的发布者和订阅者应用程序在transformation ,应用程序读取,转换和...
-为TreeNode增加AutoPostBack属性,增加事件数据类TreeCheckEventArgs,为Tree增加事件NodeCheck。 -示例在:http://extasp.net/data/tree_run.aspx -Grid增加GetNoSelectionAlertInParentReference函数,用来...
这个软件可以查看蜘蛛访问记录,根据这些记录可以看到蜘蛛什么时候来访问过你的站,抓取了什么内容,并可进行数据的查询和统计等。 使用方法: ----插入asp页面调用 ----插入html页面JS调用 访问统计查看页面: 你的...
本项目是一个基于Django的傣族节日及民间故事推广小程序,采用了前后端分离的设计模式,前端使用微信小程序和Vue.js进行开发,后端使用Django框架搭建。同时,项目还使用了SpringBoot作为微服务框架,以提供更高效的...
这个软件可以查看蜘蛛访问记录,根据这些记录可以看到蜘蛛什么时候来访问过你的站,抓取了什么内容,并可进行数据的查询和统计等。 使用方法: ----插入asp页面调用 ----插入html页面JS调用 ...
性能 - 批处理执行统计信息和性能相关的几个报表服务: 性能 - 对象执行统计信息 性能 - 按平均CPU时间排在前面的查询 性能 - 按平均IO次数排在前面的查询 性能 - 按总CPU时间排在前面的查询 性能 - 按IO总...
WebGL 提供了一种在 Web 浏览器中通过 Javascript 访问图形卡上的高性能硬件的方法。 顶点着色器用于提供顶点信息。 对于这个演示,顶点着色器简单地通过由 Javascript 代码渲染的两个三角形的顶点。 片段着色器...
它是用纯JavaScript编写的,因此它不依赖于jQuery之类的第三方库。 它使您可以延迟加载和多服务映像,从而节省带宽和服务器请求。 如果用户不浏览整个页面,将具有更快的加载时间并节省数据使用量。 演示 更多示例...