recherche

Maison  >  Article  >  interface Web  >  Comment écrire des pages Web HTML hautes performances

Comment écrire des pages Web HTML hautes performances

巴扎黑
巴扎黑original
2017-03-19 17:29:211312parcourir

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>

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>

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>

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>

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('#foo');
fooButton.onclick = handleFoo();

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

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.

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

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>

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>

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

Les deux suivants sont meilleurs 

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

C'est plus lisible

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

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>

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

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

　　而这种则像个链接

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

　　应该使用小写

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

　　大小写混合看上去更恶心

<H2>Pesto</h2>

　语义标记

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

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

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

,
和
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Notes sur l'utilisation des styles de balises préalablesArticle suivant：Notes sur l'utilisation des styles de balises préalables

Articles Liés

Voir plus