Meilleures pratiques HTML5 pour rendre les applications Web plus rapides

Présentation

Cet article se concentre sur la façon d'utiliser pleinement HTML5 et CSS pour rendre les applications Web plus fluides.

Astuce 1 : Utilisez le stockage Web au lieu des cookies

Le plus gros inconvénient des cookies est que toutes les données des cookies conformes aux règles seront transportées dans chaque requête HTTP. Cela augmentera le temps de réponse des requêtes, en particulier les requêtes XHR. Il est préférable d'utiliser sessionStorage et localStorage au lieu des cookies en HTML5.

Cette méthode alternative peut stocker les données localement dans la zone locale de l'utilisateur de manière permanente ou pendant la durée de la session. Les données ne seront pas transférées avec la requête HTTP. Nous préférons donc utiliser le stockage Web et n'utilisons que les cookies comme alternative.

Astuce 2 : utilisez la transition CSS au lieu de l'animation JavaScript

// 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;
}

La transition CSS peut apporter de meilleures performances, moins de code et une maintenance et une compréhension plus faciles.

Astuce 3 : Utilisez la base de données client au lieu de la demande du serveur

Web SQL Database et IndexedDB offrent aux navigateurs des capacités de stockage de bases de données. De nombreux scénarios d'application peuvent être migrés vers des bases de données client pour réduire le nombre de requêtes du serveur

. LocalStorage et sessionStorage sont plus rapides que les bases de données client dans le stockage de données simples et peuvent être utilisés pour implémenter certains états simples et enregistrer la progression

. Lorsqu'un composant doit gérer des centaines de données (comme une liste d'amis) et prendre en charge la recherche, le filtrage et le tri des utilisateurs, le stockage d'une copie des données dans la base de données client peut réduire efficacement le nombre de requêtes HTTP. Tutoriel Web SQL Database pour des conseils détaillés.

Astuce 4 : Utilisez l'API native JavaScript

Avec la popularité des versions supérieures de JavaScript, de nombreuses nouvelles API ont été ajoutées, comme le prototype Array, qui peut être utilisé directement dans la plupart des navigateurs. Par exemple :

. Habituellement, ces méthodes natives sont plus rapides que l'écriture manuelle de boucles :

// 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.
var linksList = document.querySelector('#links');
var links = [];
['html5', 'css3', 'webgl'].forEach(function (value) {

  links.push(value.link('http://google.com/search?btnI=1&q=' + value + ' spec'));
});
linksList.innerHTML = links.join('');

// return a new array of all mathematical constants under 2
[3.14, 2.718, 1.618].filter(function (number) {
  return number < 2;
});

// you can also use these extras on other collections link nodeLists
[].forEach.call(document.querySelectorAll('section[data-bucket]'),
  function (elem, i) {
    localStorage['bucket' + i] = elem.getAttribute('data-bucket');
});

L'utilisation de JSON.parse() natif est plus efficace et plus sûre que json2.js.

for (var i = 0, len = arr.length; i < len; ++i) {
}

Le String.prototype.trim natif est également un bon exemple. Ces fonctions ne sont pas en HTML5 et devraient être largement utilisées

. Astuce 5 : utilisez non seulement le manifeste de cache pour les applications hors ligne, mais également pour les sites Web en ligne

Les sites tels que les systèmes de gestion backend peuvent améliorer considérablement les performances en utilisant le cache.

Le manifeste de cache présente certains avantages par rapport au paramètre Expires : il déclare clairement les fichiers qui doivent être mis en cache, le navigateur peut les optimiser et ils peuvent avoir été téléchargés localement avant que vous les utilisiez

. La structure de base de la page peut être considérée comme un modèle. Le contenu affiché change avec les données. La structure HTML modélisable est mise en cache via cache.manifest, et le contenu est mis à jour après avoir obtenu les données JSON du serveur

<.> ​Consultez le didacticiel sur le cache de l'application pour des instructions détaillées.

Astuce 6 : Activez l'accélération matérielle pour améliorer l'expérience visuelle

Certains navigateurs peuvent utiliser l'accélération GPU pour rendre les animations à haute vitesse plus fluides. Firefox Minefield, IE9 et Safari ont affirmé implémenter l'accélération matérielle. .Mieux c'est.

Lorsque l'accélération matérielle est prise en charge et activée, l'animation, la rotation, la mise à l'échelle et l'opacité seront définitivement plus fluides. Toutes les opérations réelles se dérouleront sur le GPU sans redessiner le contenu. Cependant, il convient de noter que toute opération affectant la mise en page réduira la mise en page. vitesse.

Astuce 7 : Utilisez des Web Workers pour effectuer des opérations qui nécessitent beaucoup de ressources CPU

Les Web Workers présentent deux avantages : 1) Rapides 2) Ne bloquent pas la réponse du navigateur. Cliquez sur la diapositive du Web Worker pour afficher plus d'informations.

. Quelques scénarios d'utilisation possibles des web Workers :

Formatage du texte long

• 
  

  Mise en évidence de la syntaxe

• 
  

  Traitement d'images

• 
  

  Synthèse d'images

• 
  

  Traitement de grands tableaux

• Astuce 8 : Attributs du formulaire HTML5 et types d'entrée

HTML5 ajoute une série de types d'entrée, notamment la recherche, le numéro de téléphone, l'URL, l'e-mail, la date et l'heure, la date, le mois, la semaine, l'heure, le nombre, la plage, la couleur, etc. Utilisez des fonctions natives dans les navigateurs prenant en charge ces fonctions et utilisez le plug-in js. ins en complément.

Des éléments tels que l'espace réservé, les éléments obligatoires et le modèle peuvent améliorer considérablement la convivialité et les performances de la page.

​Cliquez sur les informations du formulaire HTML5 pour afficher plus d'informations.

Astuce 9 : Utilisez CSS3 pour réduire l'utilisation d'images

La réduction des images peut réduire les requêtes HTTP, réduire la taille de la page et faciliter la maintenance. Les attributs couramment utilisés sont les suivants :

. dégradés linéaires et radiaux

• 
  

  rayon de frontière

• 
  

  boîte-ombre

• 
  

  rgba

• 
  

  transformer

• 
  

  masque css

• Les scénarios d'utilisation courants incluent : des boutons polis via des dégradés, reproduire de nombreux autres effets

Astuce 10 : Utilisez WebSocket au lieu de XHR pour offrir une interaction plus rapide et moins de bande passante

WebSockets est conçu pour Comet. Son utilisation pour implémenter Comet apporte plus d'avantages que XHR.

Lien original : http://www.html5rocks.com/en/tutorials/speed/quick/

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!