为何要保持标签整洁
客户端的优化近来倍受关注，可是有些较基本的方面却被忽视。如果你仔细观察某些页面（即便是那些本来应该深度优化的页面），很容易就能在他们的标签中找到一大堆冗余的、不高效的结构。所有这些累赘给本来应该尽可能保持轻量级的页面增加了不必要的负担。
保持文档整洁的原因不一定是为了更快的加载速度，更是为了让我们的建筑能有一个结实而牢固的基础，整洁的标记意味着更好的可访问性，更方便的维护，更易被搜索引擎检索，更小的体积仅仅是保持文档整洁的一个附加属性，也是我们应该这样做的另一个理由。
这篇文章里面，我们来瞧瞧html该如何优化：去掉一些不好的标记习惯、通过删除冗余的结构来减小文档体积，并应用压缩技术，我们来瞧瞧现有的压缩工具，并分析他们做得好和做得不好的地方，我们也会探讨一下在将来可以怎么做。
一团糟的写法
来看看有哪些最容易犯的错误
1.在script标签内放html注释
当今一个最严重的冗余代码是在script标签内放置HTML注释——<!-- -->，这里不需要说得太多，一句话足够：需要通过这种方式来阻止错误的浏览器（例如‘95 Netscape 1.0）几乎灭绝了，脚本内的注释是完全不必要的累赘，应该被毫不留情地删除掉。
2.<![CDATA[ … ]>块
另外一种常见但是不必要的阻止错误的方式是将CDATA块放到script标签内：
<script type="text/javascript">
//<![CDATA[
...
//]]>
</script>
这个神圣的目标不切实际。尽管CDATA块是一个阻止XML解析器将<和&当成标签的开头的一个很好的方式，但是只有在真正的XHTML文档（被当成“application/xhtml+xml” content-type来处理的文档）内才有效。目前大部分的网页仍然被当成“text/html”来处理的（因为，举个例子，IE目前仍然不支持 XHTML），所以他们都被当成HTML来解析，而不是XML。
除非你已经把文档当成"application/xhtml+xml"来处理，否则几乎没有任何理由把CDATA块放在里面，即便你打算以后使用XHTML，也有必要先把这些不必要的东西去除，等到真正需要的时候再加进来。
当然，一个终极的解决方案是完全避免使用内联的script标签（为了利用外部script的缓存机制）。
3.类似onclick="…", onmouseover=""这些
html事件属性有一些合理的应用场景，比如为了性能上的考虑或者为了应付古老的浏览器（尽管我还没有发现只支持html事件属性注册方式——onclick="..."而不支持dom节点属性注册方式element.onclick = ...的情况）。除了一些众所周知的拒绝它们的理由如行为和内容的分离或者便于重用，它还会污染html标记。把事件逻辑转移到外部的脚本里面，我们可以充分利用脚本的缓存机制。事件处理逻辑不必在每次的页面请求中都被传送到客户端。
4.onclick="javascript:…"
javascript 中一个很有趣的怪现象：javascript:伪协议和html事件属性处理器混合成了这样一个怪胎（发生的几率高达106,000 (!)），事实上html属性上的事件处理器会整体变成一个函数体，然后这个函数变成一个事件处理程序(通常，会先把函数的作用域加强来包含元素本身和它的部分或全部的父级)。“javascript:” 这部分变成了一个不必要的标签并且几乎没有任何作用。
5. href="javascript:void(0)"
继续javascript伪协议，有一个很著名的代码片段：href=”javascript:void(0)”，他的作用是阻止链接的默认行为。当javascript被禁用、不可用或出错的时候这个糟糕的写法使得链接完全不可访问。毫无疑问最理想的处理方法是将合适的url写入href里面，然后通过事件处理器来阻止链接的默认行为。另一种情况，如果链接是动态创建之后插入到页面中（或者最初是隐藏的，然后才通过 javascript让其显示），使用href=”#”比用javascript:更整洁，更快速。
6.style="…"
使用style属性并没有什么太严重的错误，只是如果把它里面的内容转移到一个外部的样式表里面，我们就能利用到源代码的缓存机制。这跟前面提到过的 html属性事件处理器类似。即便你只是为了给一个特定的元素设定样式并且没有打算重用它们，这些样式信息会在每次页面被请求的时候都传送一次。把样式转移到外部样式表里面能防止这个，因为外部样式表传送一次之后会缓存到客户端。
7.<script language=”Javascript” … >
也许一个最搞不懂的属性就是script标签的language属性，这个古老的属性早在1999年、10年前官方推荐HTML 4.01标准的时候就被抛弃了，除非在必须指定javascript版本（这个也不太可靠，应该尽可能避免）这种极少的情况下，否则没有任何理由继续使用这个属性。
8.<script charset=”…” … >
另一个搞不懂的属性是script的charset属性，有时候我会见到下面这种结构：
<script type="text/javascript" charset="UTF-8">
...
</script>
这里要说的是charset属性只放在“外部”script标签（有写src 属性的script标签）上才有意义。HTML 4.01 甚至说：
注意charset属性指定了src属性所指定的脚本的字符编码；它不关心script标签的内容。
测试表明浏览器都遵循了这条标准。
搜索一下这个结构，出现了2000次。当你发现像Textmate这些流行的编辑器里面都错误地使用了charset之后就一点都不觉得奇怪了。
9. 附加的优化方法
刚才我们说到了一些应该避免的不好的写法，但是还有一些，那就是删除冗余的部分。下面提到的一些优化是有些争议的，因为他们主要出于体积上的考虑。所以我把它们放在这里不是作为建议，而是作为一种选择。请各位三思而行。
1. <style media=”all” …>
HTML 4.01定义了style上的media属性，用来指定特定的媒介——屏幕、打印机、手持设备等等。media的一个可能的值是all，这个值恰好是现代浏览器的默认值，如果你发现自己在使用media="all"，那么你可以省去它，让浏览器自动帮你设置
有趣的是，HTML 4.01说media的默认值是"screen"。但是我测试的每一款浏览器都没有按照这条标准来执行，而把默认值设定成了"all"。这可能就是为什么HTML5草案把默认值指定为"all"，来和浏览器的行为达成一致。
2.<form method=”get” …>
另一个默认值——GET——form 的"method"属性常常是被明确设定的。其实除了不够清晰，省去它没有其他坏处。注意HTML 5草案没有更改这个行为。
3. <input type=”text” …>
INPUT元素的type属性默认值为"text"——在HTML 4.01和HTML 5草案里面都是如此。去掉这个属性对有很多文本输入框的页面来说能减少很大一部分体积。
4.<meta http-equiv=”Content-type” …>
指定页面的字符编码总是给人很大的困惑。和我们想当然的相反，META元素上指定的Content-type没有 HTTP头里面指定的“Content-type”的优先级高。当二者（HTTP头和META元素）都被设定的情况下，HTTP头优先。
如果你能控制服务器返回并且能够正确地设定HTTP头的Content-type，那么省略META标签也是可以的。保留它的唯一原因是为离线浏览该页面的时候指定编码。
5.<a id=”…” name=”…” …>
把”name”属性和”id”属性一起使用的主要原因是为了兼容古老的浏览器（如Netscape 4）。他们不能链接到用“id”指定的锚点，所以必须设置”name”，如果你的页面有有元素既设置了”id”又设置了”name”，并且不在意这些古老的浏览器，那么你可以摆脱这个古老的写法了。
注意一些副作用。如果你在脚本中通过name来查询元素（document.getElementsByName，document.evaluate，document.querySelectorAll等等）把name替换成id可能会把事情搞砸。还要记住document.anchors只返回带有name属性的元素。
6.<!doctype html>
一年多以前，Dustin Diaz建议使用HTML 5文档类型，作为减少页面体积的一个途径。这不是一个重要的优化方式，但是如果你不在乎是否通过检验并且需要使页面尽可能小巧，使用<!doctype html>是一个可行的备选方案。测试表明这个奇特的文档声明可以触发大量的浏览器的标准模式。
激进的优化方法
如果你渴望更多的，这里还有一些比较极端的方法。有一些（如略去选填的标签）已经出现过一段时间了，还有些之前没出现过。尽管这些做法看起来有些唐突，但是它们都可以通过检验，如果你的页面是HTML的而不是XHTML的。但是你的页面是HTML的，不是吗？;)
- 去掉HTML注释
- 去掉/减少空格
- 省去选填的结束标签(
<p> → <p>foo)
- 如果允许，去掉属性值的引号 (
<p class="foo"> → <p class=foo>)
- 删除布尔类型的属性的选填值(
<option selected="selected"> → <option selected>)
- 转移内联样式、内联脚本、和html事件属性 (如果不能删掉它们的话)
- 转移class和id(需要同步修改脚本和样式)
- 把URL的协议名称去掉 (
http://example.com → //example.com)
但我们可以压缩
当页面压缩之后这些优化还有意义吗？难道gzip不是已经把这些冗余的标记都搞定了吗？毕竟，我们说的是一个文本格式的东西。
用处还是有的！
首先，必须清楚不是每个人都能gzip，这是很悲哀的事情，但好的一面是在这种情况下HTML 优化的意义就更大了。
其次，即便页面压缩了，我们还可以节省5-10kb(平均每个页面)。在比较大的页面中还可以节省得更多。尽管看上去也没有太多，但实际上每一个字节都很重要。
作为一个压缩大型页面的例子，我优化了一下非官方的ECMA-262, 第三版规范的HTML版本，这个页面最初为750KB(gzip之后为131KB)，优化之后为606KB(gzip之后115KB)。也就是说gzip之后节省了16KB，仅仅是去掉空格、注释、属性值的引号、选填标签。你可以看看这个压缩后的版本和以前的版本看起来是一模一样的。
最后，像去除空格和注释这样的优化能使得文档树更轻量，潜在地增强了页面的渲染效率。
物极必反
像其他一些优化一样，我们很容易矫枉过正。HTML Compact 就是HTML压缩工具里面做得太过的一个例子，这个优秀的windows程序用了一种很“独特”的方式来压缩HTML——用javascript把内容写入到页面中。
把这个完美的页面：
<html>
<head>
<title></title>
</head>
<body>
<div>
<ul>
<li>foo</li><li>bar</li><li>baz</li>
<!-- few more dozens of list elements ... -->
</ul>
</div>
</body>
</html>
变成这副模样：
<!--hcpage status="compressed"-->
<html>
<head>
<SCRIPT LANGUAGE="JavaScript" SRC="hc_decoder.js"></SCRIPT>
<title></title>
</head>
<BODY>
<NOSCRIPT>To display this page you need a browser with JavaScript support.</NOSCRIPT>
<SCRIPT LANGUAGE="JavaScript">
<!--
hc_d0("Mv#d|\x3C:,&c@w4YFAtD1 [... and so on, another couple hundreds of characters ...]");
//-->
</SCRIPT>
</BODY>
</html>
不用说，像这样的“优化”永远不应该在网络上出现，除非你的目的是降低页面对用户和搜索引擎的可访问性。并且里面的NOSCRIPT标签也让人很不爽，这种东西对某些能阻止javascript的防火墙来说也是不起作用的。馊主意，坏做法！
上面是一个很好的反例，但是还有一些也是应该注意的：
反面教材
1. 去除文档声明
HTML Compresor里面有一个选项——默认是开启的——去除文档声明。我实在想不出这么做会有什么的好处，相反，没有文档类型会激活怪异模式，使页面的布局和行为都出现很严重的问题。文档类型要么放着不动，要么被替换为一个更简短的——HTML5声明。
2.把STRONG用B替代，EM用I替代
还是那个HTML压缩工具里面有一个有害的选项是把元素用比他们更短的“替代品”来替换。问题是B不是STRONG的替代品。I也不是EM的替代品。 STRONG和EM是有语义的——表示强调，而B和I只是去改变字体样式的；他们能改变文字的展现，但是没有任何语义。
虽然浏览器把他们显示成一样的，但是屏幕阅读器和搜索引擎知道他们的区别。
3.去除title，alt属性和label元素。
一条比较重要的原则是如果优化会损失可访问性就不要优化。你可能很想删掉IMG上的“alt”属性，或者链接上的“title”属性，但是节省少量的字节相对于损失的可访问性来说的确是得不偿失。
相关推荐
总的来说，这个“Oracle性能优化html格式”的文档可能详细讲解了如何通过上述各种方法来提升Oracle数据库的性能，以满足业务需求。对于Oracle DBA和开发人员来说，理解和掌握这些知识点是至关重要的，它们能帮助确保...
【标题】"cso中国SEO优化HTML整站 - ASP源码.zip" 提供的是一份基于ASP编程语言的网站源代码，旨在帮助用户优化其在中国的搜索引擎排名。SEO（Search Engine Optimization）是提升网站在搜索引擎自然搜索结果中的...
透明背景图，翅膀状，用于优化html页面
它的V1.0官方英文免费版为用户提供了便捷的方式，以清理和优化HTML源代码，从而提高网页加载速度，减少网络传输的数据量，并可能提升搜索引擎优化（SEO）的效果。 在HTML文档中，可能会存在许多不必要的字符，例如...
10. **SEO优化**：检查并优化HTML元标签，如`<title>`，`<meta>`等，以提高搜索引擎的可见性和排名。 通过使用HTML-Optimizer，开发者不仅可以优化网页的加载速度，提高用户体验，还可以为网站的SEO打下坚实基础。...
总的来说，VirtualHtml在SEO中的应用包括优化HTML结构、提升页面加载速度、处理动态内容、实现URL规范化以及增强网站安全性。正确使用VirtualHtml技术，将有助于提升网站在搜索引擎中的排名，吸引更多的目标流量，...
HTML和jQuery是Web开发中...总的来说，优化HTML和jQuery实现的数字滚动效果，不仅需要关注视觉效果，更要关注性能和代码质量，以提供更好的用户体验。通过上述优化方法，我们可以实现更加流畅且高效的数字滚动效果。
优化HTML代码的好处主要有：1) 提升网站维护效率，更便于管理和更新；2) 加速开发流程，结构与表现层分离有助于团队协作；3) 扩展访问渠道，使网站适应不同设备；4) 节约带宽成本，减少代码量可显著降低服务器负载；...
6. **减少DOM元素**：过多的DOM节点会增加页面解析时间，优化HTML结构，减少不必要的元素。 7. **异步加载**：对于非关键脚本，可以使用异步加载，避免阻塞页面渲染。 8. **预加载和预读取**：提前加载用户可能...
该项目是一款针对山东商业职业技术学院官网的SEO优化HTML页面设计源码，包含20个文件，涵盖12个HTML文件、5个TXT文件、2个JPG文件以及1个MD文件。源码旨在提升学院的在线形象，优化搜索引擎排名，并支持多语言展示。...
通常情况下，在玩 2D 游戏或渲染 HTML5 画布时，需要执行优化，以便使用多个层来构建一个合成的场景。在 OpenGL 或 WebGL 等低级别渲染中，通过逐帧地清理和绘制场景来执行渲染。实现渲染之后，需要优化游戏，以减少...
HTML代码优化是提升网站性能和用户体验的关键步骤，它涉及到页面加载速度、搜索引擎优化（SEO）以及网站可维护性等多个方面。下面将详细讲解HTML代码优化的原理与技巧。 一、HTML结构优化 1. **语义化标签**：使用...
优化HTML代码可以减少文件大小，提高页面加载速度。 6. **Index.html、index1.html**：通常，`index.html`是网站的默认入口页，`index1.html`可能是备用的首页或者不同版本的首页，这展示了网站的多版本设计或者...
软件介绍 非常漂亮的个人站点，适合做技术类\非主流类\减肥类站点。...SEO非常不错，全站生成HTML，大家使用的时候别忘了先进后台生成HTML 管理员admin 密码cso123.com 管理目录manage/index_918.asp
总的来说，这个PHP软件包或项目提供了一种方法来优化HTML输出，从而提升网页加载速度，对于PHP开发者来说，尤其是使用Laravel框架的开发者，了解并应用这样的优化策略是提高应用性能的关键步骤。同时，掌握这些技能...
优化html的js和css脚本，此工具的原理是合并html文件中的指定需要合并的文件并替换合并后的文件，新生成的文件以内容md5码进行命名，如果合并之后的内容发生变化，则文件名同样会发生变化，这样是为了控制浏览器加载...
其次，优化HTML渲染过程同样至关重要。这涉及到CDN分发、DNS解析、HTTP缓存、数据预请求和数据缓存等。直出技术，即服务端渲染，能快速生成HTML文件，减少前端渲染和AJAX请求的时间。配合离线包技术，可以预先将资源...
代码级别的优化方法包括 JavaScript 中的 DOM 操作优化、CSS 选择符优化、图片优化和 HTML 结构优化等。 页面级别优化： 1. 减少 HTTP 请求数 减少 HTTP 请求数是前端优化的重要方法之一。每个请求都需要经过 DNS...
7. **优化HTML结构**：合理组织HTML结构，例如避免无用的嵌套和重复的标签，可以提高解析速度。 8. **异步加载**：对于非关键内容，可以使用异步加载或延迟加载，这样用户可以先看到主要内容，而不会被非必需的资源...
优化HTML结构，减少不必要的元素，可以提升性能。 9. **CSS优化**：避免使用通配符选择器，减少计算复杂度；使用CSS Sprites减少HTTP请求；移除未使用的CSS，避免样式重绘和回流。 10. **JavaScript性能优化**：...