首頁 > 開發者 > 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"/>
<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 |
我們看一下實現原理:
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 = 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) }
<!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>
文章來源：http://www.cnblogs.com/rubylouvre/archive/2010/02/11/1667628.html
雖然IE8的發布並沒有給我們帶來多大的驚喜，但根據微軟所公布了IE9的各種評測效能資訊，驚奇的發現，IE9在而針對Javascript引擎效能的SunSpider測試中，IE9大幅超越了IE7與IE8，並與Chrome、Safari及Firefox瀏覽器的Javascript運行基本處於同一等級。希望微軟以後不要在重蹈IE8的覆轍，畢竟微軟現在出新瀏覽器的動作是越來越勤奮了，記得當前IE6了，不知用了多少年，才聽說有了IE7了，到現在IE8才超越IE6成為全球最流行的瀏覽器版本，我們期盼微軟IE9瀏覽器能夠讓競爭者刮目相看。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
