HTML 优化

HTML 优化

本文通过一些案例讲述了常见的优化 HTML 的几种小技巧:减少 DOM 树、精简 HTML 文件大小等。

优化 DOM 节点树

去除页面除首屏外的对于用户不可见的信息区块,可以让页面的 DOM 节点数更少,DOM 树结构更简单,然后再使用懒加载异步化请求,去动态加载这些不可见的信息区块。

在《大型网站性能优化实战》这本书中,作者为了优化搜索页面的渲染瓶颈问题,将首屏以下的 33 各搜索结果对应的 HTML 代码放到 <textarea> 节点中,当该区域处于可见状态时,再从 TextArea 中取出 HTML 代码,恢复到 DOM 树中进行渲染。这样一来,页面首次渲染的 DOM 树所包含的节点数大幅度减少,从而有效提高了首次渲染速度。

多个空格合并为一个空格

通过将多个空格合并为一个空格,可以减少 HTML 的大小,从而缩短传输 HTML 文件所需的时间。通常在编写 HTML 文件的时候,总是倾向于格式化它,以方便我们人类阅读,所以这个文件中填充了许多空格,但这些空格对于浏览器来说是用不到的。在替换空格的时候,需要保留 <pre><textarea><script><style> 中的空格。

不过,如果你的网页中使用了 white-space: pre 这个 CSS 属性就要小心了,这个属性可以避免让多个空格压缩为一个,在实际开发网站的时候,其实也很少用到这个属性。如果确实需要,那么就放弃把 HTML 的多个空格合并为一个空格吧。

<html>

  <head>
    <title>Hello,   world!   </title>
    <script> var x = 'Hello,   world!';</script>
  </head>

  <body>
    Hello, World!
    <pre>
      Hello,
        World!
    </pre>
  </body>

</html>

转为:

<html>
<head>
<title>Hello, world!</title>
<script> var x = 'Hello,   world!';</script>
</head>
<body>
Hello, World!
<pre>
      Hello,
        World!
</pre>
</body>
</html>

精简属性

<button> 按钮的 disabled 属性:

<button name="ok" disabled="disabled">

可以写为

<button name="ok" disabled>

<form> 表单:

<form method="get">

可以写为:

<form>

即许多 HTML 节点的属性都有默认值,如果指定的属性值等于默认属性的值,那么就可以移除掉。

移除注释

如下的 HTML 片段带有注释,去除注释,可以减少 HTML 文件的体积:

<i class="service_ico">
    <!-- 常态 icon -->
    <img class="service_ico_img"
            src="service_ico_img.png"/>
    <!-- hover 态 icon -->
    <img class="service_ico_img_hover"
            src="service_ico_img_hover.png"/>
</i>

移除引号

<html>
  <head>
  </head>
  <body>
    <img src="BikeCrashIcn.png" align='left' alt="" border="0" width='70' height='30' >
  </body>
</html>

转变为

<html>
  <head>
  </head>
  <body>
    <img src=BikeCrashIcn.png align=left alt="" border=0 width=70 height=30 >
  </body>
</html>

一方面去除了无关的引用,另外一方面也有利于 Gzip 算法的压缩。

精简 URL 链接

如果 URL 的协议头与当前页面的协议头一致,那么可以删除协议头;在表达 URL 路径的时候,如果 HOST 与本网页一致,那么此 URL 也没必要使用绝对 URL 路径,使用相对 URL 路径即可。

<html>
  <head>
  <base href="http://www.example.com/">
  </head>
  <body>
    <a href="http://www.example.com/bar">Link with long URL</a >
    <img src="http://www.othersite.example.org/image.jpg">
  </body>
</html>

转变为:

<html>
  <head>
  <base href="http://www.example.com/">
  </head>
  <body>
    <a href="bar">Link with long URL</a >
    <img src="//www.othersite.example.org/image.jpg">
  </body>
</html>

参考

扫描下面二维码,在手机端阅读本文: