google+javascriptbanktwitter@js_bankfacebook@jsbankrss@jsbank






JavaScript Performance Tips Si vous vous souciez de l'optimisation JavaScript, l'optimisation du langage JavaScript/AJAX applications sur vos pages Web, puis peut-être cette JavaScript Tutorial est la chose que vous recherchez. JavaScript article, Vous allez apprendre quelques astuces pour optimiser vos codes JavaScript donc courir plus vite.


Étiquette: JavaScript Performance, Performance Astuce, JavaScript optimisation, Une application Ajax

Gratuit iPage hébergement Web pour la première année MOMENT



Si vous êtes toujours à la recherche d'un fournisseur d'hébergement Web fiable avec des tarifs abordables, pourquoi vous ne prenez pas un peu de temps pour essayer iPage, seulement avec $1.89/month, inclus $500+ Crédits supplémentaires gratuites pour le paiement de 24 mois ($45)?

Plus de 1.000.000 de clients + existisng peuvent pas avoir tort, vraiment vous n'êtes pas aussi! Plus important encore, lorsque vous enregistrez l'hébergement web à iPage grâce à notre lien, nous allons être heureux de renvoyer un plein remboursement. C'est génial! Vous devriez essayer iPage hébergement web GRATUITEMENT maintenant! Et contactez-nous pour tout ce que vous devez savoir sur iPage.
Essayez iPage GRATUIT première année MOMENT

Nicholad Zakas, who wrote this book, recently spoke about JavaScript performance at Google; his presentation was called "Speed Up Your JavaScript" and it's available to view on Youtube.

In the presentation Nicholas covers areas rarely talked about; he takes a low-level approach by explaining what's happening behind the scenes when you do something as simple as creating or requesting a variable in JavaScript. It's not all conjecture though; he has a number of graphs comparing performance across browsers and then details the steps you can take to optimise your code, in order to protect yourself from less-than-satisfactory JavaScript implementations (IE comes to mind).

I'm not obsessed about performance by any means but I do think that the practices shared in his presentation should be followed to the letter. Speed and performance are hot topics on the client-side; our users demand fast and responsive applications/websites.

His advice:

Five key points emerged during the presentation:

  • Store out-of-scope variables in local variables.
  • Minimise property access.
  • Do as little as possible on each iteration of a loop.
  • Minimise document reflow by only changing the DOM when absolutely necessary.
  • Don't use inline styles unless you're animating.

Store out-of-scope variables in local variables

The idea behind this technique is to minimise the amount of work required to get at the variable you want. The further away it is (in the scope chain) the longer it's going to take to retrieve it. The performance cost is normally marginal but it's still a good practice. Here's an example:

/*--- scope[2] ---*/
 
/* jQuery library is defined up here */
 
var someModule = (function(){
 
    /*--- scope[1] ---*/
 
    var privateProp = 123;
 
    return function() {
 
        /*--- scope[0] ---*/
 
        var jQuery = jQuery; // Speeds up all references to jQuery
 
        /* Do stuff with jQuery */
 
    };
 
 
})();

With each new scope you're getting further and further away from the global scope, so it makes sense to create local variables pointing to global variables (or any variable higher up in the scope chain). Note that this is only worth doing if you're going to be referencing the higher variable more than once in the current scope.

Minimize property access

This is quite an obvious one; when you're going to be retrieving a property more than once you should assign its value to a local variable. For example, caching a method deepely embedded in an object:

var domGet = YAHOO.util.Dom.get;
 
var logo = domGet('logo');
var header = domGet('header');

Do as little as possible on each iteration of a loop

Loops are the first thing people consider when on the topic of performance. There are a few steps you should take to speed up any given loop. First, if at all possible, use a reverse loop; doing so means you can combine the control condition and any control variable changes:

/* Forward loop */
var i = 0;
while ( i < length ) {
    i++;
}
 
/* Reverse loop (faster) */
var i = length;
while (i--) {
    /* No need to increment; it's already been done in the control condition */
}

If you can't use a reverse loop then make sure to do as little as you can get away with on each iteration. Always cache the length property! If you're concerned about performance then don't use iteration-abstractions like jQuery's each or ECMA-262-5's Array.forEach().

Minimise document reflow by only changing the DOM when absolutely necessary

I found this particularly interesting; whenever you change the DOM, in any way, the document is "reflowed" (i.e. the browser re-draws it). This is something you want to avoid. As an example, if you want to change a bunch of things within a table you should first remove that table from the DOM (using parentElement.removeChild), make your changes, and then place it back in the DOM. You can retain a reference to its original previous sibling or parent in order to place it back in the same position:

var table = $('#some-table');
var parent = table.parent();
 
table.remove();
table.addLotsAndLotsOfRows();
parent.append(table);

Changing DOM properties or CSS styles will also cause the document to "reflow". E.g.

jQuery('a').css('color', 'red'); /* Causes multiple reflows! */
/* Only causes one reflow */
jQuery('<style type="text/css"> a { color: red; } </style>').appendTo('head');

I'm not advocating a new <style> tag for every new style - it's just an example.

Another useful technique is to build DOM structures outside of the DOM and then to insert them as one document fragment.

Don't use inline styles unless you're animating

This is really an extension of the last point; minimising document reflows. Instead of applying several styles to many elements just apply a class that's already defined somewhere in your CSS. Ideally inline styles should only be used for animating or for small simple changes.

So, instead of:

jQuery(elements).css({
    color: 'red',
    backgroundColor: 'yellow',
    border: '3px solid #000'
});

Do this:

jQuery(elements).addClass('important');

JavaScript par jour


Google Safe Browsing McAfee SiteAdvisor Norton SafeWeb Dr.Web