怎样为IE的javascript提速

 我们知道,javascript在执行期时是由内到外执行脚本的,那么离我们的脚本最远的全局对象,很可能要跨越几层作用域才能访问到它。不过在IE中,从最内层到最外层要花的时间比其他多出很多。加之,javascript是一种胶水语言,它必须要调用DOM对能完成我们大多数选择。最著名的就是选择元素(document.getElementById,document.getElementsByTagName,docuemnt.evaluate,document.querySelector),创建元素(document.createElement),此外还有document.body,document.defaultView.getComputedStyle等等,频繁地调用document对象,但是document是位于window对象下,因此这路程就更远了。就了提速,我们必须把它们保存在一个本地变量,那么每次就省得它长途跋涉了。这种技术的运用明显体现在jQuery的源码中:

01.(function( window, undefined ) { 
02. 

03.// Define a local copy of jQuery 
04.var jQuery = function( selector, context ) { 
05. 
// The jQuery object is actually just the init constructor 'enhanced' 
06. 
return new jQuery.fn.init( selector, context ); 
07. 
}, 
08. 

09. 
// Map over jQuery in case of overwrite 
10. 
_jQuery = window.jQuery, 
11. 

12. 
// Map over the $ in case of overwrite 
13. 
_$ = window.$, 
14. 

15. 
// Use the correct document accordingly with window argument (sandbox) 
16. 
document = window.document, 
17. 

18. 
//====================省================= 
19. 

20.// Expose jQuery to the global object 
21.window.jQuery = window.$ = jQuery; 
22. 

23.})(window); 
把window传进闭包内,就省得它每次都往外找window了。

再看其他类库

1.//Raphael 
2.window.Raphael = (function () { 
3. 
var separator = /[, ]+/, 
4. 
elements = /^(circle|rect|path|ellipse|text|image)$/, 
5. 
doc = document, 
6. 
win = window, 
7.//************略************** 1.//dojo 
2.d.global = this; 1.//Ext 
2.DOC = document, 01.//YUI 
02.//************略************ 
03. 
} else if (i == 'win') { 
04. 
c[i] = o[i].contentWindow || o[i]; 
05. 
c.doc = c[i].document; 
06.//************略************ 
07.Y.config = { 
08. 

09. 
win: window || {}, 
10. 
doc: document, 
但是如果你没有引入类库,如果让IE的javascript跑得更快些呢?用一个变量把它储存起来?在日本博客看到一种很厉害的劫持技术,偷龙转凤把全局变量document变成一个局部变量。

view sourceprint?1./*@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

我们看一下实现原理:

view sourceprint?1.document; 
2.doc; //很明显,调用这个比直接document快,document还要钻进window内部找一番 
如何劫持它呢?

view sourceprint?1.var doc = document; 
2.var document = doc; 
这样明显不行因为在预编译阶段,var变量会提前,上面代码相当于

view sourceprint?1.var doc 
2.var document //这里被劫持了 
3.doc = document //注意,document已经变成undefined 
4.document = doc //相当于window.undefined = undefined 
没有办法,只好在执行期才定义这个document变量,javascript的动态解析技术派上用场了,eval就是其代表之一。

view sourceprint?1.var doc = document; 
2.eval('var document = doc'); 
为了让IE专用,用了IE特有的条件编译。

view sourceprint?1./*@cc_on 
2.var doc = document; 
3.eval('var document = doc'); 
4.@*/
嘛,window的东西其实蛮多,我们一一把它们变成本地变量又如何?

view sourceprint?01./*@cc_on 
02.eval((function(props) { 
03. 
var code = []; 
04. 
for (var i = 0 l = props.length;i<l;i++){ 
05. 
var prop = props[i]; 
06. 
window['_'+prop]=window[prop]; 
07. 
code.push(prop+'=_'+prop) 
08. 

09. 
return 'var '+code.join(','); 
10.})('document event body location title self top parent alert setInterval clearInterval setTimeout clearTimeout'.split(' '))); 
11.@*/
我们可以再扩展一下,让其更多全局变量或全局方法局部化。不过经验测,FF使用它会报错,chrome则慢了,其他浏览器不明显。

view sourceprint?01.if( !+"v1" ){ 
02. 
var code = [],ri = 0,prop,str = "var "
03. 
for(var a in window) 
04. 
code[ri++] = a; 
05. 
for (var i = 0 ,n = code.length;i<n;i++){ 
06. 
var prop = code[i] 
07. 
window['_'+prop] = window[prop]; 
08. 
str += prop+'=_'+prop+","
09. 

10. 
str = str.slice(0,-1); 
11. 
eval(str) 
12.} 
<!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>

时间: 2024-08-19 23:45:36

怎样为IE的javascript提速的相关文章

为IE浏览器的javascript提速

 随着现在网页设计越来越多的应用javascript技术,而且浏览器的Javascript引擎运行速度也成为各大浏览器比拼性能的重要指标,各家浏览器厂商皆宣称他们的浏览器速度更快,希望搅动现存的竞争态势.IE8浏览器的Javascript运行速度虽然相对于IE7以及IE6有着很大的提升,但相对于Webkit引擎的浏览器还是有一定的差距,在去年的ZDNET Javascript测试上Chrome浏览器表现突出,一举击败Firefox.Safari和微软的IE浏览器.不过因为IE浏览器相对庞大的使用

理解Javascript_06_理解对象的创建过程_javascript技巧

简单的代码 我们先来看一段简单的代码: 复制代码 代码如下: function HumanCloning(){ } HumanCloning.prototype ={ name:'笨蛋的座右铭' } var clone01 = new HumanCloning(); alert(clone01.name);//'笨蛋的座右铭' alert(clone01 instanceof HumanCloning);//true HumanCloning.prototype = {}; alert(clon

纯javascript实现四方向文本无缝滚动效果

  本文主要给大家分享了使用纯javascript实现的可控制的四方向文本无缝滚动的代码,效果非常不错,有需要的小伙伴可以参考下. 实现一个文本无缝滚动的效果: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59

JavaScript自定义日期格式化函数详细解析

 下面的一个例子就是以独立函数写出的JavaScript日期格式化函数,独立的format函数.回到格式化的这一知识点上,我们考查的是怎么实现的.运用了哪些原理 我们对 JavaScript 扩展其中一个较常的做法便是对 Date.prototype 的扩展.因为我们知道,Date 类只提供了若干获取日期元素的方法,如 getDate(),getMinute()--却没有一个转换为特定字符串的格式化方法.故所以,利用这些细微的方法,加以封装,组合我们想要的日期字符串形式.一般来说,该格式化函数可

为你的响应式设计提速

  响应式设计是最近的流行词,能够打造多屏幕一致体验. 现在几乎每个人都喜欢响应式设计,而且可以是没有原因的支持,这跟Flash刚出现那会火热的局面有点相似.然而,响应式设计带来了表现力的问题,这需要通过调整图像.压缩图像.改变图像大小等手段来解决. 然而,为了提高表现力,有的时候不得不增大文件的尺寸.浏览体验需要快速的载入,本文将讲述一些为响应式设计提速的方法. 为什么响应式设计载入那么慢? 在所有的设备上,响应式设计载入的HTML元素都相同.就算你的网站专供桌面或者专供平板,在其他设备上,载

Web 站点提速的最佳实践(Best Practices for Speeding Up Your Web Site)

Web 站点提速的最佳实践(Best Practices for Speeding Up Your Web Site) 太阳火神的美丽人生 (http://blog.csdn.net/opengl_es) 本文遵循"署名-非商业用途-保持一致"创作公用协议 转载请保留此句:太阳火神的美丽人生 -  本博客专注于 敏捷开发及移动和物联设备研究:iOS.Android.Html5.Arduino.pcDuino,否则,出自本博客的文章拒绝转载或再转载,谢谢合作. Best Practice

ASP.NET MVC 应用提速的十种方法

[编者按]本文作者为 DZone 社区的最具价值博主(MVB) Jonathan Danylko,主要介绍为 ASP.NET MVC 应用提速的十种方法.由国内 ITOM 管理平台 OneAPM 编译呈现,以下为正文. 每个人都想快速掌握最新消息. 我是说,人们恨不得预知第二天的头条.没有人喜欢等待. 排队等待,遇到红灯要等待,开个网页要等待,等等等. 理所当然,没有人喜欢等待网页慢吞吞地加载,尤其是在移动端访问网站时.其实,Web 开发者敏感的神经决定了我们等待与否. 现在,快速响应不仅是来自

[WebKit] JavaScriptCore解析--基础篇(四) 页面解析与JavaScript元素的执行

很多地方都已经介绍了JavaScript在浏览器是如何被执行的,这里介绍一下WebKit是如何实现的.主要涉及JS的async,defer及普通脚本的解析与执行过程的代码实现. 1. 概要说明 先概要说明一下浏览器如何执行JavaScript的. 首先浏览器的页面解析器(Document Parser)遇到<script>就会发起下载(脚本内容在页面内的就不用下载了).然后针对不同情况执行的方式有所不同:   . async (在script标签中启用了async属性)       这是异步执

JavaScript自定义日期格式化函数详细解析_javascript技巧

我们对 JavaScript 扩展其中一个较常的做法便是对 Date.prototype 的扩展.因为我们知道,Date 类只提供了若干获取日期元素的方法,如 getDate(),getMinute()--却没有一个转换为特定字符串的格式化方法.故所以,利用这些细微的方法,加以封装,组合我们想要的日期字符串形式.一般来说,该格式化函数可以定义在 Date 对象的原型身上,也可以独立一个方法写出.定义原型方法的操作如 Date.prototype.format = function(date){-