• 微软原版系统

  • 一键重装系统

  • 纯净系统

  • 在线技术客服

魔法猪系统重装大师 一键在线制作启动 U 盘 PE 系统 用一键重装的魔法拯救失去灵魂的系统
当前位置:首页 > 教程 > 电脑教程

怎样为IE的javascript提速

时间:2015年04月02日 15:49:02    来源:魔法猪系统重装大师官网    人气:3619

我们知道,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')@*/




javascript提速技术 by 司徒正美








运行代码

运用提速技术后:






javascript提速技术 by 司徒正美





!!!!!!!!



运行代码

经测试,用了提速技术后,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 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 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.}




javascript提速技术 by 司徒正美





!!!!!!

怎样,为,的,javascript,提速,我们,知道,jav
栏目:电脑教程 阅读:1000 2023/12/27
Win7教程 更多>>
U盘教程 更多>>
Win10教程 更多>>
魔法猪学院 更多>>

Copyright © 2015-2023 魔法猪 魔法猪系统重装大师

本站发布的系统仅为个人学习测试使用,请在下载后24小时内删除,不得用于任何商业用途,否则后果自负,请支持购买微软正版软件。

在线客服 查看微信 返回顶部