前端开发中的HTML优化

标签: 前端开发 HTML 性能优化 | 发表时间:2011-12-14 14:22 | 作者:直觉
出处:http://www.kekaku.com

在前端领域中,对Javascript和CSS的优化一直是大家关注的焦点,相应的压缩优化工具也非常丰富,相对而言对HTML优化的关注则显得有些冷淡。在 Steve Souders的大作《Even Faster Web Sites》中谈到非常多有效的前端优化方法,例如Javascript的加载、CSS选择符、图片优化、gzip、iframe问题等,唯独没有细说HTML优化。在整个前端的构成中,HTML是必不可少的一部分,而且是真正的展示“前端”。虽然与动辄十几K的Javascript相比,HTML的大小在整个页面资源中一般不会占太多的比重,而且还有Gzip,但是事实表明,大多数页面都有较大的压缩余地,即使是Gzip过后仍然能减小可观的体积,这一事实在后续的文章中会给出,本文主要讨论HTML优化的一些可行和看上去不那么可行的途径。

对于各种优化途径,如果一定要我给一个分类的话,我会用颜色来区分。对于那些在各种页面中都适用而且无害的方法,我将它们归为 绿色。相对而言,只有在某些具体的情况下才适用或者有违标准的方法归为 橙色

绿色方法

1. 使用相对URL

对于页面中的各种URL,例如链接、外链CSS的href、外链Javascript的src、图片src、iframe src等,如果能够确定它们与当前页面是处于同一域名下的话,则可以使用相对URL,这样每一个URL都能够节省至少一个域名的长度。

2. 删除HTTP或HTTPS

绝对URL都以HTTP或HTTPS等协议头开始,如果能确定URL的协议与当前页面URL的协议是一致的,或者说该URL在多种协议下均是可用的,则可以考虑删除这个协议头。这样做虽然有些非主流,但事实证明是可行的,而且也有理论依据(见 http://www.ietf.org/rfc/rfc2396.txt 第5.2节描述)。 Nexus One的这个页面中有些资源URL就删除了协议头,虽然并不是出于节省资源的 目的,但至少证明删除协议头是可行的。

对于CSS,如果删除协议头 在IE7、IE8下会造成CSS下载两次,这个是需要注意的问题。

3. 删除注释

与CSS、Javascript一样,也可以通过删除HTML中的注释来实现优化。然而,这一点对于HTML来说却要复杂一些,因为在HTML中存在某些特殊作用的注释是不能删除的。

(a). IE条件注释

<!--[if expression]&gt; HTML &lt;![endif-->

诸如这样的语法,只有符合expression的浏览器才能识别其中的内容。

(b). CDATA注释

/*  */

CDATA本身是XHTML中才需要的,在CDATA中的内容不需要对特殊字符进行转义,不过为了兼容老版本的浏览器,需要加上注释,以免出错。不过,对于这个注释,如果你的页面并没有真正的使用XHTML标准则可以大胆的删除掉。使用XHTML标准不是简单的声明DTD就可以办到的,除此之外还需要服务器能够派application/xhtml+xml这样的内容格式,另外还需要浏览器支持,目前IE并不支持XHTML格式。因此,目前你的页面可能是按照XHTML规范来写的,也能通过HTML验证,但想要兼容IE则一定还是以HTML方式来展示的。这样一来,很多为了遵循标准而增加的内容则可以删除,具体的在后文的橙色部分详述。

(c). 自定义注释

产品中自定义的一些具有特定功能的注释,例如统计。

4. 压缩空白符

在HTML中的大多数标签中,多个空白符都会被压缩成一个来显示,于是可以通过删除多余的空白符来减小HTML体积。不过需要注意的是并不是所有的空白符都可以这样做,例如pre、textarea中的空白符是按原样显示的,标签属性中的属性值也是按原样显示的,例如title、value等。

5. 压缩inline css & Javascript

不管inline还是external,都需要压缩,这是减小体积的最直接的方式。

6. CSS&Javascript尽量外链

外链CSS和Javascript,不仅仅是减小HTML本身的体积,而且还可以充分利用浏览器的缓存机制,所以当CSS、Javascript的代码量超过一定体积时,尽量外链。除此之外,尽量避免在页面中使用 onmouseover="xxxx"的方式来注册事件,既不利于维护也容易产生不必要的冗余代码。

7. 删除元素默认属性

HTML规范中,很多HTML元素的属性是有默认值的,对于这些默认值可以抹去不写,下面是不完全统计。

标签 属性 默认值
style media screen
link media screen
form method get
form
input type text

橙色方法

橙色方法是指那些有违标准,或者会导致页面出现无法预料的问题的一类方法,算是一类非常规的方法,因此也仅仅适用于一些非常规的页面,例如搜索引擎首页。

1. 删除或替换

DOCTYPE对于页面展现非常重要,浏览器会根据具体的DOCTYPE来 决定如何显示页面,除非你对删除DOCTYPE后的页面展示十分有把握,否则不要轻易删除。另外一种可行的方式是采用HTML5中的写法,即,大多数浏览器能够将这种doctype写法解析为标准或准标准(Almost Standard)模式,不过依然会造成一些问题,具体见 这里。目前 百度Google都是这么做的。

2. 删除标签属性值的引号

引号不是必须的,删之。此处也需要考虑一些特殊情况,例如属性值中包含引号等。

(提醒:不符合XHTML规范)

3. 省略某些属性值

例如disabled、checked、multiple等的值都可以省略。

(提醒:不符合XHTML规范)

4. 删除可选的闭合标签

例如body、p、tr等标签是允许没有闭合标签的,具体的参考 此处

(提醒:不符合XHTML规范)

5. 删除自动闭合标签的”/”

(提醒:不符合XHTML规范)

工具

HTML优化工具目前比较理想的是 Absolute HTML Compressor,另外, PageSpeed1.6中也引入了HTML压缩功能,不过目前只有 四个简单的策略,尚处于实验性阶段。随着大家对前端性能越来越高的关注度,HTML优化及压缩方面也一定会有所发展的。

总结

1. HTML优化及压缩的发展滞后于前端其他资源,不过目前也已经引起大家越来越多的关注。

2. 绿色规则中的很多都是在写码过程中就可以注意和遵循的,如果能把这个优化融入到编码中,效果应该更好。

3. 橙色规则由于违背某些规范,只适用于某些特定的页面,使用时务必谨慎。

参考资料

HTML minify – to be or not to be?

Optimizing HTML

Optimizing Optimizing HTML

您可能也喜欢:

35個以HTML5架構的網頁設計作品 (@mydesy)

[工具]15種CSS與HTML語法產生器 (@mydesy)

Web 前端优化最佳实践之 Server 篇

Web前端优化最佳实践之 内容篇

浏览器的加载与页面性能优化
无觅

相关 [前端 开发 html] 推荐:

前端开发中的HTML优化

- - 可咔酷 | 网络杂货铺
在前端领域中,对Javascript和CSS的优化一直是大家关注的焦点,相应的压缩优化工具也非常丰富,相对而言对HTML优化的关注则显得有些冷淡. 在 Steve Souders的大作《Even Faster Web Sites》中谈到非常多有效的前端优化方法,例如Javascript的加载、CSS选择符、图片优化、gzip、iframe问题等,唯独没有细说HTML优化.

前端开发中HTML与javascript的常用字符编码

- mingelz - UED TEAM,用户体验设计,web前端开发
在日常的前端开发工作中,我们会经常的与HTML、javascript、css等语言打交道,和一门真正的语言一样,计算机语言也有它的字母表、语法、词法、编码方式等,在这里我简单的谈一下前端HTML与javascript日常工作中常碰到的编码问题. 在计算机中,我们储存的信息都是用二进制码表示的. 我们认识的、屏幕上显示的英文、汉字等符号和储存用的二进制代码的互相转换,就是编码.

前端开发中最常见的12个HTML标签错误

- - ITeye资讯频道
开发者在写HTML代码的时候一定要仔细,并熟练掌握HTML规则,因为一不留神则可能出现一些微小的错误,但有可能会导致严重的后果. 本文列举了一些在HTML中常见的错误,并且给出了如何避免错误的方法. 相信这些方法会对前端开发者有一些帮助. 正确使用HTML tag的结束标记非常重要,HTML tag的结束标记的顺序要和开始标记一致,而新手往往会忽视这点.

为什么 Web 前端开发不抛弃 HTML 和 CSS,用纯 JavaScript 开发?

- - 知乎每日精选
首先要确定,即使抛开游戏不论,一般的Web应用或者网站,完全用JavaScript开发也是可行的. 比如ExtJS、webOS的Enyo等. 但是主流Web开发很少采用全JS的方案. 注重考虑那些无法运行JS的用户代理. 用户使用不支持JS的浏览器(比如较老的手机浏览器),或者禁用脚本. 当然你可以选择忽略这一小撮用户,尤其是现在绝大多数网站和应用也是如此选择的,但是至少我们应该对坚持考虑无JS情况的开发者予以基本的尊重.

用JavaScript+html来开发win8 app—Hello World

- - 博客园_首页
在win8+vs2012环境下面,我们除了能用C#,C++来开发win8的app,还可以用js+html直接开发win8的app. 2.修改default.html. 在body里面用标准的html input控件添加了一个button. 新建完项目VS会自动引用default.js. 我们可以把绑定事件的js代码放到这里.

前端优化三续:用script存放html代码来减少DOM节点数

- - 博客园_旁观者
前端优化三续:美团的实践——用script存放html代码来减少DOM节点数. 玉伯在《 淘宝详情页的 BigRender 优化与存放大块 HTML 内容的最佳方式》中提到,. 与前面  textarea 存放 html 代码 一样,你也可以 用 script 来存放,目的都是减少 DOM 节点数.

13个最常用的CSS和HTML快速开发工具

- - ITeye资讯频道
英文原文: 13 Most Used Speedy Tools To Write CSS And HTML Code. CleverCSS是个用于CSS开发的小型标记语言,从Python中得到灵感. 可以开发出干净、结构清晰的样式表. 在许多方面它比CSS2都更简洁、强大. 它与CSS最明显不同之处在于语法:CleverCSS采用了缩进式语法而不是对齐.

AppMobi公开HTML 5游戏开发工具

- - HTML5研究小组
AppMobi发布了公测版PlayMobi,这是一种HTML 5游戏开发工具,用于开发iOS,Android,Facebook游戏,同样为不同的支付系统提了“1touch”跨平台应用内购买方案. AppMobi说:PlayMobi游戏可为不同的支付系统自动完成转账交易,比如iOS的iTunes,Android版Google Payments,Facebook的Credits 及Open Web(即Facebook以外的游戏)的Paypal.

cut the rope HTML 5版本背后的开发故事

- - HTML5研究小组
译者注: Cut the Rope 是一款人见人爱的小游戏. 有一个开发团队将它改造成了HTML5版本. 想看看他们在改造过程中的经验之谈吗. 那就看下面由开发人员自己写的文章吧~. 在IE9中作为一个HTML5应用来运行,从原始的iOS源码改写而来. Cut the Rope 是一款人见人爱的小游戏.

HTML 5移动web开发指南中sencha touch笔记

- - ITeye博客
《HTML 5移动web开发指南》,是UC公司著名前端开发师唐俊开(网名:三桥). 的新书,介绍了jquery mobile,sencha touch,phonegap的开发,内容很丰富,. 最后还有一个小的实例,推荐阅读,给分85分,下面是其中sencha touch的. 一些本人新学到的知识点小结.