Maison >interface Web >tutoriel HTML >À quels points devez-vous prêter attention lors de l'écriture d'applications HTML hautes performances ?
À quels points devez-vous prêter attention lors de l'écriture d'applications HTML hautes performances ?
- php中世界最好的语言original
- 2018-01-25 11:25:411199parcourir
Cette fois, je vais vous apporter les points auxquels vous devez faire attention lors de l'écriture d'applications HTML hautes performances. Quelles sont les précautions lors de l'écriture d'applications HTML hautes performances. Voici des cas pratiques, prenons. un regard.
Comment améliorer les performances d'une page 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 principal d'Internet.
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 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 du système 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>
Citer le fichier CSS en haut de la page, tel que In 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 de JavaScript :
<body> ... <script src="/js/global.js"> <script src="js/local.js"> </body>
Ajoutez la gestion des événements à 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
Web Un facteur majeur dans le succès d'une page Web est que les navigateurs peuvent gérer du HTML non valide. 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.
<p id="foobar"> ... </p> <!-- foobar ends -->
Assurez-vous d'ajouter une balise de fermeture après l'élément qui ne se ferme 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 la hiérarchie des paragraphes Plus évident :
<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'écriront ainsi. Dans tous les cas, l'élément list (ul) doit être fermé.
<ul> <li>Basil <li>Pine nuts <li>Garlic </ul>
Une chose à laquelle vous devez faire attention est les éléments vidéo et audio. Ils ne se ferment pas automatiquement :
<!-- 错误: 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 "/" pour les éléments à fermeture automatique , comme img, etc.
L'attribut set n'a aucune valeur Si aucun attribut n'est ajouté (dans ce cas, il ne sera pas lu automatiquement et il n'y a pas de contrôle),
video, il n'a aucun attribut
<video src="foo.webm">
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 utiliser HTML et CSS pour rendre le texte clair
Comment utiliser les balises de titre et les balises de paragraphe en XHTML
Comment écrire du code HTML et CSS flexible, stable et de haute qualité
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!