recherche

Maison >interface Web >tutoriel HTML >Techniques d'optimisation HTML que vous devez connaître

Techniques d'optimisation HTML que vous devez connaître

php中世界最好的语言
php中世界最好的语言original
2018-01-24 10:10:081493parcourir

Cette fois, je vais vous présenter les techniques d'optimisation HTML que vous devez connaître. Quelles sont les précautions que vous devez connaître lors de l'optimisation HTML Voici des cas pratiques, jetons un coup d'œil.

Comment améliorer les performances des pages Web, de nombreux développeurs partent de nombreux aspects, tels que JavaScript, l'optimisation des images, la configuration du serveur, la compression des fichiers ou l'ajustement du CSS.

Il est clair que le HTML a atteint un goulot d'étranglement, même s'il s'agit d'un langage de base essentiel pour le développement d'interfaces Web. La charge des pages HTML devient également de plus en plus lourde. La plupart des pages nécessitent en moyenne 40 Ko d'espace. Par exemple, certains grands sites Web contiennent des milliers d'éléments HTML et la taille de la page sera plus grande.

Comment réduire efficacement la complexité du code HTML et le nombre d'éléments de page. Cet article résout principalement ce problème. Il présente comment écrire du code HTML concis et clair sous de nombreux aspects, ce qui peut accélérer le chargement de la page. . et peut bien fonctionner sur une variété d’appareils.

Les principes suivants doivent être suivis pendant le processus de conception et de développement :

Séparation structurelle : utilisez HTML pour ajouter de la structure, pas du style au contenu
Gardez-le propre : ajoutez des outils de vérification du code ; au flux de travail ; Maintenir la structure et le formatage du code à l'aide d'outils ou d'assistants de style
Apprendre un nouveau langage : obtenir la structure des éléments et le balisage sémantique.
Assurer l'accessibilité : utilisez les attributs ARIA, les attributs de secours, etc.
Test : Assurez le bon fonctionnement du site Web sur plusieurs appareils, utilisez des émulateurs et des outils de performance.

La relation entre HTML, CSS et JavaScript

HTML est un langage de balisage utilisé pour ajuster la structure et le contenu de la page. HTML ne peut pas être utilisé pour modifier le contenu de style, et vous ne pouvez pas non plus saisir de contenu textuel dans la balise d'en-tête, ce qui rend le code long et complexe. Au lieu de cela, il est plus approprié d'utiliser CSS pour modifier les éléments de mise en page et l'apparence. L'apparence par défaut de l'élément HTML est définie par la feuille de style par défaut du navigateur. Par exemple, dans Chrome, l'élément de balise h1 sera rendu dans une police Times bold de 32 px.

Trois règles générales de conception :

Utilisez HTML pour construire la structure de la page, CSS pour modifier la présentation de la page et JavaScript pour implémenter la fonction de la page. CSS ZenGarden démontre très bien la séparation comportementale.
Utilisez moins de code HTML s'il peut être implémenté avec CSS ou JavaScript.
Stockez les fichiers CSS et JavaScript séparément du HTML. Cela peut aider à la mise en cache et au débogage.

La structure du document peut également être optimisée, comme suit :

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

2. le début du document Citez le fichier CSS comme suit : 

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

En utilisant ces deux méthodes, le navigateur préparera les informations CSS avant d'analyser le code HTML. Cela contribue à améliorer les performances de chargement des pages.

Entrez le code JavaScript avant la balise body de fermeture en bas de la page. Cela contribuera à améliorer la vitesse de chargement de la page, car le navigateur chargera la page avant d'analyser le code JavaScript Utilisation de JavaScript<.> les éléments de la page auront-ils un impact positif. 

<body>  
  
  ...   
  
  <script src="/js/global.js">  
  <script src="js/local.js">  
  
</body>
Utilisez les attributs Defer et async. Il n'est pas garanti que les éléments de script avec des attributs async soient exécutés dans l'ordre.

Des gestionnaires peuvent être ajoutés dans le code JavaScript. Ne l'ajoutez jamais au code HTML en ligne. Par exemple, le code suivant peut facilement conduire à des erreurs et est difficile à maintenir :

index.html:

<head>  
     
  ...   
  
  <script src="js/local.js">  
  
</head>  
  
<body onload="init()">  
  
  ...   
  
  <button onclick="handleFoo()">Foo</button>  
  
  ...   
  
</body>
js/local.js : 

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

Une façon d'optimiser vos pages Web consiste à ce que votre navigateur gère le code HTML illégal. Le code HTML légal est facile à déboguer, occupe moins de mémoire, consomme moins de ressources, est facile à analyser, s'affiche et s'exécute plus rapidement. Le code HTML illégal rend extrêmement difficile la mise en œuvre d’un design réactif.

Lors de l'utilisation de modèles, le code HTML légal est extrêmement important. Il arrive souvent que les modèles fonctionnent bien seuls mais signalent diverses erreurs lorsqu'ils sont intégrés à d'autres modules. Par conséquent, la qualité du code HTML doit être assurée. les mesures suivantes :

Ajoutez une fonctionnalité de validation à votre flux de travail : utilisez des plug-ins de validation tels que HTMLHint ou SublineLinter pour vous aider à détecter les erreurs de code.

Utilisez le type de document HTML5
Assurez-vous que la structure hiérarchique du HTML est facile à maintenir et évitez d'imbriquer des éléments dans un état laissé ouvert.
Assurez-vous d'ajouter la balise de fermeture de chaque élément.
Supprimez le code inutile ; il n'est pas nécessaire d'ajouter des balises de fermeture pour les éléments à fermeture automatique ; les attributs booléens n'ont pas besoin de se voir attribuer une valeur et sont vrais s'ils existent ;

Format du code

La cohérence du format rend le code HTML facile à lire, à comprendre, à optimiser et à déboguer.

Balises sémantiques

La sémantique fait référence à des éléments liés au sens. HTML peut voir la sémantique du contenu de la page : la dénomination des éléments et des attributs exprime le rôle et la fonction du contenu pour un certain. étendue. HTML5 introduit de nouveaux éléments sémantiques tels que 1aa9e5d373740b65a0cc8f0a02150c53, c37f8231a37e88427e62669260f0074d et c787b9a589a3ece771e842a6176cf8e9.

Choisir les bons éléments pour écrire votre code garantit la lisibilité de votre code :

Utilisez 4a249f0d628e2318394fd9b75b4636b1(c1a436a314ed609750bd7c7d319db4da,684271ed9684bde649abda8831d4d355...) pour représenter le titre, ff6d136ddc5fdfeffaf53ff6ee95f185 ou c34106e0b4e09414b63b2ea253ff83d6 pour implémenter la liste
Notez que lorsque vous utilisez 6a834feff60a9fc630e0065774f466f2, la balise 1179f652af8537777d18befc1b0d4a32
Choisissez les éléments sémantiques HTML5 appropriés tels que 1aa9e5d373740b65a0cc8f0a02150c53, e388a4556c0f65e1904146cc1a846bee pour décrire le corps du texte, les éléments sémantiques HTML5 peuvent former du contenu, et l'inverse n'est pas vrai.
Utilisez les balises 907fae80ddef53131f3292ee4f81644b et 8e99a69fbe029cd4e2b854e244eab143 au lieu des balises 5a8028ccc7a7e27417bff9f05adf5932
Utilisez les éléments 2e1cf0710519d5598b1f0f14c36ba674, les types d'entrée, les espaces réservés et d'autres attributs pour forcer la validation.
Mélanger du texte et des éléments en tant qu'enfants d'un autre élément entraînera des erreurs de mise en page.

Je pense que vous maîtrisez les méthodes après avoir lu ces cas. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture connexe :

Comment définir le centrage horizontal et vertical des éléments HTML

Balises de titre et paragraphes en XHTML Quelles sont les façons d'utiliser les balises

Comment utiliser HTML et CSS pour créer des mots clairs

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!

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：Comment définir le centrage horizontal et vertical des éléments HTMLArticle suivant：Comment définir le centrage horizontal et vertical des éléments HTML

Articles Liés

Voir plus