WonderCSS

如何优化你的HTML代码

书接上文《如何优化你的CSS样式表》,再次重申我们的优化目的是“让你的网站跑的更快!”也就是尽最大化让我们的HTML代码在合理的基础上文字更加少、运算更加流畅。

避免“内联式/嵌入式”代码

你可以通过以下三种方式在HTML页面中引入CSS或Javascript代码:

1) 内联式: 在HTML标签的style属性中定义样式,在onclick这样的属性中定义Javascript代码;


<div style="margin:0;">wonder css</div>

2) 嵌入式: 在页面中使用<style>标签定义样式,使用<script>标签定义Javascript代码;


<style>
body {margin:0;}
</style>

3) 引用外部文件: 在<style>标签中定义href属性引用CSS文件,在<script>标签中定义src属性引入Javascript文件.


<link type="text/css" rel="stylesheet" href="style.css" />

尽管前两种方式减少了HTTP请求数,可是实际上却增加了HTML文档的体积。不过,当你的页面中的CSS或者Javascript代码足够少,反而是开启一个HTTP请求的花费要更大时,采用这两种方式却是最有用的。因此,你需要测试评估这种方式是否真的提升了速度。同时也要考虑到你的页面的目标和它的受众:如果你期望人们只会访问它一次,例如对一些临时活动来说,你决不会期望有回访客出现,那么使用内联式/嵌入式代码能够帮助减少HTTP请求数。

尽量避免在你的HTML中手工编写CSS/JS(首选的方法是通过工具实现这个过程的自动化)。

第三种方式不仅使你的代码更有序,而且使得浏览器能够缓存它。这种方式在大多数的情况下都是首选,特别是一些大文件和多页面的情况。

CSS样式在上,JS脚本在下

当我们把样式放在标签中时,浏览器在渲染页面时就能尽早的知道每个标签的样式,我们的用户就会感觉这个页面加载的很快。

但是如果我们将样式放在页面的结尾,浏览器在渲染页面时就无法知道每个标签的样式,直到CSS被下载执行后。另一方面,对于Javascript来说,因为它在执行过程中会阻塞页面的渲染,所以我们要把它放在页面的结尾。

压缩你的html

为了保持代码的可读性,最好的方法是在代码中添加注释和使用缩进。


<p>Lorem ipsum dolor sit amet.</p>
<!-- My List -->
<ul>
  <li><a href="#"></a></li>
  <li><a href="#"></a></li>
  <li><a href="#"></a></li>
</ul>

但是对于浏览器来说,这些都是不重要的。正因为如此,通过自动化工具压缩你的HTML是非常有用的。


<p>Lorem ipsum dolor sit amet.</p><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>

通过移除多余的空白符、注释和一些与内容结构无关的的不需要的字符,能够节省一些字节。结果就是,你的用户能够享受到更快的下载、解析和执行。

HTML 在线压缩工具 http://kangax.github.io/html-minifier/

尝试async

为了解释这个属性对于性能优化是多么有用,我们应该先明白,当不使用它时会发生什么。


<script src="example.js"></script>

使用上面这种方式时,页面会在这个脚本文件被完全下载、解析、执行完后才去渲染之后的HTML,在这之前会一直处于阻塞状态。这就意味着会增加你的页面的加载时间。有时这种行为是我们希望的,而大多数时候则不想要。


<script async src="example.js"></script>

使用上面这种方式时,脚本的加载是异步的,不会影响到这之后的页面解析。脚本会在下载完之后立即执行。需要注意的是,如果有多个使用这种方式异步加载的脚本,他们是没有特定的执行顺序的。

By 于湛 发布于 2013.04.28 2,561 次浏览

如何优化你的HTML代码》上有1条评论

  1. Pingback引用通告: 如何通过JS让所有出站链接都在新窗口中打开 | WonderCSS

发表评论

电子邮件地址不会被公开。 必填项已用*标注