切片 切片 切片 切片 切片 切片 切片 切片 切片 切片 切片 编组 3 切片 切片 路径 2 download 工具 配置对比 手册 切片 切片
为IE浏览器的javascript提速
2013-04-15知识编号:099806
催更新

解决方案:


本文内容主要为部分开发专业人士提供参考。


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


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

(function( window undefined ) {// Define a local copy of jQueryvar jQuery = function( S E L E C Tor context ) {  // The jQuery object is actually just the init constructor ''enhanced''  return new jQuery.fn.init( S E L E C Tor 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        //====================省=================       }// Eose jQuery to the global objectwindow.jQuery = window.$ = jQuery;})(window);


把window传进闭包内,就省得它每次都往外找window了。


再看其他类库:

//Raphaelwindow.Raphael = (function () {    var separator = /[ ]+/        elements = /^(circle|rect|path|ellie|text|image)$/        doc = document        win = window//************略**************
//dojod.global = this;
//ExtDOC = 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'')@*/



< html dir="ltr" lang="zh-CN">
< head>
< meta charset="utf-8"/>
< title>javascript提速技术 by 司徒正美




< body>
< /body>
< /html>


运用提速技术后:



< html dir="ltr" lang="zh-CN">
< head>
< meta charset="utf-8"/>
< title>javascript提速技术 by 司徒正美




< 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 docvar document  //这里被劫持了doc = document //注意,document已经变成undefineddocument = doc //相当于window.undefined = undefined


没有办法,只好在执行期才定义这个document变量,javascript的动态解析技术派上用场了,eval就是其代表之一。


var doc = document;eval(''var document = doc'');


为了让IE专用,用了IE特有的条件编译。


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


嘛,window的东西其实蛮多,我们一一把它们变成本地变量又如何?


/*@cc_oneval((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 = 0propstr = "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)        }



< html dir=ltr" lang="zh-CN">
< head>
< meta charset="utf-8"/>
< title>javascript提速技术 by 司徒正美




< body>
!!!!!!
< /body>
< /html>

0
知识有用,就点一下~
0
收藏 :
分享 :

鐢ㄦ埛鍚嶄笉姝g‘

鐧诲綍
鍏朵粬鐧诲綍鏂瑰紡

鎵撳紑鑱旀兂鏅洪€堿pp鎵爜杩涜鐧诲綍

鎵弿鎴愬姛!

璇峰嬁鍒锋柊鏈〉闈紝鎸夋墜鏈烘彁绀烘搷浣滐紒

浜岀淮鐮佸凡澶辨晥
鍒锋柊
当前网络不佳, 请刷新重试
图片加载中...