Exemple d'analyse de code sur la façon d'améliorer les performances frontales du site Web en HTML5

1. Utilisez le stockage Web pour remplacer les cookiess

Le plus gros problème avec les cookies est qu'ils suivent chaque demande. En HTML5, sessionStorage et localStorage sont utilisés pour stocker les données utilisateur directement sur le client, ce qui peut réduire la quantité de données dans les requêtes HTTP. De plus, le stockage Web fournit également des API pour manipuler les données, contrairement aux cookies que vous devez écrire vous-même.

 // if localStorage is present, use that
 if (('localStorage' in window) && window.localStorage !== null) {
 
   // easy object property API
   localStorage.wishlist = '["Unicorn","Narwhal","Deathbear"]';
 
 } else {
 
   // without sessionStorage we'll have to use a far-future cookie
   //   with document.cookie's awkward API :(
   var date = new Date();
   date.setTime(date.getTime()+(365*24*60*60*1000));
   var expires = date.toGMTString();
   var cookiestr = 'wishlist=["Unicorn","Narwhal","Deathbear"];'+
                   ' expires='+expires+'; path=/';
   document.cookie = cookiestr;
 }

2. Utilisez l'animation CSS au lieu de l'animation JavaScript

Utilisez l'animation CSS au lieu de l'animation JS. Parce que certaines machines peuvent effectuer une accélération GPU sur les animations CSS, et également réduire les requêtes de fichiers JS.

 p.box {
   left: 40px;
   -webkit-transition: all 0.3s ease-out;
      -moz-transition: all 0.3s ease-out;
        -o-transition: all 0.3s ease-out;
           transition: all 0.3s ease-out;
 }
 p.box.totheleft { left: 0px; }
 p.box.totheright { left: 80px; }

3. Utilisez une base de données client

L'utilisation d'une base de données client telle que Web SQLDatabase ou IndexedDB peut réduire le nombre de requêtes HTTP. Les données telles que les listes de régions et les listes d'amis peuvent être stockées directement sur le client. Parfois, vous pouvez également utiliser sessionStorage et localStorage, car de manière générale, ces types de comparaisons sont plus rapides.

4. Utilisez directement les nouvelles fonctionnalités de JS

JS a beaucoup développé Par exemple, Array a introduit de nombreuses nouvelles méthodes, telles que map, filter, forEach, etc. De plus, JSON est également directement intégré dans le navigateur, et il n'est pas nécessaire d'introduire le fichier json2.js.

// Give me a new array of all values multiplied by 10.
 [5, 6, 7, 8, 900].map(function(value) { return value * 10; });
 // [50, 60, 70, 80, 9000]
 
 // Create links to specs and drop them into #links.
 ['html5', 'css3', 'webgl'].forEach(function(value) {
   var linksList = document.querySelector('#links');
   var newLink = value.link('http://google.com/search?btnI=1&q=' + value + ' spec');
   linksList.innerHTML +=  newLink;
 });
 
 // Return a new array of all mathematical constants under 2.
 [3.14, 2.718, 1.618].filter(function(number) {
   return number < 2;
 });
 // [1.618]
 
 // You can also use these extras on other collections like nodeLists.
 [].forEach.call(document.querySelectorAll(&#39;section[data-bucket]&#39;), function(elem, i) {
   localStorage[&#39;bucket&#39; + i] = elem.getAttribute(&#39;data-bucket&#39;);
 });

5. Cacher les balises HTML

Cache les fichiers HTML sur le client via la mise en cache. Cependant, ces fichiers HTML mis en cache n'ont qu'une structure et aucun contenu. Le contenu doit faire fonctionner des objets JSON via JS pour remplir les données dans la page. Ces fichiers HTML sont équivalents à des modèles.

6. Utiliser l'accélération matérielle

Les principaux navigateurs ont désormais activé l'accélération matérielle au niveau du GPU, qui peut être activée via certaines instructions ou hacks. Par exemple, lorsque vous utilisez une transformation ou une animation 3D en CSS, vous pouvez activer l'accélération matérielle GPU.

   .hwaccel { -webkit-transform: translateZ(0); }

7. Utilisez WebWorker pour effectuer des opérations gourmandes en CPU

Pour les opérations qui nécessitent des opérations fastidieuses ou gourmandes en CPU, utilisez WebWorker. Ce n'est pas seulement rapide, mais cela fonctionne également. en arrière-plan, n'affecte pas l'interaction normale du navigateur.

8. Utilisez les nouvelles fonctionnalités du formulaire

Le formulaire HTML a ajouté de nombreux nouveaux attributs, éléments et fonctions de validation. L'utilisation de ces nouvelles fonctionnalités peut réduire l'implication de JS et CSS.

9. Utilisez CSS3 pour remplacer les sprites CSS

L'utilisation de CSS3 peut obtenir l'effet de certains sprites CSS. Peut-être qu'environ 100 octets de CSS peuvent remplacer des sprites d'image 2K, et le nombre de requêtes est également. grand réduit.

Les effets spéciaux de CSS3 les plus couramment utilisés incluent : les coins arrondis, les dégradés, les ombres, la transparence, la déformation, les masques, etc.

10. Pour les applications en temps réel, utilisez WebSocket pour remplacer XHR

WebSocket a d'abord été conçu pour remplacer l'interrogation Ajax. Son avantage par rapport à Ajax est qu'il est léger et moins utilisé que la bande passante Ajax. . Selon certains rapports, WebSocket nécessite environ 30 % de transmission en moins qu'Ajax et est environ 35 fois plus rapide. Lorsqu'Ericsson a testé les performances de WebSocket, il a été constaté que l'utilisation de la commande ping consomme 3 à 5 fois plus que WebSocket, elle est donc très adaptée aux applications en temps réel.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!