js Optimisation des performances Comment charger vos pages JavaScript plus rapidement

Assurez-vous que le code est aussi concis que possible

Ne comptez pas sur JavaScript pour tout. N'écrivez pas de scripts répétitifs. Considérez JavaScript comme un outil de bonbons, juste pour l'embellissement. N'ajoutez pas beaucoup de code JavaScript à votre site Web. Utilisez-le uniquement lorsque cela est nécessaire. Utilisez-le uniquement s’il peut réellement améliorer l’expérience utilisateur.

Réduire l'accès au DOM

Utiliser JavaScript pour accéder aux éléments du DOM est simple et le code est plus facile à lire, mais il est lent. Voici quelques points clés : Limitez l'utilisation de JavaScript pour modifier la mise en page des pages Web et mettez en cache les références aux éléments consultés. Parfois, lorsque votre site repose sur des modifications importantes du DOM, vous devriez envisager de limiter votre balisage. C'est une bonne raison de passer au HTML5 et d'abandonner les anciens XHTML et HTML4. Vous pouvez vérifier le nombre d'éléments DOM en tapant document.getElementsByTagName('*').length dans la console du plug-in Firebug.

Code compressé

Pour fournir des pages JavaScript compressées, le moyen le plus efficace est d'abord d'utiliser un outil de compression JavaScript pour compresser votre code. Cet outil de compression peut compresser les noms de variables et de paramètres. est ensuite fourni, en utilisant la compression gzip.

Oui, je n'ai pas compressé mon main.js, mais vous devriez vérifier s'il existe des plugins jQuery qui ne sont pas compressés et n'oubliez pas de compresser. Ci-dessous, j'ai répertorié quelques options de compression.

　◆ Outil de compression YUI (utilisé par l'équipe de développement jQuery), Guide du débutant

(http://www.slideshare.net/nzakas/extreme-JavaScript-compression-with-yui - compresseur), le deuxième guide (http://vilimpoc.org/research/js-speedup/) et le site officiel (http://developer.yahoo.com/yui/compressor/).

　◆ Dean Edwards Packer(http://dean.edwards.name/packer/)

　◆ JSMin(http://crockford.com/JavaScript/jsmin)

Compression GZip : L'idée sous-jacente est de réduire le temps nécessaire au transfert des données entre le navigateur et le serveur. Après avoir raccourci le temps, vous obtenez un fichier intitulé Accept-Encoding: gzip,deflate. Cependant, cette méthode de compression présente certains inconvénients. Il consomme des ressources processeur côté serveur et côté client (pour la compression et la décompression), ainsi que de l'espace disque.

Évitez eval() : Bien que parfois eval() puisse apporter des gains d'efficacité en termes de temps, son utilisation est définitivement une mauvaise approche. eval() donne à votre code un aspect sale et échappera à la compression par la plupart des outils de compression.

Outils pour accélérer le chargement de JavaScript : Lab.js

Il existe de nombreux excellents outils pour accélérer le chargement de JavaScript. Un outil qui mérite d’être mentionné est Lab.js.

Avec LAB.js (Loading and Blocking JavaScript), vous pouvez charger des fichiers JavaScript en parallèle, accélérant ainsi le processus de chargement global. De plus, vous pouvez définir un certain ordre pour les scripts à charger, ce qui garantit l'intégrité des dépendances. De plus, le développeur revendique une vitesse multipliée par 2 sur son site Web.

Utilisez un CDN approprié

De nombreuses pages Web utilisent désormais un réseau de diffusion de contenu (CDN). Cela améliore votre mécanisme de mise en cache car tout le monde peut l'utiliser. Cela vous permet également d'économiser de la bande passante. Vous pouvez facilement envoyer une requête ping ou utiliser Firebug pour déboguer ces serveurs afin de déterminer où vous pouvez accélérer les données. Lorsque vous choisissez un CDN, tenez compte de la localisation des visiteurs de votre site Web. N'oubliez pas d'utiliser des référentiels publics autant que possible.

Plusieurs solutions CDN pour jQuery :

　◆ http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js——Google Ajax , voir http://code.google.com/apis/libraries/devguide.html#Libraries pour plus d'informations sur davantage de bibliothèques.

　◆ http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js——Le CDN de Microsoft

　•http://code.jquery com. /jquery-1.4.2.min.js - Edgecast (mt).

Charger JavaScript en fin de page

C'est une très bonne pratique si vous vous concentrez sur les utilisateurs qui n'ont pas quitté votre page en raison d'une connexion Internet lente. La facilité d'utilisation et les utilisateurs passent en premier, JavaScript vient en dernier. Cela peut être douloureux, mais vous devez vous préparer au fait que certains utilisateurs désactivent JavaScript. Vous pouvez mettre du JavaScript dans l'en-tête qui doit être chargé, mais uniquement s'il est chargé de manière asynchrone.

Charger le code de suivi de manière asynchrone

Ceci est très important. La plupart d'entre nous utilisent Google Analytics pour obtenir des statistiques. C'est bien. Regardez maintenant où vous placez votre code de suivi. Est-ce dans l'en-tête ? Ou utilise-t-il document.write ? Ensuite, si vous n'utilisez pas Google Analytics pour suivre votre code de manière asynchrone, vous n'avez qu'à vous en prendre à vous-même.

Voici à quoi ressemble le code de suivi asynchrone de Google Analytics. Nous devons admettre qu'il utilise DOM au lieu d'utiliser document.write, ce qui pourrait mieux vous convenir. Il peut détecter certains de ces événements avant le chargement de la page Web, ce qui est très important. Pensez maintenant à cette situation, votre page n'a même pas été chargée et tous les utilisateurs ont fermé la page. Vous avez trouvé une solution aux pages vues manquantes

var _gaq = _gaq || []; 
_gaq.push(['_setAccount', 'UA-XXXXXXX-XX']); 
_gaq.push(['_trackPageview']); 
(function() { 
var ga = document.createElement('script'); ga.type = 'text/JavaScript'; ga.async = true; 
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.m.sbmmt.com/ga.js'; 
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); 
})();

Vous n'utilisez pas Google Analytics Ce n'est pas un problème, la plupart des fournisseurs d'analyses actuels vous permettent d'utiliser le suivi asynchrone.

　Optimisation Ajax

Les requêtes Ajax ont un impact significatif sur les performances de votre site web. Ci-dessous, je présente plusieurs points clés sur l'optimisation Ajax.

Cachez votre ajax

Jetez d'abord un œil à votre code. Votre ajax peut-il être mis en cache ? Oui, il repose sur des données, mais la plupart de vos requêtes ajax devraient pouvoir être mises en cache. Dans jQuery, vos requêtes sont mises en cache par défaut, à l'exclusion des types de données script et jsonp.

Utilisez GET pour les requêtes Ajax

Les requêtes de type POST doivent envoyer deux paquets TCP (envoyer d'abord l'en-tête, puis envoyer les données). Les requêtes de type GET ne doivent envoyer qu’un seul paquet (cela peut dépendre du nombre de cookies dont vous disposez). Ainsi, lorsque votre URL fait moins de 2 Ko et que vous souhaitez demander des données, vous pouvez tout aussi bien utiliser GET.

Utiliser ySlow

En matière de performances, ySlow est à la fois simple et extrêmement efficace. Il note votre site Web, indiquant quels domaines doivent être corrigés et sur lesquels se concentrer.

Autre astuce : emballez votre JavaScript dans un fichier PNG

Imaginez : ajoutez votre JS et CSS à la fin de l'image, puis utilisez CSS pour la recadrer, via une requête HTTP pour obtenir toutes les informations dont vous avez besoin dans l'application.

J'ai récemment découvert cette méthode. Il regroupe essentiellement vos données JavaScript/css dans un fichier PNG. Après cela, vous pouvez le décompresser, utilisez simplement getImageData() de l'API Canvas. En plus, c'est très efficace. Vous pouvez compresser environ 35 % de plus sans réduire les données. Et c'est une compression sans perte ! Je dois souligner que pour les scripts plus volumineux, vous sentirez qu'il y a un "certain" temps de chargement pendant que l'image est pointée vers le canevas et que les pixels sont lus.

Pour plus d'optimisation des performances js, veuillez prêter attention au site Web PHP chinois pour des articles connexes sur la façon de charger vos pages JavaScript plus rapidement !