Exemples détaillés sur la façon d'optimiser jQuery

Dans un récent plug-in jquery, j'ai utilisé la méthode resize() dans jQuery pour détecter quand l'utilisateur redimensionne la fenêtre du navigateur et exécute le code associé.

J'ai remarqué que la consommation de performances des différents navigateurs est différente lors du redimensionnement de la fenêtre.

IE, Safari et Chrome ont exécuté des événements de redimensionnementpendant les changements de fenêtre d'ajustement

Opera a eu de nombreux événements de redimensionnement au cours de ce processus, mais exécuté en fin de réglage.

Firefox n'exécute l'événement qu'une fois l'ajustement terminé.

Ce que nous voulons, c'est évidemment exécuter l'événement après avoir terminé l'ajustement. Heureusement, il existe plusieurs façons d’ajuster cela.

Plug-in paresseux jQuery

Accélérateur / anti-rebond jQuery : parfois, moins c'est plus !

(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);

Utilisation :

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 );

Code 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...
});

Pour résumer, le premier est simple et facile à comprendre, le second est plus complet et contient moins de code, et le troisième est presque le même.

javascript-resize-performance/

Deuxième : benalman.com/projects/jquery-throttle-debounce-plugin/

Troisième : www.paulirish.com/2009/. throttled-smartresize-jquery-event-handler/

Code JavaScript : unscriptable.com/2009/03/20/debouncing-javascript-methods/

Pour le défilement et l'ajustement dans le futur Taille du formulaire , etc. Il est préférable d'utiliser cette méthode pour réduire le nombre d'exécutions JavaScript. Rappelez-vous soigneusement.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!