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.

// 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 :

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

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

• 
  

  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

• 
  

  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!