Écrire des applications HTML hautes performances-tutoriel HTML-php.cn

Comment améliorer les performances d'une page Web ?

La plupart des développeurs optimiseront via JavaScript et les images, via la configuration du serveur, la compression et la fusion de fichiers - même en ajustant CSS (fusion de petites images).

Un mauvais HTML est toujours ignoré, même s'il a toujours été le langage principal d'Internet.

Le HTML devient de plus en plus gros. La plupart des pages HTML des 100 meilleurs sites Web font environ 40 Ko. Amazon et Yahoo utilisent des milliers de pages HTML. Sur la page principale de youtube.com, il y a jusqu'à 3 500 éléments HTML.

Réduire la complexité du HTML et le nombre d'éléments sur une page n'améliore pas de manière significative le temps d'analyse - mais le HTML est un facteur essentiel dans la création de pages Web extrêmement rapides, s'adaptant à différents appareils et affectant le succès.
Dans cet article, vous apprendrez à écrire du HTML concis et propre, vous permettant de créer un site Web qui se charge rapidement et prend en charge plusieurs appareils, et qui sera facile à déboguer et à maintenir.

Il n'existe pas une seule façon d'écrire du code - en particulier du HTML. Ceci n’est qu’une expérience générale, mais ce n’est pas le seul bon choix.
　HTML, CSS et JavaScript

　HTML est un langage de balisage utilisé pour représenter la structure et le contenu.

HTML ne doit pas être utilisé pour afficher des styles et des styles. Ne mettez pas de texte dans les balises de titre (h1~h6) pour paraître « plus grand » ou n'utilisez pas d'éléments blockquotes uniquement pour l'indentation. Utilisez plutôt CSS pour modifier l’apparence et la disposition des éléments.

L'apparence par défaut des éléments HTML est obtenue grâce aux styles par défaut du navigateur : Firefox, Internet Explorer et Opera sont tous différents. Par exemple, dans Chrome, l'élément h1 est rendu par défaut à une taille de 32 pixels.

　 Trois principes de base :

Utilisez HTML pour exprimer la structure et CSS pour exprimer différents styles et thèmes. JavaScript pour répondre aux actions des utilisateurs.

Utilisez HTML, CSS si nécessaire et JavaScript si nécessaire. Par exemple : dans de nombreux cas, vous pouvez utiliser des formulaires HTML pour la validation et CSS ou SVG pour les animations.

Séparez CSS et JavaScript de votre code HTML. Les rendre mis en cache rend le code plus facile à déboguer. En production, CSS et JavaScript peuvent être réduits et fusionnés et doivent être inclus dans votre système de construction. Remarque* Voir le concours du système de construction (compilation) JavaScript
Structure du document du document

Utilisation du type de document HTML5 :

<!DOCTYPE html>
<html>
<head>
 <title>Recipes: pesto</title>
</head>
<body>

  <h1>Pesto</h1>
  <p>Pesto is good!</p>

</body>
</html>

Copier après la connexion

Sur la page Référencer le Fichier CSS au tout début, comme dans l'élément head :

<head>   
  <title>My pesto recipe</title>   
  <link rel="/css/global.css">   
  <link rel="css/local.css">   
</head>

Copier après la connexion

De cette façon, le navigateur peut précharger le style avant d'analyser le HTML sans rendre le désordre mise en page.

Placez JavaScript tout en bas de la page, avant la fermeture du corps. Cela améliorera le temps de rendu de la page car le navigateur peut restituer la page avant le chargement de JavaScript :

<body>   
  ...   
  <script src="/js/global.js">   
  <script src="js/local.js">   

</body>

Copier après la connexion

Ajouter la gestion des événements en JavaScript. Ne l'ajoutez pas en HTML. C'est très difficile à entretenir, comme :

index.html:   

<head>
  ...   
  <script src="js/local.js">

</head>

<body onload="init()">
  ...   
  <button onclick="handleFoo()">Foo</button>
  ...   
</body>

Copier après la connexion

C'est bien mieux :

<head>   
  ...   
</head>   

<body>   
  ...   
  <button id="foo">Foo</button>   
  ...   
  <script src="js/local.js">   
</body>   

　　js/local.js:   

init();   
var fooButton =   
    document.querySelector(&#39;#foo&#39;);   
fooButton.onclick = handleFoo();

Copier après la connexion

HTML légal

Un facteur majeur dans le succès des pages Web est que les navigateurs peuvent gérer du HTML non valide. Les navigateurs disposent également de règles standardisées sur la manière de restituer le code invalide.

Cependant, ce n’est pas une raison pour que vous laissiez tomber. Un code HTML valide est plus facile à déboguer, a tendance à avoir des tailles de fichiers plus petites, est plus rapide et utilise moins de ressources car son rendu est plus rapide. Un code HTML invalide rend la conception réactive difficile à mettre en œuvre.

Il est particulièrement important d'écrire du HTML valide lors de l'utilisation de modèles.

Validez le HTML dans votre système BUILD : utilisez des plugins de validation tels que HTMLHint et SublimeLinter pour vérifier la syntaxe de votre HTML.

Utilisez le type de document HTML5.

Assurez-vous de garder votre HTML hiérarchique : imbriquez correctement les éléments et assurez-vous qu'il n'y a pas d'éléments non fermés. Cela aide les débogueurs à ajouter des commentaires.

<p id="foobar">
...   
</p> <!-- foobar ends -->

Copier après la connexion

Assurez-vous d'ajouter une balise de fermeture après l'élément qui ne se ferme pas automatiquement. Par exemple, ce qui suit fonctionnera également :

<p>Pesto is good to eat...   
<p>...and pesto is easy to make.

Copier après la connexion

<. 🎜> Mais la méthode d'écriture suivante peut éviter les erreurs et rendre la hiérarchie des paragraphes plus évidente :

Le pesto est bon à manger...

L'élément items (li) n'a pas besoin d'être fermé. Certains programmeurs très intelligents l'écriront ainsi. Cependant, l'élément list. (ul) doit être fermé.

<ul>
  <li>Basil   
  <li>Pine nuts   
  <li>Garlic   
</ul>

Copier après la connexion

Une chose à laquelle vous devez faire attention est les éléments vidéo et audio. Ils ne se ferment pas automatiquement :

<!-- 错误: liable to cause layout grief -->
<video src="foo.webm" />

<!-- 正确 -->
<video src="foo.webm">
  <p>Video element not supported.</p>
</video>

Copier après la connexion

Au lieu de cela, la page HTML deviendra plus propre en supprimant le code inutile

Il n'est pas nécessaire d'être soi-même -closing Ajoutez "/" aux éléments, comme img, etc.

La définition des attributs n'a aucune valeur Si aucun attribut n'est ajouté (dans ce cas, il ne sera pas lu automatiquement et il n'y a pas de contrôle),

vidéo, elle n'a aucun attribut

<video src="foo.webm">

Copier après la connexion

Les deux suivantes sont meilleures

<video src="foo.webm" autoplay="false" controls="false">
<video src="foo.webm" autoplay="true" controls="true">

Copier après la connexion

Ceci est plus lisible

<video src="foo.webm" autoplay controls>

Copier après la connexion

Les balises de stylet et de script ne nécessitent pas l'attribut type ; la valeur par défaut est css et javascript

C'est le cas. mieux vaut optimiser l'adresse du protocole (Sauf le paramétrage http ou https, elle se configurera automatiquement selon le protocole actuel)

<a href="//en.wikipedia.org/wiki/Tag_soup">Tag soup</a>

Copier après la connexion

　　增强可读性，如，第一眼看上去就像是个标题

<h2><a href="/contact">Contact</a><h2>

Copier après la connexion

　　而这种则像个链接

Contact

　　应该使用小写

<A HREF="/">Home</A>

Copier après la connexion

　　大小写混合看上去更恶心

<H2>Pesto</h2>

Copier après la connexion

　语义标记

　　“语义”意思是跟含义相关

　　HTML应该标记有意义的内容：元素和描述的内容相符。

　　HTML5引入了一些新的‘语义元素’像