如何写出高效率的HTML

时间  2019-11-07 标签 如何 写出 高效率 html

我的翻译，欢迎转载！
英文原文：https://samdutton.wordpress.com/2015/04/02/high-performance-html/
第一次翻译国外的博文，有什么意见和建议欢迎提出！javascript

咱们该如何提高网页的性能?

看到这个问题时，大多数开发者会想到图片优化、JavaScript优化、服务器配置升级、文件压缩甚至是CSS压缩这些方式。然而，网页的核心语言HTML却被忽视了。
现在，HTML的负担愈来愈重，在全球排名前100的网站中，平均每一个页面的HTML代码大小有40k左右，其中Amazon和Yahoo平均每页的HTML代码有几千行，Youtube的首页甚至有3500个HTML元素。虽然下降每页HTML的复杂性、减小元素数量并不能使页面的加载时间提高不少，可是良好的HTML编码习惯是提高网页加载速度的一个重要基础。之因此写这篇文章，就是为了告诉你如何写出干净整洁的HTML代码，可以让你的网页在许多设备上都能快速正常的加载运行。在这个过程当中，你可以学会如何搭建易于维护和Debug的网站以及app。css

写代码的方式能够有不少种，特别是HTML。本文只是根据咱们的经验来作出相对最好的建议，并不表明每条建议在任何状况下都能达到效果，仅供参考。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.java

基友三原则：
1. HTML用于创建结构，CSS用于渲染样式，JavaScript用于控制行为；
2. 首先完成HTML的设计，而后根据样式需求来设计CSS，最后在确实须要的状况下才设计JavaScript；
3. 将CSS和JavaScript文件进行归档，与HTML文件分开（这样不只有助于页面缓存，并且可使后期Debug更容易），这以后再把CSS和JavaScript连接到HTML中，能够根据须要来对CSS和JavaScript代码进行压缩加密。web

结构的搭建

HTML在结构上搭建上须要注意这些：segmentfault

  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中添加，下面这个例子就是错误的，这样后期难以维护。app

    • 好比这样写就不太好：

      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等工具来作自动化测试。

联系我们 沪ICP备2021010478号-7