展会信息港展会大全

怎样为IE的javascript提速
来源:互联网   发布日期:2016-01-26 11:03:48   浏览:2287次  

导读:我们知道,javascript在执行期时是由内到外执行脚本的,那么离我们的脚本最远的全局对象,很可能要跨越几层作用域才能访问到它。不过在 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>

赞助本站

人工智能实验室

相关热词: javascript

AiLab云推荐
展开

热门栏目HotCates

Copyright © 2010-2024 AiLab Team. 人工智能实验室 版权所有    关于我们 | 联系我们 | 广告服务 | 公司动态 | 免责声明 | 隐私条款 | 工作机会 | 展会港