Article de Avril 2014
Différences entre async et defer en HTML5
La balise HTML script permet de définir quand le code JavaScript dans votre page est exécuté. Les attributs HTML5 async et defer sont à présent supportés par Firefox, Chrome, Safari et Internet Explorer 10+ (sinon ils sont ignorés) et permettent de modifier le comportement de chargement des scripts. Voici de courtes explications sur les différences de chaque appel.
| <script> | - | - | - | - | - |
|---|---|---|---|---|---|
| Analyse HTML | Chargement... | Exécution JS | Analyse HTML | ||
| - | - | - | - | - | |
| <script defer> | - | - | - | - | - |
| Analyse HTML | Analyse + Chargement... | Analyse HTML | Exécution JS | ||
| - | - | - | - | - | |
| <script async> | - | - | - | - | - |
| Analyse HTML | Analyse + Chargement... | Exécution JS | Analyse HTML | ||
| - | - | - | - | - | |
- Chargement...
- Exécution JS
- Analyse HTML
Structurer le JavaScript d'un site sans Framework
On me demande souvent quelle est la structure JavaScript que j'utilise pour développer mes sites web. C'est une question à laquelle je ne sais jamais si un simple « jQuery » suffit ou si l'on s'attend à m'entendre répondre « MooTools », « jQuery UI », « Backbone », « Knockout », « AngularJs » ou je ne sais quelle autre composant/librairie/framework JavaScript Front-end extraordinaire !
Au delà du fait que l'utilisation de ses ressources précédemment citées dépend du fait que l'on souhaite réaliser un site web ou un outil web ou une application web etc. je finis toujours par expliquer que j'utilise ma propre architecture JavaScript à travers toutes les différentes pages d'un site web.
Je vais donc vous livrer à travers cet article l'architecture JavaScript que j'ai adopté. Afin de la comprendre pas à pas, j'utiliserai comme fil conducteur la réalisation d'un site vitrine. Ma façon de structurer le JavaScript client n'est pas absolue mais elle vous permettra de comprendre la logique derrière mes différents sites dont vous trouverrez les sources sur GitHub ou même du moteur NodeAtlas.