【AICon】探索RAG 技术在实际应用中遇到的挑战及应对策略!AICon精华内容已上线73%>>> 了解详情
写点什么

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

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

关注

评论

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

Nautilus Chain 现已推出测试网“Triton ”,有哪些潜在的机会?

股市老人

深入react源码看setState究竟做了什么?

flyzz177

React

天工人巧日争新:昇腾AI的绚丽今日

脑极体

AI

使用Nginx作为MySQL的TCP负载均衡器

Janwee

nginx 负载均衡 :MySQL 数据库

提示工程在AI绘画领域中的应用

FinFish

AI绘画 提示工程

微信小程序管理软件助力企业数字化转型,实现智能化升级

FinFish

私有小程序技术 小程序管理平台 小程序技术 小程序管理

MQTT 5.0新特性:属性与载荷

EMQ映云科技

物联网 IoT mqtt 企业号 3 月 PK 榜 载荷

毕业设计

张贺

Java中让两个线程交替执行的实现方式

Janwee

并发 信号量 java 多线程、

精华推荐 |【深度挖掘RocketMQ底层源码】「生产故障分析系列」深度挖掘RocketMQ底层那些导致消息丢失的汇总盘点透析(TIMEOUT_CLEAN_QUEUE)broker busy

洛神灬殇

RocketMQ 消息队列 3月日更 原理分析 底层源码

前端工程师leetcode算法面试必备-二分搜索算法(下)

js2030code

JavaScript LeetCode

最新Blender 3.3安装包+详细安装教程

Finovy Cloud

blender 3D软件

mybatis plus怎么使用注解的方式执行原生sql

俊俊哥

mybatis Mybatis-Plus 原生sql

PyTorch深度学习实战 | 搭建卷积神经网络进行图像分类与图像风格迁移

TiAmo

PyTorch 图像处理

看透react源码之感受react的进化

goClient1992

React

Amazon Detective 支持 Amazon EKS 上的 Kubernetes 工作负载以进行安全调查

亚马逊云科技 (Amazon Web Services)

马克·安德森:纯粹产品护城河在硅谷少见,SaaS公司护城河是“分销”

B Impact

如何用好免费的chatGPT

劼哥stone

人工智能 openai ChatGPT

一天吃透分布式事务八股文

程序员大彬

Java 分布式事务

细说react源码中的合成事件

flyzz177

React

用javascript分类刷leetcode3.动态规划(图文视频讲解)

js2030code

JavaScript LeetCode

前端工程师leetcode算法面试必备-二分搜索算法(上)

js2030code

JavaScript LeetCode

Java线程池执行器的饱和策略

Janwee

线程池 java

运维训练营第17周作业

好吃不贵

React源码分析(一)Fiber

goClient1992

React

React-Hooks源码深度解读

goClient1992

React

深入探究 Go log 标准库

江湖十年

Go 后端 日志 log

盘点10款优秀的工作任务进度管理软件

PingCode

项目管理 项目进度管理 项目进度管理软件

什么大模型?我是时尚产业“大模王”!

脑极体

AI

Nautilus Chain 现已推出测试网“Triton ”,有哪些潜在的机会?

EOSdreamer111

React Context源码是怎么实现的呢

flyzz177

React

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