写点什么

不应忽视的 HTML 优化

  • 2010-05-13
  • 本文字数:1057 字

    阅读完需:约 3 分钟

随着 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)专题

2010-05-13 22:145022
用户头像

发布了 501 篇内容, 共 255.3 次阅读, 收获喜欢 59 次。

关注

评论

发布
暂无评论
发现更多内容

Seldon 使用 (二):打包模型

托内多

tensorflow kubeflow Kubernetes PyTorch seldon

深入剖析 | JVM-Sandbox核心源码

九叔(高翔龙)

JVM 中间件 类加载 Sandbox 类隔离

嘉云公司研发效能平台实践

小江

研发效能 CI/CD

GitHub已爆火的Java突击手册,全面详细对标P7岗!真的很全面

比伯

Java 编程 架构 程序人生 计算机

Java 并发基础(五):面试实战之多线程顺序打印

看山

Java并发

陪伴

小天同学

陪伴 育儿 个人感悟 4月日更

初入江湖,IT从业者应该如何选择?

云峰

hive的数据存储格式

大数据技术指南

hive 4月日更

关于列表转字符串这个过程的曲折

ベ布小禅

4月日更

浅析LSM-Tree存储模型

正向成长

LSM树 KV存储引擎

微服务网关方案:Kong & Nacos

程序员架构进阶

架构 微服务 API网关 28天写作 4月日更

「架构师训练营 4 期」大作业一&二

凯迪

架构师训练营 4 期

「架构师训练营 4 期」大作业二

凯迪

架构师训练营 4 期

企业上云一张网,华为将在分析师大会上亮出哪些大招?

脑极体

taskwarrior ,一款提升效率的命令行的 TODO list 工具

Red

效率工具 TODO linux操作

猫鼠游戏,一个刷票老千看在线投票项目的防范与取舍

ucsheep

安全 在线投票 防作弊 刷票

计算机原理学习笔记 Day2

穿过生命散发芬芳

计算机原理 4月日更

AI数据科学认证-2021年的最佳选择 John 易筋 ARTS 打卡 Week 44

John(易筋)

ARTS 打卡计划

css

赫鲁小夫

4月日更

对前端趋势的一些理解

葱小白

大前端

PI的一种简写。

山@支

华仔架构实战营 - 作业 - 模块2

曲元洪

架构实战营

TIOBE榜单四月已出:上古语言Fortran重回前20?

Bob

编程语言、 4月日更 Tiobe

并发容器与并发控制 - JUC

学Java关注我

Java 编程 程序员 架构 计算机

Docker 环境清理的常用方法

xcbeyond

Docker 4月日更

架构师训练营 4 期 大作业

引花眠

架构师训练营 4 期

Python OpenCV 图片高斯模糊

梦想橡皮擦

Python OpenCV 4月日更

重读《重构2》

顿晓

重构 4月日更

算法训练营 - 学习笔记 - 第二周

心在飞

翻译:《实用的Python编程》08_03_Debugging

codists

Python

吃透Nginx编译安装过程

书旅

nginx

不应忽视的HTML优化_Java_崔康_InfoQ精选文章