AICon 上海站|90%日程已就绪,解锁Al未来! 了解详情
写点什么

不应忽视的 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:145181
用户头像

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

关注

评论

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

容灾切换时间减少 99%,“云边协同”如何提升影演服务效率与稳定性

阿里巴巴云原生

阿里云 云原生

LeaRun快速开发框架如何解决低代码劣势?

力软低代码开发平台

深入理解 Serverless 计算的并发度

阿里巴巴云原生

阿里云 Serverless 云原生

安卓快速启动,启动速度 285 毫秒的实时安卓操作系统(RTAndroid)或 实时 Linux

winfredy

android Linux 快速启动

云和恩墨大讲堂 x 长江鲲鹏 x openGauss Meetup(武汉站)圆满落幕!

daydayup

opengauss

openGauss数据库源码解析系列文章——执行器解析(1.1)

daydayup

opengauss

和鲸 ModelWhale 与麒麟系统适配认证,打造自主安全、性能可靠的信创 AI 基础软件

ModelWhale

人工智能 信创 国产 麒麟软件 数据科学平台

我也创业了!

Serverless Devs

人工智能 Serverless 云原生

程序化广告还有未来么?——程序化领域变化的底层逻辑和反思

不在线第一只蜗牛

系统架构 系统搭建 程序化

搭建 OpenTiny 组件库的 Playground 指导手册

OpenTiny社区

开源 Vue 前端 UI组件库

活动回顾丨云原生技术实践营广州站回放 & PPT 下载

阿里巴巴云原生

阿里云 云原生

第一批AIGC独角兽开始裁员了

Openlab_cosmoplat

人工智能

第二届粤港澳大湾区(黄埔)国际算法算例大赛正式开启报名

ModelWhale

算法大赛 琶洲 院士 数据科学竞赛 算法赛

网关改造正当时,跟学 HigressOps 夏季营

阿里巴巴云原生

可视化逻辑编排工具——低代码/无代码平台

互联网工科生

软件开发 低代码 无代码 JNPF

3种常见的测试自动化类型

汽车之家客户端前端团队

前端 单元测试 集成测试 自动化测试 端到端

记一次容器环境下出现 Address not available

阿里巴巴云原生

阿里云 容器 云原生

MobPush Android SDK 厂商推送限制

MobTech袤博科技

消息推送 Android; 智能推送 推送 推送系统

Docker的架构与安装

timerring

Docker

MySQL能用OFFSET分页查询吗

fm

MySQL

一文了解 MySQL 全新版本模型

爱可生开源社区

NFTScan | 07.17~07.23 NFT 市场热点汇总

NFT Research

NFT\

openGauss 5.0.0支持用户级全量审计解密

daydayup

opengauss

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