Quelques suggestions pour écrire des applications HTML hautes performances_HTML/Xhtml_Production de pages Web-tutoriel HTML-php.cn

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 même 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 :

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

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

Code CSSCopier le contenu dans le presse-papiers

Ma recette de pesto
"/css/global.css"
> "css/local.css">
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 :

Code JavaScript

Copier le contenu dans le presse-papiers

...

...
"foo">Foo
...
"js/local.js">
　　js/local.js :
init();
var fooButton =
document.querySelector('#foo');
fooButton.onclick = handleFoo();

　合法的HTML

　　Web网页成功的一个主要因素就是浏览器可以处理无效的HTML。浏览器还有一些如何呈现无效代码的标准化规则。

　　但是，这不你放任的理由。有效的HTML更容易调试，往往文件更小，速度更快，占用资源更少，因为它们渲染更快。无效的HTML让响应式设计难以实施。

　　使用模板的时候写有效的HTML是特别重要的。

　　在你的BUILD系统中验证HTML：使用验证插件，如HTMLHint et SublimeLinter来检查你HTML的语法。

　　使用HTML5文档类型。

　　请务必保持HTML的层次：正确嵌套元素，确保没有任何未关闭的元素。它可以帮助调试者添加注释。

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

<div id="foobar" >
...
div>
<vidéo src="foo. webm" />
<vidéo src="foo. webm">
<p>Élément vidéo non pris en charge.p>
vidéo>

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, comme img, etc.

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ôle de contrôle),

Vidéo, elle n'a aucun attribut

Code XML/HTMLCopier le contenu dans le presse-papiers