不应忽视的HTML优化
2010-05-20 10:40
218 查看
作者
崔康
发布于
2010年5月13日 下午10时14分
随着Web2.0技术的不断发展,Web前端的优化受到越来越多的关注,特别是JavaScript和CSS优化的讨论一直是热点,工具也
相对丰富,而对HTML优化则有所忽视,最近,来自百度泛用户体验团队
的工程师Miller
(chenminliang)撰
文
强调了HTML优化的重要性和相关技巧。
Miller首先举例说明了HTML优化稍显忽略的事实:
他强调HTML优化虽然看似微小,但是不可忽视:
Miller在文中总结了HTML优化的各种方法,将其分为两类:绿色规则
——在各类页面中适用且无害和橙色规则
——
在某些具体的情况下才适用或者有违标准。
绿色规则可以概括为以下几种:
使用相对URL
,某些href、src属性如果与当前页面处于同一域名下,则使用相对URL能够节省至少一个域名的长度。
删除HTTP或者HTTPS
,绝对URL都以HTTP或HTTPS等协议头开始,如果能确定URL的协议与当前页面URL
的协议是一致的,或者说该URL在多种协议下均是可用的,则可以考虑删除这个协议头。
删除注释
,考虑不必要的IE条件注释和CDATA注释及自定义注释。
压缩空白符
,对于多数标签,可以通过删除多余的空白符来减少HTML体积,但是对于pre等是例外。
压缩inline css & Javascript
,不管inline还是external,都需要压缩,这是
减小体积的最直接的方式。
CSS&Javascript尽量外链
,不仅可以减少体积,还能够充分利用浏览器的缓存机制。
删除元素默认属性
,在HTML规范
中,很多HTML元素的属性是有默认值的,对于这些默
认值可以抹去不写。
橙色规则就不一一列举了,感兴趣的读者可以直接查看原
文
。
除了优化技巧之外,Miller特别推荐了两款相关工具——Absolute HTML Compressor和PageSpeed1.6:
随着Web前端性能受到越来越多的关注,包括HTML优化在内的各个领域将得到进一步的发展,并不断提高Web的用户体验,InfoQ将继续关注和
报道相关进展,感兴趣的读者可以查看富互联网(RIA)专题
。
崔康
发布于
2010年5月13日 下午10时14分
随着Web2.0技术的不断发展,Web前端的优化受到越来越多的关注,特别是JavaScript和CSS优化的讨论一直是热点,工具也
相对丰富,而对HTML优化则有所忽视,最近,来自百度泛用户体验团队
的工程师Miller
(chenminliang)撰
文
强调了HTML优化的重要性和相关技巧。
Miller首先举例说明了HTML优化稍显忽略的事实:
在Steve Souders
的大作《Even Faster Web Sites
》
中谈到非常多有效的前端优化方法,例如Javascript的加载、CSS选择符、图片优化、gzip、iframe问题等,唯独没有细说HTML优化。
的大作《Even Faster Web Sites
》
中谈到非常多有效的前端优化方法,例如Javascript的加载、CSS选择符、图片优化、gzip、iframe问题等,唯独没有细说HTML优化。
他强调HTML优化虽然看似微小,但是不可忽视:
在整个前端的构成中,HTML是必不可少的一部分,而且是真正的展示“前端”。虽然与动辄十几K的Javascript相
比,HTML的大小在整个页面资源中一般不会占太多的比重,而且还有Gzip,但是事实表明,大多数页面都有较大的压缩余地,即使是Gzip过后仍然能减
小可观的体积...
比,HTML的大小在整个页面资源中一般不会占太多的比重,而且还有Gzip,但是事实表明,大多数页面都有较大的压缩余地,即使是Gzip过后仍然能减
小可观的体积...
Miller在文中总结了HTML优化的各种方法,将其分为两类:绿色规则
——在各类页面中适用且无害和橙色规则
——
在某些具体的情况下才适用或者有违标准。
绿色规则可以概括为以下几种:
使用相对URL
,某些href、src属性如果与当前页面处于同一域名下,则使用相对URL能够节省至少一个域名的长度。
删除HTTP或者HTTPS
,绝对URL都以HTTP或HTTPS等协议头开始,如果能确定URL的协议与当前页面URL
的协议是一致的,或者说该URL在多种协议下均是可用的,则可以考虑删除这个协议头。
删除注释
,考虑不必要的IE条件注释和CDATA注释及自定义注释。
压缩空白符
,对于多数标签,可以通过删除多余的空白符来减少HTML体积,但是对于pre等是例外。
压缩inline css & Javascript
,不管inline还是external,都需要压缩,这是
减小体积的最直接的方式。
CSS&Javascript尽量外链
,不仅可以减少体积,还能够充分利用浏览器的缓存机制。
删除元素默认属性
,在HTML规范
中,很多HTML元素的属性是有默认值的,对于这些默
认值可以抹去不写。
橙色规则就不一一列举了,感兴趣的读者可以直接查看原
文
。
除了优化技巧之外,Miller特别推荐了两款相关工具——Absolute HTML Compressor和PageSpeed1.6:
随着Web前端性能受到越来越多的关注,包括HTML优化在内的各个领域将得到进一步的发展,并不断提高Web的用户体验,InfoQ将继续关注和
报道相关进展,感兴趣的读者可以查看富互联网(RIA)专题
。
相关文章推荐
- 不应忽视的HTML优化
- 不应忽视的HTML优化
- 不应忽视的HTML优化
- 不应忽视的HTML优化
- 不能忽视的HTML优化绿色规则
- 移动端html页面优化
- HTML的file显示优化处理
- HTML: 引号不能忽视
- 合理利用HTML标记优化网页布局
- html+css代码优化推荐读物
- Android性能优化之被忽视的优化点
- SQL优化--使用 EXISTS 代替 IN 和 关联查询(inner join) (转载)http://www.cnblogs.com/zping/archive/2008/08/05/1260959.html
- 你不可不知的 HTML 优化技巧
- HTML方面优化 (4)
- 谈谈Asp.net网站优化二:关于 服务器控件 和 客户端控件(html标签)的选择
- 初学HTML过程中容易忽视的知识小点
- WebKit的HTML解析顺序和优化
- 【北京讲座】jQuery性能优化和HTML 5下的Web开发(2011.12.18)
- 大型网站性能优化 二 页面(HTML)优化的方法
- SEO基础优化必学的8大html标签