Comment écrire des pages Web HTML hautes performances-tutoriel HTML-php.cn

Comment pouvez-vous améliorer les performances des pages Web ?

La plupart des développeurs optimiseront via JavaScript et les images, via la configuration du serveur, la compression et la fusion de fichiers – voire l'ajustement du CSS (fusion de petites images).

Un mauvais HTML est toujours ignoré, même s'il a toujours été le langage central 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 :

HTML est utilisé pour exprimer la structure et CSS est utilisé 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 de systèmes de construction (compilation) JavaScript

Structure du document

Utiliser le 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

Citez le fichier CSS en haut de la page, 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 les styles avant d'analyser le HTML sans afficher une mise en page déroutante.

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 du JavaScript :

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

</body>

Copier après la connexion

Ajoutez la gestion des événements en JavaScript. Ne l'ajoutez pas en HTML. C'est très difficile à maintenir, 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>

Copier après la connexion

js/local.js :

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

Copier après la connexion

HTML légal

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

Mais ce n’est pas une raison pour laisser 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 code 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 les éléments qui ne se ferment 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 :

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

Copier après la connexion

L'élément items (li) n'a pas besoin d'être fermé. Certains programmeurs très intelligents l'écriveront 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, ce sont les éléments vidéo et audio. Ils ne sont pas isolés :

<!-- 错误: 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 contraire, la page HTML deviendra plus propre en supprimant le code inutile

Il n'est pas nécessaire d'ajouter "/" aux éléments à fermeture automatique, tels que img

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

Vidéo, elle n'a aucun attribut

<video src="foo.webm">

Copier après la connexion

Les deux suivants sont meilleurs

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

Copier après la connexion

C'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

Il est préférable d'optimiser l'adresse du protocole (supprimer le paramètre http ou https, il se configurera automatiquement selon le protocole actuel)

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

Copier après la connexion

Améliorer la lisibilité, par exemple, cela ressemble à un titre au premier coup d'œil

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

Copier après la connexion

　　而这种则像个链接

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

Copier après la connexion

　　应该使用小写

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

Copier après la connexion

　　大小写混合看上去更恶心

<H2>Pesto</h2>

Copier après la connexion

　语义标记

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

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

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