怎样写出高效率的HTML

2019年8月26日 145次阅读 来源: iLeo

个人翻译，迎接转载！
英文原文：https://samdutton.wordpress.com/2015/04/02/high-performance-html/
第一次翻译外洋的博文，有什么看法和发起迎接提出！

我们该怎样提拔网页的机能?

看到这个题目时，大多数开辟者会想到图片优化、JavaScript优化、服务器设置晋级、文件紧缩以至是CSS紧缩这些体式格局。然则，网页的中心言语HTML却被无视了。
如今，HTML的累赘愈来愈重，在全球排名前100的网站中，均匀每一个页面的HTML代码大小有40k摆布，个中Amazon和Yahoo均匀每页的HTML代码有几千行，Youtube的首页以至有3500个HTML元素。虽然下降每页HTML的庞杂性、削减元素数目并不能使页面的加载时刻提拔很多，然则优越的HTML编码习气是提拔网页加载速率的一个主要基本。之所以写这篇文章，就是为了通知你怎样写出清洁整齐的HTML代码，能够让你的网页在很多装备上都能疾速一般的加载运转。在这个历程当中，你能够学会怎样搭建易于保护和Debug的网站以及app。

写代码的体式格局能够有很多种，特别是HTML。本文只是依据我们的履历来做出相对最好的发起，并不代表每条发起在任何状况下都能到达结果，仅供参考。

内容简介

  • 各司其职：款式由CSS来控制就够了，不要用HTML元夙来强行猎取想要的款式；
  • 敷衍了事：开辟历程当中肯定要到场代码校验东西，以确保代码没有任何语法以及逻辑上的毛病；
  • 清洁整齐：运用自动排版东西来坚持代码构造和花样的一致性；
  • 闇练言语：应相识一切的元素用法，并在HTML多运用语义化的元素；
  • 厚此薄彼：设想历程当中肯定要斟酌到一切的状况，备用计划很主要，以至要特地为特别人群运用ARIA (Accessible Rich Internet Application)，以保证你的网站能够经由过程屏幕浏览器或许纯文本浏览器来展现；
  • 周全测试：经由过程种种东西来测试你的网站在差别装备和差别尺寸屏幕上的表现。

Web三基友

HTML的寄义应当不多诠释了，请自行百度百科。
起首要说的是，HTML和CSS两兄弟虽然相互充溢基情，然则也不能把关联搞得太庞杂，款式由CSS来控制就够了，不要用HTML元夙来强行猎取想要的款式，比方不要仅仅为了使笔墨变大而运用<h1>、<h2>、<h3>这些题目标签，也不要仅仅为了缩进而运用<blockquote>标签。
Chrome, Firefox, Internet Explorer 以及 Opera 都有各自的默许款式表，HTML元素默许的显现体式格局都是由这些默许款式表来决议的。比方，Chrome中<h1>默许的款式是32px bold，字体是Times.

基友三原则：
1. HTML用于竖立构造，CSS用于衬着款式，JavaScript用于控制行动；
2. 起首完成HTML的设想，然后依据款式需求来设想CSS，末了在确切须要的状况下才设想JavaScript；
3. 将CSS和JavaScript文件举行归档，与HTML文件离开（如许不仅有助于页面缓存，而且能够使后期Debug更轻易），这以后再把CSS和JavaScript链接到HTML中，能够依据须要来对CSS和JavaScript代码举行紧缩加密。

构造的搭建

HTML在构造上搭建上须要注重这些：

  1. 采纳HTML5规范时开首应当加上<!DOCTYPE html>，像如许：

    html<!DOCTYPE html>
<html>
    <head> 
        <title>Recipes: pesto</title>
    </head>
    <body>  
        <h1>Pesto</h1>  
        <p>Pesto is good!</p>
    </body>
</html>

  2. 应在head标签中引入CSS文件，如许浏览器就可以够在输出HTML之前猎取CSS信息：

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

  3. 在<body>标签的末端引入JavaScript文件，如许能够在页面显现以后再编译JavaScript文件，以加速页面读取速率，同时有助于JavaScript对页面中的元素举行操纵，像如许：

    html<body>  
    ...  
    <script src="/js/global.js">  
    <script src="js/local.js">
</body>

  4. 对元素的操纵应增加在JavaScript代码中，而不要在HTML中增加，下面这个例子就是毛病的，如许后期难以保护。

    • 比方如许写就不太好：

      index.html

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

    • 如许写就好多了

      index.html

      html<head>
    ...
</head>
<body> 
    ...
    <button id="foo">Foo</button>
    ... 
    <script src="js/local.js">
</body>

      js/local.js

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

代码校验

虽然如今浏览器的容错力愈来愈高，但这不能成为代码粗制滥造的托言。不论什么时刻，准确的HTML代码都更容易于debug、体积更小、运转更快、衬着时斲丧资本更少，而毛病的HTML代码只会使页面的终究设想难以完成想要的结果。特别是在运用模板来开辟时，准确有用的HTML就更显得尤为主要，或许一个一般运转的模块会在其他环境中涌现恐怖的非常。

怎样才进步HTML的准确性呢？能够有这些体式格局：

  1. 在项目中到场校验历程：能够在代码编辑器中运用HTMLHint、SublimeLinter这类代码校验插件，也能够在build的时刻运用HTMLHint with Grunt这类校验东西，还能够经由过程W3C HTML validator等网站来在线检测代码；
  2. 只管采纳HTML5规范；

  3. 确保准确的HTML层级：嵌套元素时确保元素首尾完全，在一个有大批内容的元素的完毕标签后应增加解释，如许有助于后期debug，特别是在运用模板的时刻，以下所示：

    html<div id="foobar">
    ...
</div> <!-- foobar ends -->

  4. 在一切不能自动完毕的元素末端增加完毕标签；

    • 比方这个例子，如许写也能够能够一般运转：

      html<p>Pesto is good to eat...
<p>...and pesto is easy to make.

    • 不过照样下面如许比较不轻易失足：

      html<p>Pesto is good to eat...</p>
<p>...and pesto is easy to make.</p>

  5. </li>完毕标签不是必需的，所以有些人以为能够不写</li>，这能够接收，然则</ul>和</ol>标签肯定要加：

    html<ul>  
    <li>Basil  
    <li>Pine nuts  
    <li>Garlic
</ul>

  6. <video>和<audio>元素必需要有完毕标签：

    html<!-- 如许写不好 -->
<video src="foo.webm" />
<!-- 照样如许写吧 -->
<video src="foo.webm">  
    <p>Video element not supported.</p>
</video>

另一方面，要去掉冗余代码：

  1. 像<img>和<link>这一类元素能够不加完毕标签；

  2. 布尔型的属性能够不赋值，只需该属性涌现，值就为true；

    • 下面如许是能够运转的（没有加autoplay和controls）：

      html<video src="foo.webm">

    • 如许就不能运转，由于这两个属性值必需是true：

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

    • 如许改一下就可以够运转了：

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

    • 如许写会更容易读：

      html<video src="foo.webm" autoplay controls>

  3. CSS和 JavaScript链接不须要type属性，他们就是他们。

优越的代码排版

坚持一致的代码排版能够使HTML代码更容易于明白、优化和debug，要做到优越的代码排版应注重以下这几点：

  1. 在项目中坚持一致的HTML代码作风；
  2. 运用代码编辑器来协助你自动排版，比方在Sublime Text中能够运用自带的Reindent，也能够找一些自动排版插件来协助你。一样也能够运用一些在线东西比方CSS Beautifier和JS Beautifier；
  3. 在HTML顶用缩进来分层更容易于浏览，假如代码编辑器没有自动缩进功用的话能够自行修正响应的设置。当你发明你的HTML层级过深的时刻，那就示意你须要重构一下你的HTML了；
  4. 缩进能够经由过程空格或许Tab来完成，但肯定不要二者同时运用；

  5. 用更直接易读的体式格局写HTML代码，比方这句话，就可以够很显著的看出这是个题目：

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

    如许写的话就更像是一个链接：

    html<a href="/contact"><h2>Contact</h2></a>
  6. 元素要按通例安排，比方footer元素最好是放在HTML页面的底部，虽然理论上把它放在任何处所都能够一般运转；
  7. 一致一切引号的运用划定规矩，不要这里用双引号，那边又单引号；

  8. 运用小写字母来写标签和属性，大写字母很不易读，像如许：

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

    夹杂式的写法几乎就是反人类：

    html<H2>Pesto</h2>

语义化设想

语义化的意义是从称号一眼就可以看出其内容和作用是什么，HTML的标签就是经由过程运用浅显易懂的元素名和属性名来完成语义化的。HTML5又引进了一些新的语义化元素，比方<header>, <footer>和<nav>。
为了是你的代码更容易明白，肯定要针对内容运用响应的语义化元素：

  1. 题目运用<h1> (<h2>, <h3>…)，列表运用<ul>或许<ol>；
  2. <article>内容中的题目应当从<h1>最先；
  3. 在恰当的处所运用HTML5的新元素，比方<header>, <footer>, <nav>和<aside>；
  4. 正文中的文本内容要用<p>标签，内容的构造化能够运用HTML5的新元素（或许<div>），不要倒置；
  5. 修正笔墨款式时，<em>和<strong>要比<i>和<b>更好些，由于前者语义越发显著；
  6. <form>中要包括<label>元素，input元素要有type、placeholder以及其他必要的属性，纵然值为空都能够；

  7. 不要把笔墨和元素夹杂在一起，如许轻易致使规划失足，比方如许：

    html<div>
    Name: 
    <input type="text">
</div>

    如许写会更好些：

    html<div>
    <label>Name:</label>
    <input type="text">
</div>

规划

起首再次强调一遍：

款式由CSS来控制就够了，不要用HTML元夙来强行猎取想要的款式。

规划须要注重的题目有这些：

  1. <p>元素用来放笔墨，而不是用来规划。在浏览器本身的款式表中默许<p>有margin和其他款式；
  2. 想完成换行能够运用<block>元素或许CSS的display属性，只管防止运用<br>来换行。笔墨内容中的换行能够用<br>，但一般也很少如许用，偶然在诗文中会把<br>作为标点来运用；
  3. 防止运用<hr>，由于这个元素对语义和构造都没有太大协助，反而<hr>极差的灵活性对规划和显现都有很大的影响；
  4. 不要滥用<div>，W3C对<div>的形貌是如许的：当没有其他元素可用时才运用<div>。假如想让<link>和<img>这类元素能够在末端换行，能够在款式中增加display: block，如许要比把它们放进<div>或许运用<br>来换行要好很多;
  5. 必需晓得哪些是块级元素，如许就可以够防止把块级元素放到<div>内里，比方列表就不须要放到div内里；
  6. <table>是用来放表格数据的，不是用来规划的；
  7. Flex box如今愈来愈盛行，学一学没有害处；
  8. 盒模子肯定要控制，必需晓得什么时刻该用padding，什么时刻该用margin；
  9. 运用margin的划定规矩：一般状况下，margin都是增加在元素的bottom和right，偶然也能够是top或许left。不管怎样，只管防止同时在bottom和top，或许right和left增加margin。能够用last-of-type选择器来去掉末了一个子元素的margin。

CSS方面

这篇文章虽然是讲HTML的，但也有些CSS的注重事项想说一说：

  1. 不要将多句CSS写在统一行；
  2. 不要重复运用统一个id；

  3. 偶然刻给父元素增加class要比给子元素增加更简约易保护（class的定名体式格局能够采纳BEM划定规矩），像如许：

    html<!-- 如许看着好累>o< --> 
<ul>  
    <li class="ingredient">Basil</li>  
    <li class="ingredient">Pine nuts</li>  
    <li class="ingredient">Garlic</li> 
</ul> 
<!-- 看起来惬意多了^v^ --> 
<ul class="ingredients">  
    <li>Basil</li>  
    <li>Pine nuts</li>  
    <li>Garlic</li> 
</ul>

易接见性

要多为用户斟酌，差别的装备前提、运用环境以及输入法等都邑给你的HTML带来差别的体验：

  1. 只管的运用语义化元素；
  2. 要准备好备用内容：比方给<track>元素增加申明和副题目，给<video>和<audio>元素增加备用的笔墨或许图片，视频内容配上响应的截图或海报，每张图片都要加alt属性（假如图片只是用来装潢页面的话能够给alt赋空值）;
  3. 链接要加title属性，title必需要有意义，不要只是链接的复述；
  4. 在<input>元素中要到场type和placeholder；
  5. 设想时要只管到场ARIA (Accessible Rich Internet Application)。

其他发起

  1. 标记的转义，比方<和&标记，像如许：<title>HTML &amp; JavaScript</title>；
  2. 有些标记不须要转义，比方破折号（如：4-5 weeks）另有钱银标记（如：¢,€）；
  3. 在代码中作用不显著的处所恰当的增加解释（解释在重构时的作用性无足轻重，优异的HTML代码，不管何等庞杂都能够很好的浏览和明白）；

  4. 偶然全大写的题目会起到吸收注重力的作用，但没必要在HTML中真的输入大写的笔墨，能够在CSS中经由过程修正text-transform和font-variant来完成。如许做另有个优点，就是当用户复制这段笔墨时，他们能够不想要全大写的，像下面的<h4>，当用户复制笔墨内容时，获得的是大小写夹杂的笔墨：
    HTML

    html<h4>W3C Web Accessibility Initiative ARIA guidance</h4>

    CSS

    cssh4 {
    font-variant: small-caps;
}

测试

重中之重，就是肯定要做测试！
在事情流程、调试东西和布置历程当中都能够到场HTML测试。肯定要测试你的页面在差别前提的装备，差别大小的屏幕以及差别网速的环境下的读取状况。还要运用纯笔墨浏览器（如： Lynx）或许屏幕浏览器（如：ChromeVox）来测试页面在特别环境下的交互性。能够运用Chrome Dev Tools device mode这类仿真器来看管页面的变化。事情流程中能够到场Page Speed, Web Page Test等东西来做自动化测试。

    原文作者：iLeo
    原文地址: https://segmentfault.com/a/1190000002680822
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞