jQueryを最適化する方法の詳細な例

最近のjqueryプラグインでは、jQueryのresize()メソッドを使用して、ユーザーがブラウザウィンドウのサイズを変更したことを検出し、関連するコードを実行しました。

ウィンドウのサイズを変更するとき、さまざまなブラウザーのパフォーマンス消費が異なることに気づきました。

IE、Safari、Chromeでは調整ウィンドウ変更中にsizeイベントが実行されています

Operaでは処理中に何度もresizeイベントが発生しますが、調整完了時に実行されます。

Firefoxは調整完了後にのみイベントを実行します。

そして、私たちが望んでいるのは明らかに、調整が完了した後にイベントを実行することです。幸いなことに、これを調整できる方法がいくつかあります。

jQuery 遅延プラグイン

jQuery スロットル / デバウンス: 少ない方が良い場合もあります!

(function(b,c){var $=b.jQuery||b.Cowboy||(b.Cowboy={}),a;$.throttle=a=function(e,f,j,i){var h,d=0;if(typeof f!=="boolean"){i=j;j=f;f=c}function g(){var o=this,m=+new Date()-d,n=arguments;function l(){d=+new Date();j.apply(o,n)}function k(){h=c}if(i&&!h){l()}h&&clearTimeout(h);if(i===c&&m>e){l()}else{if(f!==true){h=setTimeout(i?k:l,i===c?e-m:e)}}}if($.guid){g.guid=j.guid=j.guid||$.guid++}return g};$.debounce=function(d,e,f){return f===c?a(d,e,false):a(d,f,e!==false)}})(this);

使用方法:

function log( event ) {
  console.log( $(window).scrollTop(), event.timeStamp );
};

// Console logging happens on window scroll, WAAAY more often
// than you want it to.
$(window).scroll( log );

// Console logging happens on window scroll, but no more than
// once every 250ms.
$(window).scroll( $.throttle( 250, log ) );

// Note that in jQuery 1.4+ you can unbind by reference using
// either the throttled function, or the original function.
$(window).unbind( 'scroll', log );

JS コード

(function($,sr){

// debouncing function from John Hann
// http://unscriptable.com/index.php/2009/03/20/debouncing-javascript-methods/
var debounce = function (func, threshold, execAsap) {
var timeout;

return function debounced () {
var obj = this, args = arguments;
function delayed () {
if (!execAsap)
func.apply(obj, args);
timeout = null;
};

if (timeout)
clearTimeout(timeout);
else if (execAsap)
func.apply(obj, args);

timeout = setTimeout(delayed, threshold || 100);
};
}
// smartresize
jQuery.fn[sr] = function(fn){ return fn ? this.bind('resize', debounce(fn)) : this.trigger(sr); };

})(jQuery,'smartresize');
// usage:
$(window).smartresize(function(){
// code that takes it easy...
});

要約すると、最初のものはシンプルで理解しやすいものであり、2 番目のものは3 番目のタイプはより包括的で、コードも少なく、3 番目のタイプはほぼ同じです。

javascript-resize-performance/

2 つ目: benalman.com/projects/jquery-throttle-debounce-plugin/

3 つ目: www.paulirish.com/2009/throttled-smartresize-jquery-event- handler/

JavaScript コード: unscriptable.com/2009/03/20/debouncing-javascript-methods/

将来的には、スクロールやフォームのサイズ変更のための JavaScript の実行数を減らすために、このメソッドを使用することが最善です。等注意深く覚えておいてください。

以上がjQueryを最適化する方法の詳細な例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。