html代码优化与精简

过年归来,继续我的《高性能web前端优化指南》系列。虽然看的人少,顶的人更少,但我还是应该坚持下去,权且当作工作总结吧。

html代码优化与html优化并不是一回事,前者只是后者的一部分,html代码优化,就是在不大伤脑筋重构的前提下,或者说,在web整体架构结束后,进一步尽量减少html代码的字节数而已。

下面简单说一些html代码优化的技巧:

一,去除不必要的html标签

既然要削减代码体积,那就先从没必要保留的地方下手。也许你是用的智能编辑器如dreamweaver,VS等,让你点点鼠标就能插入代码,但这些代码中也有一些代码是不必要的。下面是一些常见的可优化的html标签。

  1. meta标签。除了其中的编码声明行,keyword与description子标签,其余的都可以不要。
  2. link标签。通常用来载入css文件,其余用途则可选择删掉;而且,link载入css时,带上type=”text/css”即可,不用再加上那句rel=”stylesheet”,media属性也可不要。
  3. 通常<html xmlns=”http://www.w3.org/1999/xhtml”>这句,其实只保留<html>即可
  4. script标签,也只保留type,而无需使用language属性
  5. 内容为空的属性。比如img的空白alt,a的空白title
  6. 加在不需要视觉操作的元素上的属性。如link,script上的class,id等(这个真心可删)

删除,是最简单的事,只要知道该删哪些。以上并没有列举完。

二,主动减少html标签

这点需要比较良好的代码知识。我们应该本着写更少的代码,做同样多的事情的心态来写html。

1,重点:减少html标签嵌套

就是能用1层标签的就不要用两层,然后通过css来达到相同的视觉效果。如有下面这样一个效果图:

这个块的html结构要怎么写呢?可以这么写:

<div>
<div><h2>相关文章</h2></div>
<div><ul><li>。。。</li></ul></div>
</div>

也可以这样:

<div>
<h2>相关文章</h2>
<ul><li>。。。</li></ul>
</div>

相比之下,后者代码精简的多,而且可以通过css实现相同的视觉效果。减少嵌套,对seo也更好。

不过,前者无疑具有更好的扩展性。比如你想在“相关文章”右边加一个“更多”链接,那前面这种结构容易修改多了。

所以,精简代码,是在确认了需求改动不频繁的前提下,否则以后修改起来会让你很痛苦。

2,尽量少使用行内css

就是style=”height..”这种。因为行内css每次都要加个style=,关键是,只能对此元素生效。不如用一个class代替,重用起来也方便。

3,合并css

把不需要判断条件载入的css文件给合并了,可以减少一个link标签,也就减少了一个http请求

三,web在线编辑器造成的噩梦

这个编辑器就是你在网页上发布文章时用的编辑器,如果你使用博客,空间,QQ空间等,你应该经常用web在线编辑器。

通常,写网站的与发文章的都是两批人。发文章的多是网站编辑,网页知识了解甚少。甚至有的人直接把文章从word文档里复制进编辑器,就发布了。这时,就会生成大量的垃圾代码。详细》

—————————————–分割线——————–

其实,代码的精简,随着你编码能力的提高,你就会不知不觉的实现它。因为谁也不喜欢做无用功,谁都希望事半功倍。如何精简,多半都要靠悟性了。

不过,只要你启用了gzip压缩,代码精简与否都是浮云!gzip能直接把html等文件体积压缩至原来的30%~50%。。。额

 

8 评论

发表评论

电子邮件地址不会被公开。