Compétences incontournables en optimisation HTML_HTML/Xhtml_Production de pages Web-tutoriel HTML-php.cn

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 activer Works. bien sur plusieurs 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 bien rangé : ajoutez des outils de vérification du code au flux de travail ; utilisez des outils ou des assistants de style pour maintenir la structure et le format du code
Apprenez un nouveau langage : obtenez 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 des pages. 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 des éléments 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 de conception universelles :

Utilisez HTML pour construire la structure de la page, CSS pour modifier la présentation de la page et JavaScript pour implémenter les fonctions 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, ce qui suit est un fichier vide :

Code XML/HTMLCopier le contenu dans le presse-papiers

>
<html>
<tête>
<titre>Recettes : pesto titre>
tête>
<corps>
<h1>Pestoh1>
<p>Le pesto est bon !p>
corps>
html>

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

Code XML/HTMLCopier le contenu dans le presse-papiers

<tête>
<titre>Ma recette de pesto titre>
<lien rel="feuille de style" href="/css/global.css">
<lien rel="feuille de style" href="css/local.css">
tête>

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 de fermeture du corps 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. L'utilisation de JavaScript aura un impact positif sur les éléments de la page. .

Code XML/HTMLCopier le contenu dans le presse-papiers

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

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 :

Code XML/HTMLCopier le contenu dans le presse-papiers

<tête>
...
<script src="js/ local.js">
tête>
<corps onload="init( )">
...
<bouton onclick="handleFoo( )">Foobouton>
...
corps>

下面的写法比较好：

index.html :

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

<tête>
...
tête>
<corps>
...
<bouton id="foo" >Foobouton>
...
<script src="js/ local.js">
corps>

js/local.js :

Code JavaScript复制内容到剪贴板

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

Vérification

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 lorsqu'ils sont intégrés à d'autres modules, diverses erreurs sont signalées. Par conséquent, la qualité du code HTML doit être assurée. mesures suivantes :

Ajoutez une fonctionnalité de validation à votre flux de travail : utilisez des plugins de validation comme 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 sont présents ;

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 à partir du contenu de la page : la dénomination des éléments et des attributs exprime dans une certaine mesure le rôle et la fonction du contenu. HTML5 introduit de nouveaux éléments sémantiques tels que