DIFFéREZ L'EXéCUTION DES JAVASCRIPTS

illus

script : onDomReady v5.0
langage : javascript
catégorie : fragment
usage : Assainir son code et accélérer l'affichage des pages, en reportant l'exécution des script jusqu'au moment ou le DOM est prêt. Fonctionne aussi en duo avec des librairies telles que jQuery, pour augmenter encore leur souplesse et leurs performances.
tags : jQuery - optimisation - technique

Concept

La vitesse d'affichage d'une page est devenue un critère de grande importance dans le développement web. Vu sous cet angle, javascript comporte un terrible écueil : le chargement ou l'éxécution d'un script suspend l'affichage de la structure de la page. Ce sont parfois de précieuses secondes qui peuvent être perdues de la sorte, venant ruiner l'ergonomie d'un site qui peut par ailleurs être très bien conçu.

onDomReady apporte une (part de) solution à ce problème en permettant de n'exécuter des scripts qu'une fois que la scructure du document (le DOM) est prête. Les images et feuilles de styles, vidéos (etc.) continuent à être chargées en parallèle ; ça ça n'est pas un problème.

En outre, onDomReady peut être couplé avec de puissantes librairies javascript telles que jQuery, afin de permettre l'utilisation de leur syntaxe avant même qu'elles aient été chargées !

Intégration

Vous intégrerez onDomReady dans votre page comme n'importe quel javascript. Veillez simplement à le placer avant l'importation des autres scripts.
Comme il est très léger, vous pourrez le glisser dans le <head> de la page sans que celà constitue une véritable gène. (Mais dans un optique de performances, le plus tard sera toujours le mieux.)

<script src="onDomReady.min.js" type="text/javascript"></script>

Code

Usage élémentaire

Pour programmer l'exécution d'une fonction, il suffira de la passer comme argument de onDomReady :

onDomReady( function(){ doSomeThing(); } );

C'est tout ! La fonction sera déclenchée aussitôt que le DOM sera prêt.

Couplage avec une librairie javascript

onDomReady peut également être couplé avec des librairies très puissantes telles que jQuery, afin d'assouplir encore le fonctionnement de celles-ci tout en présenvant la rapidité d'affichage de la page.
L'idée est de reporter l'exécution des scripts au moment où seront prêts non seulement le DOM, mais encore la librairie elle-même.

Le code suivant permet par exemple de programmer des fonctions qui ne s'exécuteront pas tout le temps que le DOM et jQuery ne seront pas prêts. 

onDomReady( "jQuery" ); // créer l'alias
onDomReady( function(){ doSomeThing(); } ); // programmer l'exécution d'une fonction

De cette façon, vous pourrez charger jQuery en toute fin de votre page (pour ne pas ralentir l'affichage), mais néanmoins programmer des fonctions qui font appel à sa syntaxe avant qu'il n'ait été chargé.

Plus fort encore, en créant un alias, vous pourrez même directement utiliser la syntaxe de jQuery pour programmer l'exécution des scripts. On pourra donc faire des choses comme celle-ci (qui ne sont pas très jolies j'en conviens, mais qui permettent le codage dans des conditions de survie !) :

<html>
	<head>
    ...
    <script src="onDomReady.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    	onDomReady( "$" ); // crée un alias de onDomReady au nom de jQuery
    </script>
    </head>
 
    <body>
    ...
    <!-- pour une raison ou pour une autre, il ne vous est pas possible de place ailleurs le script suivant : -->
    <script type="text/javascript">
    	$(function(){ ... }); // jQuery n'a pas encore été chargé, pourtant on peut déjà faire appel à sa syntaxe de report
    </script>
    ...
    <script src="jquery.js" type="text/javascript"></script>
    </body>
</html>

Téléchargement

Vous trouverez dans ce zip le script en version minifiée (>0.3Ko) et en version commentée. 

compatibilité :
Internet Explorer (5.5+) Firefox Safari Opera Google Chrome
(autres navigateurs non testés)

Commentaires