随着Web2.0技术的不断发展,Web前端的优化受到越来越多的关注,特别是JavaScript和CSS优化的讨论一直是热点,工具也相对丰富,而对HTML优化则有所忽视,最近,来自百度泛用户体验团队的工程师Miller(chenminliang)撰文强调了HTML优化的重要性和相关技巧。
Miller首先举例说明了HTML优化稍显忽略的事实:
在Steve Souders的大作《Even Faster Web Sites》中谈到非常多有效的前端优化方法,例如Javascript的加载、CSS选择符、图片优化、gzip、iframe问题等,唯独没有细说HTML优化。
他强调HTML优化虽然看似微小,但是不可忽视:
在整个前端的构成中,HTML是必不可少的一部分,而且是真正的展示“前端”。虽然与动辄十几K的Javascript相比,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:
HTML优化工具目前比较理想的是Absolute HTML Compressor,另外,PageSpeed1.6中也引入了HTML压缩功能,不过目前只有四个简单的策略,尚处于实验性阶段。
随着Web前端性能受到越来越多的关注,包括HTML优化在内的各个领域将得到进一步的发展,并不断提高Web的用户体验,InfoQ将继续关注和报道相关进展,感兴趣的读者可以查看富互联网(RIA)专题。
转载自InfoQ .
分享到:
相关推荐
不容忽视的首页SEO优化不容忽视的首页SEO优化不容忽视的首页SEO优化
2021年11个不可忽视的重要风险.pdf
如何优化C语言代码 代码终极优化 讲解一些必要的和容易忽视的优化
Android性能优化之被忽视的优化点本篇文章就博主本人的理解来讲述一些在Android开发中可以优化的地方ArrayList和Vector都是内部以数组实现的List,它们两唯一的区别就是对多线程的支持,ArrayList是线程不安全的,而...
20210727-东北证券-中国电建-601669-不可忽视的碳经济受益承包商.pdf
小班教师教育随笔《不该忽视的乖孩子》.doc
不应该忽视的 AIX 命令 不应该忽视的 AIX 命令
北上单日净流入百亿规律统计:一个不可忽视的积极信号.pdf
不能忽视的新能源汽车安全性——基于新能源汽车起火问题进行分析.pdf
终身体育不可忽视.doc
不可忽视的雷电.docx
运维监控不可忽视的指标
EDA技术的优化设计已经变为程序设计人员不可忽视的一个方面
数据库信息泄漏 不可忽视的安全短板.pdf数据库信息泄漏 不可忽视的安全短板.pdf数据库信息泄漏 不可忽视的安全短板.pdf数据库信息泄漏 不可忽视的安全短板.pdf数据库信息泄漏 不可忽视的安全短板.pdf数据库信息泄漏 ...
数据库信息泄漏 不可忽视的安全短板.docx数据库信息泄漏 不可忽视的安全短板.docx数据库信息泄漏 不可忽视的安全短板.docx数据库信息泄漏 不可忽视的安全短板.docx数据库信息泄漏 不可忽视的安全短板.docx数据库信息...
企业不可忽视成本企划.doc
抽象算法不可忽视算理支撑
20210813-中泰证券-主题基金研究系列之十:不可忽视的细节,货币基金如何选?.pdf
请不要忽视这些java基础知识 请不要忽视这些java基础知识