加速IE的Javascript document输出的方法


Posted in Javascript onDecember 02, 2010

将下列代码加在JavaScript的最前面

/*@cc_on _d=document;eval('var document=_d')@*/

加入这样的一行代码IE的document的访问速度至少可以提高5倍以上
下面是加入前和加入后的测试比较代码
// Before 
var date = new Date; 
for (var i = 0; i < 100000; i++) document; 
alert(new Date - date); // 643

/*@cc_on _d=document;eval('var document=_d')@*/ // After 
date = new Date; 
for (var i = 0; i < 100000; i++) document; 
alert(new Date - date); // 145

速度提高了不少吧!

解说:
首先,IE里document就这样直接被调用的话被执行的是window 对象的内部函数,而这个比较低效的。根据这一点,下面的处理可以提高速度:
var doc = document;

document; // 慢
doc; // 这个比上面的(document)快

虽然像上面那么写可以直接使用,但是之前用到document的地方都要去替换,这个有点麻烦了点吧。所以,看下面的:
var doc = document;
var document = doc;
可以实现的话那就太好了……

了解JavaScript的人应该知道,JavaScript的变量是在最开始的时候就生成的,所以这里的document就变成了undefined了。
没关系,继续改进~
var doc = document;
eval('var document = doc');

eval的作用就是在作用域范围内改变变量,这样的话,后面的document就可以被正常使用了。
最后,加上只有在IE内有效的条件,就像下面这样就可以了~

/*@cc_on 
var doc = document; 
eval('var document = doc'); 
@*/

举一反三,像下面这样的写法,document以外的全局变量也可以用上面的方法,起到加速的作用。
/*@cc_on 
eval((function(props) { 
var code = []; 
for (var i = 0 l = props.length;i<l;i++){ 
var prop = props[i]; 
window['_'+prop]=window[prop]; 
code.push(prop+'=_'+prop) 
} 
return ‘var ‘+code.join(','); 
})('document self top parent alert setInterval clearInterval 
setTimeout clearTimeout'.split(' ‘))); 
@*/

下面是Franky的回复:
首先,IE里document就这样直接被调用的话被执行的是window 对象的内部函数,而这个比较低效的。根据这一点,下面的处理可以提高速度:

这个说法 不对..

之所以 你的测试 前后有差异,主要区别在于作用域链查找.
你的代码 是在global 执行环境.所以IE下,会访在global对象去查找 key 为'document'的成员. 而这个对象在ie中是一个com+实现的宿主对象. 他不在global中. global中没有,则去window中再次查找.造成了速度变慢.

同样的全局对象 Math. 就不会带来这个问题.原因是Math 在 Global上. 一次作用域链查找就找到了.

对于优化. 一个建议就是
var win = window, doc = document,undefined;
每层作用域内,如果这个成员使用超过两次,就有意义.

而如果你只在全局作用域 使用一次 ie 条件注释 ,首先 非ie就无法享受到作用域被缩短的好处. 当然非ie 不会存在global->window的 多一次责任链查找.

这里的优化核心,就是缩短作用域链. 虽然opera chrome safarai等较新版本,对作用域链查找做了优化. 但是我们认为的缩短作用域链. 对老的浏览器是有积极作用的.且对具备优化的浏览器,也不会带来过于负的面影响.

Javascript 相关文章推荐
删除重复数据的算法
Nov 23 Javascript
Javascript倒计时页面跳转实例小结
Sep 11 Javascript
jQuery插件StickUp实现网页导航置顶
Apr 12 Javascript
js+HTML5基于过滤器从摄像头中捕获视频的方法
Jun 16 Javascript
jquery判断复选框选中状态以及区分attr和prop
Dec 18 Javascript
JavaScript闭包实例详解
Jun 03 Javascript
JavaScript Date 知识浅析
Jan 29 Javascript
requirejs + vue 项目搭建详解
Jun 16 Javascript
微信小程序promsie.all和promise顺序执行
Oct 27 Javascript
ES6 如何改变JS内置行为的代理与反射
Feb 11 Javascript
layui将table转化表单显示的方法(即table.render转为表单展示)
Sep 24 Javascript
微信小程序中的video视频实现 自定义播放按钮、封面图、视频封面上文案
Jan 02 Javascript
关于Ext中form移除textfield方法:hide(),setVisible(false),remove()
Dec 02 #Javascript
javascript学习之闭包分析
Dec 02 #Javascript
JavaScript OOP面向对象介绍
Dec 02 #Javascript
JavaScript 字符串处理函数使用小结
Dec 02 #Javascript
改写一个简单的菜单 弹性大小
Dec 02 #Javascript
在Ajax中使用Flash实现跨域数据读取的实现方法
Dec 02 #Javascript
jQuery队列控制方法详解queue()/dequeue()/clearQueue()
Dec 02 #Javascript
You might like
PHP限制页面只能在微信自带浏览器访问的代码
2014/01/15 PHP
PHP小教程之实现链表
2014/06/09 PHP
php的SimpleXML方法读写XML接口文件实例解析
2014/06/16 PHP
destoon实现调用热门关键字的方法
2014/07/15 PHP
php生成图片缩略图的方法
2015/04/07 PHP
php实现网站顶踩功能的完整前端代码
2015/07/19 PHP
thinkPHP框架实现的短信接口验证码功能示例
2018/06/20 PHP
深入理解JavaScript系列(10) JavaScript核心(晋级高手必读篇)
2012/01/15 Javascript
关于jquery ajax 调用带参数的webservice返回XML数据一个小细节
2012/07/31 Javascript
js 自动播放的实例代码
2013/11/19 Javascript
jquery实现的鼠标下拉滚动置顶效果
2014/07/24 Javascript
JavaScript中使用sencha gridpanel 编辑单元格、改变单元格颜色
2015/11/26 Javascript
jQuery简单获取键盘事件的方法
2016/01/22 Javascript
jQuery Ajax 加载数据时异步显示加载动画
2016/08/01 Javascript
js动态生成form 并用ajax方式提交的实现方法
2016/09/09 Javascript
CSS+jQuery实现简单的折叠菜单
2016/12/20 Javascript
angularJS+requireJS实现controller及directive的按需加载示例
2017/02/20 Javascript
JavaScript递归函数解“汉诺塔”算法代码解析
2018/07/05 Javascript
Vue路由前后端设计总结
2019/08/06 Javascript
[02:48]DOTA2英雄基础教程 暗夜魔王
2013/12/12 DOTA
Python线程创建和终止实例代码
2018/01/20 Python
python xlwt如何设置单元格的自定义背景颜色
2019/09/03 Python
Python常用模块logging——日志输出功能(示例代码)
2019/11/20 Python
Scrapy框架基本命令与settings.py设置
2020/02/06 Python
pycharm通过anaconda安装pyqt5的教程
2020/03/24 Python
Python定时从Mysql提取数据存入Redis的实现
2020/05/03 Python
keras的siamese(孪生网络)实现案例
2020/06/12 Python
python利用xpath爬取网上数据并存储到django模型中
2021/02/26 Python
利用 CSS3 实现的无缝轮播功能代码
2017/09/25 HTML / CSS
HTML5去掉输入框type为number时的上下箭头的实现方法
2020/01/03 HTML / CSS
Mavi牛仔裤美国官网:土耳其著名牛仔品牌
2016/09/24 全球购物
Tessabit日本:集世界奢侈品和设计师品牌的意大利精品买手店
2020/01/07 全球购物
波兰品牌鞋履在线商店:Eastend.pl
2020/01/11 全球购物
通信工程专业求职信
2014/06/04 职场文书
建议书范文
2015/02/05 职场文书
个性与发展自我评价
2015/03/06 职场文书