Detaillierte Beispiele zur Optimierung von jQuery

In einem aktuellen jquery-Plug-in habe ich die resize()-Methode in jQuery verwendet, um zu erkennen, wenn der Benutzer die Größe des Browserfensters ändert, und um entsprechenden Code auszuführen.

Mir ist aufgefallen, dass der Leistungsverbrauch verschiedener Browser bei der Größenänderung des Fensters unterschiedlich ist.

IE, Safari und Chrome haben während der Anpassungsfensteränderungen Größenänderungsereignisse ausgeführt.

Opera hat während dieses Vorgangs viele Größenänderungsereignisse erlebt, die jedoch ausgeführt wurden am Ende der Anpassung.

Firefox führt das Ereignis erst aus, nachdem die Anpassung abgeschlossen ist.

Was wir natürlich wollen, ist, das Ereignis nach Abschluss der Anpassung auszuführen. Glücklicherweise gibt es mehrere Möglichkeiten, dies anzupassen.

jQuery Lazy Plug-in

jQuery Throttle/Debounce: Manchmal ist weniger mehr!

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

Verwendung:

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-Code

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

Zusammenfassend lässt sich sagen, dass der erste einfach und leicht zu verstehen ist, der zweite umfassender ist und weniger Code enthält und der dritte fast gleich ist.

javascript-resize-performance/

Zweitens: benalman.com/projects/jquery-throttle-debounce-plugin/

Drittens: www.paulirish com/2009/ drosselte-smartresize-jquery-event-handler/

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

Für zukünftiges Scrollen und Anpassen der Formulargröße usw. Es ist am besten, diese Methode zu verwenden, um die Anzahl der JavaScript-Ausführungen zu reduzieren. Denken Sie sorgfältig daran.

Das obige ist der detaillierte Inhalt vonDetaillierte Beispiele zur Optimierung von jQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!