热点网|医学教育网|北京pk10开奖直播 pk10开奖直播 北京赛车pk10 pk10开奖直播 北京赛车pk10 PK10开奖直播 北京赛车pk10开奖直播 北京pk10 北京pk10
网站运营 | 站长学院 | 技术文档 | 成语 | 歇后语 | 桌面壁纸 | 帝国时代 | 代码收藏 | IP地址查询 | 生活百科 | 生日密码 | CSS压缩 | 用户评论

HTML优化

【 作者:Miller 更新时间:2010-05-18 | 字体:
[导读]在前段领域中<,对Javascript和CSS的优化一直是大家关注的焦点,相应的压缩优化工具也非常丰富,相对而言对HTML优化的关注则显得有些冷淡<。在Steve Souders的大作《Even Faster Web Sites》中谈到非常多有效的前端优化...

在前段领域中<,对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.chinawobo.com/rfc/rfc2396.txt 第5.2节描述)<<。Nexus One的这个页面中有些资源URL就删除了协议头<<,虽然并不是出于节省资源的目的<,但至少证明删除协议头是可行的。

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

3. 删除注释

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

(a). IE条件注释

<!--[if expression]> HTML <![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

原文:http://www.chinawobo.com/blog/2010/03/15/html%E4%BC%98%E5%8C%96-2/

友荐云推荐
  • 转载请注明来源:网站运营 网址:http://www.chinawobo.com/ 向您的朋友推荐此文章
  • 特别声明: 本站除部分特别声明禁止转载的专稿外的其他文章可以自由转载,但请务必注明出处和原始作者。文章版权归文章原始作者所有<<。对于被本站转载文章的个人和网站<<,我们表示深深的谢意。如果本站转载的文章有版权问题请联系我们,我们会尽快予以更正。
RSS订阅
  • QQ邮箱
  • 填写您的邮件地址,订阅我们的精彩内容:
更多
© 2014 网站运营 - T086.com(原itlearner.com)
  • 美媒:美国对华战略缺乏头脑 2018-05-23
  • 中国钢企布局沿海 柳钢瞄准东盟经济圈 2018-05-23
  • 2018的偶像元年是否只是一场美丽的谎言?偶像练习生创造101选秀 2018-05-22
  • 上海临港有个“儿童大学” 2018-05-20
  • 2017年世界大学学术排名发布 清华进前50大学学术排名大学排行榜 2018-05-20
  • 日本战犯侵华罪行自供 2018-05-19
  • 塑料污染让人痛心 世界最深海沟竟成“垃圾场” 2018-05-19
  • 男子因琐事杀害女友并分尸抛河 警方根据美甲破案嘉兴美甲死者 2018-05-18
  • 166名中国人在泰国操控中国股市被警方押扣审讯 2018-05-17
  • 消防车进商场——“小小消防员”的消防安全乐体验 2018-05-17
  • 学者:“感应舍利”的出现为何是“必然” 2018-05-16
  • 中国等国利用可再生能源创造上千万工作岗位 2018-05-16
  • 只有用在外语环境下学习的人才懂的13个瞬间! 2018-05-16
  • 外交部回应“中国首次在南沙群岛部署导弹系统” 2018-05-15
  • 陕甘宁边区发行的光华劵:为找零需要,增发6种辅币 2018-05-14
  • 微商货源 | 冠珠陶瓷 | 6688电视家官网 | 中康体检网 | 安徽极热网 | 北京赛车开奖号码 | 快猴网 | 迪威乐云商devmsn | 易奇八字 | wwe美国职业摔角 | 八字算命 | 河南旅游景点大全 | 冠珠陶瓷 | 广东旅游景点大全 |
    RunTime:7.16ms QueryTime:7