怎樣為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 jQueryvar 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 objectwindow.jQuery = window.$ = jQuery;})(window);把window傳進閉包內,就省得它每次都往外找window了 。
再看其他類庫
//Raphaelwindow.Raphael = (function () {var separator = /[, ] /,elements = /^(circle|rect|path|ellipse|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’)@*/!doctype html
html dir=ltr lang=zh-CN
head
meta charset=utf-8/
titlejavascript提速技術 by 司徒正美/title
script type=text/javascript
var date = new Date;
for (var i = 0; i100000; i) document;
alert(new Date - date);
/script
/head
body
/body
/html
運用提速技術后:
!doctype html
html dir=ltr lang=zh-CN
head
meta charset=utf-8/
titlejavascript提速技術 by 司徒正美/title
script type=text/javascript
/*@cc_on _d=document;eval(’var document=_d’)@*/
var date = new Date;
for (var i = 0; i100000; i) document;
alert(new Date - date);
/script
/head
body
!!!!!!!!
/body
/html
經測試,用了提速技術后,IE的性能比較
IE6documentdocument.getElementByIddocument.title沒有使用提速技術48511101219使用提速技術后109609656IE8documentdocument.getElementByIddocument.title沒有使用提速技術468797843使用提速技術后78328407我們看一下實現原理:
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;il;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 = varfor(var a in window)code[ri] = a;for (var i = 0 ,n = code.length;in;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/
titlejavascript提速技術 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;in;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; i100000; i)
document;
alert(new Date - date);
/script
/head
body
!!!!!!
/body
/html
文章來源:http://www.cnblogs.com/rubylouvre/archive/2010/02/11/1667628.html
【怎樣為IE瀏覽器的javascript提速】雖然IE8的發布并沒有給我們帶來多大的驚喜,但根據微軟所公布了IE9的各種評測效能信息,驚奇的發現 , IE9在而針對Javascript引擎性能的SunSpider測試中,IE9大幅超越了IE7與IE8,并與Chrome、Safari及Firefox瀏覽器的Javascript運行基本處于同一等級 。希望微軟以后不要在重蹈IE8的覆轍,畢竟微軟現在出新瀏覽器的動作是越來越勤奮了,記得當前IE6了,不知用了多少年 , 才聽說有了IE7了,到現在IE8才超越IE6成為全球最流行的瀏覽器版本,我們期盼微軟IE9瀏覽器能夠讓競爭對手刮目相看 。

相關經驗推薦