Comment optimiser HTML pour améliorer les performances des pages Web-tutoriel HTML-php.cn

Comment optimiser HTML pour améliorer les performances des pages Web

小云云

Libérer： 2017-11-20 09:18:56

original

2804 Les gens l'ont consulté

Il existe de nombreuses façons d'améliorer les performances des pages Web. En plus d'utiliser JS ou d'ajuster la configuration du serveur et CSS pour améliorer les performances des pages Web, nous pouvons réellement améliorer les performances des pages Web via HTML.

Le HTML devient de plus en plus gros. Chaque page HTML des 100 meilleurs sites Web fait pour la plupart 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

Utiliser le type de document HTML5 :

Code XML/HTML pour copier le contenu dans le presse-papiers

<!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

Référencer le fichier CSS en haut de la page, comme dans l'élément head :

Le code CSS copie le contenu dans le presse-papier

<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 analyser les styles HTML Preload sans afficher une mise en page encombrée.

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 :

Le code JavaScript copie le contenu dans le presse-papiers

<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, par exemple :

Code XML/HTML copier le contenu dans le presse-papiers

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 :

Le code JavaScript copie le contenu dans le presse-papiers

<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(&#39;#foo&#39;);   
fooButton.onclick = handleFoo();  
　合法的HTML

Copier après la connexion

Un des principaux facteurs de succès des pages Web est que le navigateur peut gérer du HTML invalide. 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 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.

Code XML/HTML Copier le contenu dans le presse-papiers

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

Copier après la connexion

Assurez-vous d'ajouter une balise de fermeture après l'élément non auto-fermant. Par exemple, ce qui suit fonctionnera également : <. 🎜>

Le code XML/HTML copie le contenu dans le presse-papiers

<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

　　items元素（li）并不是必须封闭的，有些非常聪明的的程序员会写成这样，无论如何，list元素(ul)是必须封闭的。

XML/HTML Code复制内容到剪贴板

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

Copier après la connexion

　　有一点你必须注意video和audio元素。他们不是自封闭的：

XML/HTML Code复制内容到剪贴板

<video src="foo.webm" />

Copier après la connexion

<video src="foo.webm">  
  <p>Video element not supported.</p>  
</video>

Copier après la connexion

　　相反，通过删除不必要的代码HTML页面会变得更干净

　　没有必要为自封闭元素添加"/"，像img等

　　设置属性是没有值的，如果不加属性的话（这种情况下，它不会自动播放，没有控制控件），

　　video，它是没有任何属性的

XML/HTML Code复制内容到剪贴板

<video src="foo.webm">

Copier après la connexion

　　下面两种更好

XML/HTML Code复制内容到剪贴板

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

Copier après la connexion

　　这种可读性更强

XML/HTML Code复制内容到剪贴板

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

Copier après la connexion

　　stylet和script标签不需要type属性；默认就是css和javascript

　　优化协议地址更好（去除置http或https，它会根据当前协议自动配)

XML/HTML Code复制内容到剪贴板

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

Copier après la connexion

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

XML/HTML Code复制内容到剪贴板

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

Copier après la connexion

　　而这种则像个链接

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

Copier après la connexion

　　应该使用小写

XML/HTML Code复制内容到剪贴板

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

Copier après la connexion

　　大小写混合看上去更恶心

XML/HTML Code复制内容到剪贴板

<H2>Pesto</h2>

Copier après la connexion

　语义标记

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

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

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

Php8, je viens aussi

Apprenez la mise en page d'un site Web en 30 minutes

Tutoriel vidéo Shangguan Oracle débutant à compétent

Votre première ligne de code UNI-APP

Flutter de zéro au lancement de l'application

Brother Lian Nouveau didacticiel vidéo Linux

Tutoriel vidéo AXURE 9 (convient à l'interface utilisateur interactive de conception de produits du chef de produit)

Tutoriel vidéo PS Zero Basic Proficiency

Tutoriel vidéo de 16 jours sur l'interface utilisateur pour vous aider à démarrer

Tutoriel vidéo sur les techniques PS et les techniques de découpage

Tutoriel vidéo sur la construction et le lancement de projets d'Alibaba Cloud Environment

Présentation des réseaux informatiques - Connaissances de base que les programmeurs doivent maîtriser

Tutoriel essentiel pour les programmeurs - Explication du protocole HTTP

Tutoriel vidéo Websocket

Comment optimiser HTML pour améliorer les performances des pages Web