怎样为IE浏览器的javascript提速
我要评论随着现在网页设计越来越多的应用javascript技术，而且浏览器的Javascript引擎运行速度也成为各大浏览器比拼性能的重要指标，各家浏览器厂商皆宣称他们的浏览器速度更快，希望搅动现存的竞争态势。IE8浏览器的Javascript运行速度虽然相对于IE7以及IE6有着很大的提升，但相对于Webkit引擎的浏览器还是有一定的差距，在去年的ZDNET Javascript测试上Chrome浏览器表现突出，一举击败Firefox、Safari和微软的IE浏览器。不过因为IE浏览器相对庞大的使用人群，我们有必要为IE浏览器的javascript来提提速。
我们知道，浏览器在执行期时是由内到外执行脚本的，那么离我们的脚本最远的全局对象，很可能要跨越几层作用域才能访问到它。不过在IE浏览器中，从最内层到最外层要花的时间比其他多出很多。加之，javascript是一种胶水语言，它必须要调用DOM对能完成我们大多数选择。最著名的就是选择元素（document.getElementById,document.getElementsByTagName,docuemnt.evaluate,document.querySelector），创建元素（document.createElement），此外还有document.body，document.defaultView.getComputedStyle等等，频繁地调用document对象，但是document是位于window对象下，因此这路程就更远了。就了提速，我们必须把它们保存在一个本地变量，那么每次就省得它长途跋涉了。这种技术的运用明显体现在jQuery的源码中：
(function( window, undefined ) {
// Define a local copy of jQuery
var jQuery = function( selector, context ) {
// The jQuery object is actually just the init constructor 'enhanced'
return new jQuery.fn.init( selector, context );
},
// Map over jQuery in case of overwrite
_jQuery = window.jQuery,
// Map over the $ in case of overwrite
_$ = window.$,
// Use the correct document accordingly with window argument (sandbox)
document = window.document,
//====================省=================
}
// Expose jQuery to the global object
window.jQuery = window.$ = jQuery;
})(window);
把window传进闭包内，就省得它每次都往外找window了。
再看其他类库
//Raphael
window.Raphael = (function () {
var separator = /[, ]+/,
elements = /^(circle|rect|path|ellipse|text|image)$/,
doc = document,
win = window,
//************略**************
//dojo d.global = this;
//Ext DOC = document,
//YUI
//************略************
} else if (i == 'win') {
c[i] = o[i].contentWindow || o[i];
c.doc = c[i].document;
//************略************
Y.config = {
win: window || {},
doc: document,
但是如果你没有引入类库，如果让IE的javascript跑得更快些呢？用一个变量把它储存起来？在一个国外的博客看到一种很厉害的劫持技术，偷龙转凤把全局变量document变成一个局部变量。
/*@cc_on _d=document;eval('var document=_d')@*/
<!doctype html>
<html dir="ltr" lang="zh-CN">
<head>
<meta charset="utf-8"/>
<title>javascript提速技术 by 司徒正美</title>
<script type="text/javascript">
var date = new Date;
for (var i = 0; i < 100000; i++) document;
alert(new Date - date);
</script>
</head>
<body>
</body>
</html>
运用提速技术后：
<!doctype html>
<html dir="ltr" lang="zh-CN">
<head>
<meta charset="utf-8"/>
<title>javascript提速技术 by 司徒正美</title>
<script type="text/javascript">
/*@cc_on _d=document;eval('var document=_d')@*/
var date = new Date;
for (var i = 0; i < 100000; i++) document;
alert(new Date - date);
</script>
</head>
<body>
!!!!!!!!
</body>
</html>
经测试，用了提速技术后，IE的性能比较
| IE6 | |||
|---|---|---|---|
| document | document.getElementById | document.title | |
| 没有使用提速技术 | 485 | 1110 | 1219 |
| 使用提速技术后 | 109 | 609 | 656 |
| IE8 | |||
|---|---|---|---|
| document | document.getElementById | document.title | |
| 没有使用提速技术 | 468 | 797 | 843 |
| 使用提速技术后 | 78 | 328 | 407 |
我们看一下实现原理:
document; doc; //很明显，调用这个比直接document快，document还要钻进window内部找一番
如何劫持它呢？
var doc = document; var document = doc;
这样明显不行因为在预编译阶段，var变量会提前，上面代码相当于
var doc var document //这里被劫持了 doc = document //注意，document已经变成undefined document = doc //相当于window.undefined = undefined
没有办法，只好在执行期才定义这个document变量，javascript的动态解析技术派上用场了，eval就是其代表之一。
var doc = document;
eval('var document = doc');
为了让IE专用，用了IE特有的条件编译。
/*@cc_on
var doc = document;
eval('var document = doc');
@*/
嘛，window的东西其实蛮多，我们一一把它们变成本地变量又如何？
/*@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 event body location title self top parent alert setInterval clearInterval setTimeout clearTimeout'.split(' ')));
@*/
我们可以再扩展一下，让其更多全局变量或全局方法局部化。不过经验测，FF使用它会报错，chrome则慢了，其他浏览器不明显。
if( !+"v1" ){
var code = [],ri = 0,prop,str = "var "
for(var a in window)
code[ri++] = a;
for (var i = 0 ,n = code.length;i<n;i++){
var prop = code[i]
window['_'+prop] = window[prop];
str += prop+'=_'+prop+","
}
str = str.slice(0,-1);
eval(str)
}
<!doctype html>
<html dir="ltr" lang="zh-CN">
<head>
<meta charset="utf-8"/>
<title>javascript提速技术 by 司徒正美</title>
<script type="text/javascript">
var __chrome = navigator.userAgent.indexOf("Chrome") !== -1;
var __firefox = !!window.Components
if( !__chrome & !__firefox ){
var code = [],ri = 0,prop,str = "var "
for(var a in window)
code[ri++] = a;
for (var i = 0 ,n = code.length;i<n;i++){
var prop = code[i]
window['_'+prop] = window[prop];
str += prop+'=_'+prop+","
}
str = str.slice(0,-1);
eval(str)
}
var date = new Date;
for (var i = 0; i < 100000; i++)
document;
alert(new Date - date);
</script>
</head>
<body>
!!!!!!
</body>
</html>
文章来源：http://www.cnblogs.com/rubylouvre/archive/2010/02/11/1667628.html
虽然IE8的发布并没有给我们带来多大的惊喜，但根据微软所公布了IE9的各种评测效能信息，惊奇的发现，IE9在而针对Javascript引擎性能的SunSpider测试中，IE9大幅超越了IE7与IE8，并与Chrome、Safari及Firefox浏览器的Javascript运行基本处于同一等级。希望微软以后不要在重蹈IE8的覆辙，毕竟微软现在出新浏览器的动作是越来越勤奋了，记得当前IE6了，不知用了多少年，才听说有了IE7了，到现在IE8才超越IE6成为全球最流行的浏览器版本，我们期盼微软IE9浏览器能够让竞争对手刮目相看。
相关文章
目前 Edge 浏览器的“...”设置菜单占据大量屏幕空间，尤其是在窗口模式下，用户体验较差，在最新版本dege中，微软精简了“...”设置菜单，提升了用户体验2025-03-24
在工作和生活中，我们可能常常会遇到需要从百度网盘导出文件的情况，下面跟大家分享一下具体办法2025-03-21- 微软在Canary频道发布了最新版的Microsoft Edge浏览器，其中最引人注目的变化莫过于设置页面的全面焕新，这次更新不仅精简了菜单，新增了矩形按钮，还优化了子目录设置，并2025-03-10
如何在Firefox中实现垂直标签页? 火狐浏览器垂直标签页设置方法
Firefox默认的标签页是水平显示的，但有一个方法可以将它们转换为垂直显示，下面我们就来看看设置方法2025-03-05
Firefox 136 正式发布，这个版本增了大家期待已久的「垂直标签页」布局，下面我们就来看看详细更新内容2025-03-05
浏览器怎么开启阅读模式? Chrome/Edge/Safari/Firefox开启方法
阅读模式是浏览器提供的一种功能，可以去除网页上的广告、按钮、背景图等杂乱信息，使内容更加简洁易读，不同浏览器的阅读模式开启方法略有不同，以下是几种常见浏览器的开2025-02-25
今天下载一个app需要用到gmail的邮箱，这个邮箱不论是安全与隐私保护都是比较好的，但因为国内的原因不容易注册，这里就为大家分享一下解决方法2025-02-24
避免打印出来的效果不理想，浪费纸张，打印预览是指在打印文档之前，预先查看文档的打印效果，打印预览在哪里？详细如下2025-02-13
怎么把图片背景变成透明? 教你一个免费在线图片去白底变透明的方法
浏览器下载的图片有白底，想要变成透明底，方便当素材直接导入，该怎么操作呢？之前介绍很多方法都用到了软件，今天教大家一个在线处理方法2025-01-31如何在Edge浏览器中安装第三方翻译插件? Edge浏览器插件安装全攻略
Edge浏览器作为微软推出的新一代浏览器软件，不仅界面简洁、速度快，还支持用户自由安装插件来扩展其功能，今天，我们就来详细讲解一下Edge浏览器安装插件的方法2025-01-30
最新评论