摘要：之所以写这篇文章，就是为了告诉你如何写出干净整洁的代码，能够让你的网页在许多设备上都能快速正常的加载运行。在这个过程中，你能够学会如何搭建易于维护和的网站以及。无论如何，尽量避免同时在和，或者和添加。

  
个人翻译，欢迎转载！

  英文原文：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)，以保证你的网站可以通过屏幕阅读器或者纯文本浏览器来展示；
  
全面测试：通过各种工具来测试你的网站在不同设备和不同尺寸屏幕上的表现。
  

HTML的含义应该不多解释了，请自行百度百科。
首先要说的是，HTML和CSS两兄弟虽然彼此充满基情，但是也不能把关系搞得太复杂，样式由CSS来控制就够了，不要用HTML元素来强行获取想要的样式，比如不要仅仅为了使文字变大而使用

、

、

这些标题标签，也不要仅仅为了缩进而使用

标签。
Chrome, Firefox, Internet Explorer 以及 Opera 都有各自的默认样式表，HTML元素默认的显示方式都是由这些默认样式表来决定的。比如，Chrome中

默认的样式是32px bold，字体是Times.

  
基友三原则：

  1. HTML用于建立结构，CSS用于渲染样式，JavaScript用于控制行为；

  2. 首先完成HTML的设计，然后根据样式需求来设计CSS，最后在确实需要的情况下才设计JavaScript；

  3. 将CSS和JavaScript文件进行归档，与HTML文件分开（这样不仅有助于页面缓存，而且可以使后期Debug更容易），这之后再把CSS和JavaScript链接到HTML中，可以根据需要来对CSS和JavaScript代码进行压缩加密。

结构的搭建

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

采用HTML5标准时开头应该加上，像这样：

html

     
        
    
      
        
Pesto
  
        
Pesto is good!
    

应在head标签中引入CSS文件，这样浏览器就可以在输出HTML之前获取CSS信息：

html
    
    
    

在标签的末尾引入JavaScript文件，这样可以在页面显示之后再编译JavaScript文件，以加快页面读取速度，同时有助于JavaScript对页面中的元素进行操作，像这样：

html  
    ...