Maison  >  Article  >  interface Web  >  Écrire des applications HTML hautes performances

Écrire des applications HTML hautes performances

高洛峰
高洛峰original
2017-02-28 13:14:141295parcourir

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 - même en ajustant 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. 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 du document

Utilisation du type de document HTML5 :

<!DOCTYPE html>
<html>
<head>
 <title>Recipes: pesto</title>
</head>
<body>

  <h1>Pesto</h1>
  <p>Pesto is good!</p>

</body>
</html>


Sur la page Référencer le Fichier CSS au tout début, 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 le style avant d'analyser le HTML sans rendre le désordre mise en page.

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>

Ajouter la gestion des événements en JavaScript. Ne l'ajoutez pas en HTML. C'est très difficile à entretenir, 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(&#39;#foo&#39;);   
fooButton.onclick = handleFoo();


HTML légal

Un facteur majeur dans le succès des pages 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 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 rendre la hiérarchie des paragraphes plus évidente :


e388a4556c0f65e1904146cc1a846beeLe pesto est bon à manger...94b3e26ee717c64999d7867364b1b4a3

L'élément items (li) n'a pas besoin d'être fermé. Certains programmeurs très intelligents l'écriront 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 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 lieu de cela, la page HTML deviendra plus propre en supprimant le code inutile

Il n'est pas nécessaire d'être soi-même -closing Ajoutez "/" aux éléments, 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 lu automatiquement et il n'y a pas de contrôle),

vidéo, elle n'a aucun attribut

<video src="foo.webm">


Les deux suivantes sont meilleures

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


Ceci 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

C'est le cas. mieux vaut optimiser l'adresse du protocole (Sauf le paramétrage http ou https, elle se configurera automatiquement selon le protocole actuel)

<a href="//en.wikipedia.org/wiki/Tag_soup">Tag soup</a>


  增强可读性,如,第一眼看上去就像是个标题

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


  而这种则像个链接

6feca578864c89f7badd9f8f3b8a12d9c1a436a314ed609750bd7c7d319db4daContact473f0a7621bec819994bb5020d29372a5db79b134e9f6b82c0b36e0489ee08ed

  应该使用小写

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


  大小写混合看上去更恶心

<H2>Pesto</h2>


 语义标记

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

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

  HTML5引入了一些新的‘语义元素’像 1aa9e5d373740b65a0cc8f0a02150c53, c37f8231a37e88427e62669260f0074d 和 c787b9a589a3ece771e842a6176cf8e9。

  使用正确的元素表达正确的内容对于可访问性是有帮助的。

  使用4a249f0d628e2318394fd9b75b4636b1c1a436a314ed609750bd7c7d319db4da,684271ed9684bde649abda8831d4d355代表标题, ff6d136ddc5fdfeffaf53ff6ee95f185或c34106e0b4e09414b63b2ea253ff83d6代表lists

  注意23c3de37f2f9ebcb477c4a90aac6fffd的标题应该以4a249f0d628e2318394fd9b75b4636b1开始

  使用1aa9e5d373740b65a0cc8f0a02150c53, c37f8231a37e88427e62669260f0074d, c787b9a589a3ece771e842a6176cf8e9 and 15221ee8cba27fc1d7a26c47a001eb9b

  使用e388a4556c0f65e1904146cc1a846bee写正文

  使用907fae80ddef53131f3292ee4f81644b 和 8e99a69fbe029cd4e2b854e244eab143 代替 5a8028ccc7a7e27417bff9f05adf5932 和 a4b561c25d9afb9ac8dc4d70affff419 表示强调

  表单使用2e1cf0710519d5598b1f0f14c36ba674元素,input 类型

  混合文字和元素会导至布局的问题

<p>Name: <input type="text"></p>


  最好用下面的表示

<p><label>Name:</label><input type="text"></p>


 布局

  HTML应该使用有意义的组织结构,而不是通过样式来实现。

  使用e388a4556c0f65e1904146cc1a846bee元素代表文本,而不是用来布局。

  避免使用0c6dc11e160d3b678d68754cc175188a来换行,使用块级元素和CSS来代替。

  避免使用水平分隔线f32b48428a809b51f04d3228cdf461fa。使用CSS的border样式来控制。

  不要使用不必要的p。W3C对p的定义是排序的是最后一个元素。

  要了解哪些元素是块级元素,避免在p中放置不必要的块级元素。将一个list放到p中是没有必要的。

  不要使用table来布局。

  Flex box是被广泛推荐的,能用就用吧。

  使用CSS的padding和margin,理解盒子模型。
 CSS

  这篇文章是关于HTML的,但是这里有一些基本的CSS小贴士。

  避免内嵌的CSS。出于性能考虑,CSS可以在BUILD时内嵌到你的网页中。

  避免ID出现重复。

  如果你想对多个元素应用某个样式,那么请使用class,在父级元素上使用class比在子级上好:

<!-- 有点笨 :( -->
<ul>
  <li class="ingredient">Basil</li>
  <li class="ingredient">Pine nuts</li>
  <li class="ingredient">Garlic</li>
</ul>

<!-- 更好 :) -->
<ul class="ingredients">
  <li>Basil</li>
  <li>Pine nuts</li>
  <li>Garlic</li>
</ul>


 可访问性

  使用语义元素

  提供向后兼容

  在链接上添加title属性,而且应该避免与link文本出现相同的内容

  在输入元素上添加type和placeholder属性


更多编写高性能HTML应用相关文章请关注PHP中文网!


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