IEブラウザのjavascriptをスピードアップ
6844 ワード
現在、ウェブデザインのjavascript技術の応用がますます多くなり、ブラウザのJavascriptエンジンの運行速度も各ブラウザの性能を競う重要な指標となっている.各ブラウザメーカーはブラウザの速度がもっと速いと主張し、現存する競争態勢をかき回したいと考えている.IE8ブラウザのJavascriptの実行速度はIE 7およびIE 6に比べて大きく向上したが、Webkitエンジンのブラウザに比べて一定の差があり、昨年のZDNET JavascriptテストでChromeブラウザが際立っており、Firefox、Safari、マイクロソフトのIEブラウザを一挙に破った.しかし、IEブラウザの比較的膨大な使用者のため、IEブラウザのjavascriptをスピードアップする必要があります.
ブラウザが実行期間中にスクリプトを内側から外側に実行する場合、スクリプトから最も遠いグローバルオブジェクトは、いくつかの役割ドメインを越えてアクセスする可能性が高いことを知っています.しかし、IEブラウザでは、最内層から最外層までの時間が他より多くかかります.加えてjavascriptは接着言語であり、DOMペアを呼び出して私たちのほとんどの選択を完了する必要があります.最も有名なのは選択要素(document.getElementById,document.getElementsByTagName,docuement.evaluate,document.querySelector)、作成要素(document.createElement)、その他documentである.body,document.defaultView.getComputedStyleなどは、documentオブジェクトを頻繁に呼び出すが、documentはwindowオブジェクトの下にあるため、この道のりはさらに遠い.スピードアップするには、ローカル変数に保存しなければなりません.そのたびに、長い旅を省くことができます.この技術の運用は明らかにjQueryのソースコードに現れている.
Windowsを閉パッケージに転送すると、毎回Windowsを外に探すのを省くことができます.
他のクラスライブラリを見てみましょう
しかし、クラスライブラリを導入しなかったら、IEのjavascriptをもっと速く走らせたら?変数で保存しますか?ある海外のブログですごいハイジャック技術を見て、竜を盗んで鳳を回してグローバル変数documentを局所変数に変えた.
スピードアップ技術を運用した後:
テストして、スピードアップ技術を使った後で、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
さらに拡張して、より多くのグローバル変数またはグローバルメソッドを局所化することができます.しかし、FFはそれを使用するとエラーが発生し、chromeは遅くなり、他のブラウザは明らかではありません.
ブラウザが実行期間中にスクリプトを内側から外側に実行する場合、スクリプトから最も遠いグローバルオブジェクトは、いくつかの役割ドメインを越えてアクセスする可能性が高いことを知っています.しかし、IEブラウザでは、最内層から最外層までの時間が他より多くかかります.加えてjavascriptは接着言語であり、DOMペアを呼び出して私たちのほとんどの選択を完了する必要があります.最も有名なのは選択要素(document.getElementById,document.getElementsByTagName,docuement.evaluate,document.querySelector)、作成要素(document.createElement)、その他documentである.body,document.defaultView.getComputedStyleなどは、documentオブジェクトを頻繁に呼び出すが、documentはwindowオブジェクトの下にあるため、この道のりはさらに遠い.スピードアップするには、ローカル変数に保存しなければなりません.そのたびに、長い旅を省くことができます.この技術の運用は明らかにjQueryのソースコードに現れている.
(function( window, undefined ) {
// Define a local copy of jQuery
var 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 object
window.jQuery = window.$ = jQuery;
})(window);Windowsを閉パッケージに転送すると、毎回Windowsを外に探すのを省くことができます.
他のクラスライブラリを見てみましょう
//Raphael
window.Raphael = (function () {
var separator = /[, ]+/,
elements = /^(circle|rect|path|ellipse|text|image)$/,
doc = document,
win = window,
//************ **************//dojo
d.global = this;//Ext
DOC = 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 doc
var document //
doc = document // ，document undefined
document = doc // window.undefined = undefined ， document ，javascript ，eval 。
var doc = document;
eval('var document = doc'); IE ， IE 。
/*@cc_on
var doc = document;
eval('var document = doc');
@*/ ，window ， ？
/*@cc_on
eval((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>