• 不应忽视的HTML优化


    来源于InfoQ

    随着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压缩功能,不过目前只有四个简单的策略,尚 处于实验性阶段。
  • 相关阅读:
    飞入飞出效果
    【JSOI 2008】星球大战 Starwar
    POJ 1094 Sorting It All Out
    POJ 2728 Desert King
    【ZJOI 2008】树的统计 Count
    【SCOI 2009】生日快乐
    POJ 3580 SuperMemo
    POJ 1639 Picnic Planning
    POJ 2976 Dropping Tests
    SPOJ QTREE
  • 原文地址:https://www.cnblogs.com/TylerCui/p/1959860.html
Copyright © 2020-2023  润新知