How to really defer loading javascript
mardi 24 septembre 2013 à 14:03 Sebsauvage, le 22/09/2013 à 15:30
Un moyen de différer le chargement du Javascript (qui semble meilleur que defer/async). à tester...
(Permalink)
Tiger-222, le 23/09/2013 à 20:08
via http://sebsauvage.net/links/?YAgEBA
(Permalink)
jeekajoo, le 24/09/2013 à 14:03
Une alternative à defer/async pour différer le chargement javascript.
Akamai fait un truc similaire dans son produit de front end optimization nommé 'blaze', sauf que le JS qui fait le taff de defering pèse 32K minifié. Les appels JS externes sont prefixés à la volée (par leur "CDN") pour que le navigateur les ignore. Le script de deferring, situé dans le HEAD mais dont la fonction est appelée avant </body>, les lancent ensuite dans l'ordre grâce à une boucle. Cela doit expliquer la taille du script. Le principal intérêt de leur produit c'est qu'on a pas besoin de modifier sa webapp... C'est bien pour les clients qui ont de l'argent donc et/ou qui n'arrivent pas à faire appliquer les best practices par la R&D...
AVANT :
<HTML>
<BODY>
<SCRIPT src=”1.js”>
<SCRIPT src=”2.js”>
<SCRIPT src=”3.js”>
Welcome to my page
<img src=”1.jpg”>
</BODY>
</HTML>
APRES :
<HTML>
<HEAD><script> //FEO scripts prefixed with “blz” </script></HEAD>
<BODY>
<SCRIPT blzsrc=”ren-1.js”>
<SCRIPT blzsrc=”ren-2.js”>
<SCRIPT blzsrc=”ren-3.js”>
Welcome to my page
<img src=”image1.jpg”>
<script>runAsyncScripts()</script>
</BODY>
</HTML>
(Permalink)
Un moyen de différer le chargement du Javascript (qui semble meilleur que defer/async). à tester...
(Permalink)
Tiger-222, le 23/09/2013 à 20:08
via http://sebsauvage.net/links/?YAgEBA
(Permalink)
jeekajoo, le 24/09/2013 à 14:03
Une alternative à defer/async pour différer le chargement javascript.
Akamai fait un truc similaire dans son produit de front end optimization nommé 'blaze', sauf que le JS qui fait le taff de defering pèse 32K minifié. Les appels JS externes sont prefixés à la volée (par leur "CDN") pour que le navigateur les ignore. Le script de deferring, situé dans le HEAD mais dont la fonction est appelée avant </body>, les lancent ensuite dans l'ordre grâce à une boucle. Cela doit expliquer la taille du script. Le principal intérêt de leur produit c'est qu'on a pas besoin de modifier sa webapp... C'est bien pour les clients qui ont de l'argent donc et/ou qui n'arrivent pas à faire appliquer les best practices par la R&D...
AVANT :
<HTML>
<BODY>
<SCRIPT src=”1.js”>
<SCRIPT src=”2.js”>
<SCRIPT src=”3.js”>
Welcome to my page
<img src=”1.jpg”>
</BODY>
</HTML>
APRES :
<HTML>
<HEAD><script> //FEO scripts prefixed with “blz” </script></HEAD>
<BODY>
<SCRIPT blzsrc=”ren-1.js”>
<SCRIPT blzsrc=”ren-2.js”>
<SCRIPT blzsrc=”ren-3.js”>
Welcome to my page
<img src=”image1.jpg”>
<script>runAsyncScripts()</script>
</BODY>
</HTML>
(Permalink)