域名注册

• 中文域名
• 英文域名
• 通用网址
• 域名解析
• 域名转入\转出

虚拟主机

• 主机购买
• 管理主机
• FTP上传
• 数据库管理1）注册竞价服务账号
  2）缴纳竞价服务推广费用
  3）开通服务
  4）开始推广
  
• 主机续费升级

网站建设

• 建站流程介绍
• 网站设计
• 网站改版
• 网站维护
• 网站推广

企业邮局

• 邮箱使用
• 管理邮箱
• 邮箱续费升级
• 全球邮局

网站优化

• seo优化
• seo技巧
• 收索引擎优化
• 关键词优化

网站备案

• 备案流程指南
• 修改备案
• 备案资料下载
• 备案小技巧

服务器租用

• 服务器租用
• 服务器托管

其它服务

• 400电话
• 在线客服
• 财务常见问题
• 会员常见问题

• 您的位置：创新互联 >> 网站优化 >> 网站优化基础知识 >> HTML优化

HTML优化

• 作者：曾小姐 文章来源：成都网站建设 点击数：1017 更新时间：2011-11-05
• 　　在网站制作中，对javascript和CSS的网站优化一直是设计师们关注的焦点，而其相应的压缩优化工具也非常丰富，相对而言对HTML优化的关注则显得有些冷淡。小编在Steve Souders的大作《Even Faster Web Sites》中看到非常多有效的前端优化方法，例如javascript的加载、CSS选择符、图片优化、gzip、iframe问题等，唯独没有细说HTML优化。在整个前端的构成中，HTML是必不可少的一部分，而且是真正的展示“前端”。虽然与动辄十几K的javascript相比，HTML的大小在整个页面资源中一般不会占太多的比重，而且还有Gzip，但是事实表明，大多数页面都有较大的压缩余地，即使是Gzip过后仍然能减小可观的体积，所以今天小编主要干大家讨论HTML优化的一些可行和看上去不那么可行的途径。
  　　对于各种优化途径，如果一定要我给一个分类的话，小编会用颜色来区分。对于那些在各种页面中都适用而且无害的方法，　　小编将它们归为绿色。相对而言，只有在某些具体的情况下才适用或者有违标准的方法归为橙色。
  　　首先，绿色方法
  　　1. 使用相对URL
  　　对于页面中的各种URL，例如链接、外链CSS的href、外链javascript的src、图片src、iframe src等，如果能够确定它们与当前页面是处于同一域名下的话，则可以使用相对URL，这样每一个URL都能够节省至少一个域名的长度。
  　　2. 删除HTTP或HTTPS
  　　绝对URL都以HTTP或HTTPS等协议头开始，如果能确定URL的协议与当前页面URL的协议是一致的，或者说该URL在多种协议下均是可用的，则可以考虑删除这个协议头。Nexus One的这个页面中有些资源URL就删除了协议头，虽然并不是出于节省资源的目的，但至少证明删除协议头是可行的。对于CSS，如果删除协议头在IE7、IE8下会造成CSS下载两次，这个是需要注意的问题。
  　　3. 删除注释
  　　与CSS、javascript一样，也可以通过删除HTML中的注释来实现优化。然而，这一点对于HTML来说却要复杂一些，因为在HTML中存在某些特殊作用的注释是不能删除的。
  　　(a). IE条件注释
  　　<!--[if expression]> HTML <![endif]—>
  　　诸如这样的语法，只有符合expression的浏览器才能识别其中的内容。
  　　(b). CDATA注释
  　　/**/CDATA本身是XHTML中才需要的，在CDATA中的内容不需要对特殊字符进行转义，不过为了兼容老版本的浏览器，需要加上注释，以免出错。不过，对于这个注释，如果你的页面并没有真正的使用XHTML标准则可以大胆的删除掉。使用XHTML标准不是简单的声明DTD就可以办到的，除此之外还需要服务器能够派application/xhtml+xml这样的内容格式，另外还需要浏览器支持，目前IE并不支持XHTML格式。因此，目前你的页面可能是按照XHTML规范来写的，也能通过HTML验证，但想要兼容IE则一定还是以HTML方式来展示的。这样一来，很多为了遵循标准而增加的内容则可以删除，具体的在后文的橙色部分详述。
  　　(c). 自定义注释
  　　产品中自定义的一些具有特定功能的注释，例如统计。
  　　4. 压缩空白符
  　　在HTML中的大多数标签中，多个空白符都会被压缩成一个来显示，于是可以通过删除多余的空白符来减小HTML体积。不过需要注意的是并不是所有的空白符都可以这样做，例如pre、textarea中的空白符是按原样显示的，标签属性中的属性值也是按原样显示的，例如title、value等。
  　　5. 压缩inline css & javascript
  　　不管inline还是external，都需要压缩，这是减小体积的最直接的方式。
  　　6. CSS&javascript尽量外链
  　　外链CSS和javascript，不仅仅是减小HTML本身的体积，而且还可以充分利用浏览器的缓存机制，所以当CSS、javascript的代码量超过一定体积时，尽量外链。除此之外，尽量避免在页面中使用onmouseover=”xxxx”的方式来注册事件，既不利于维护也容易产生不必要的冗余代码。
  　　7. 删除元素默认属性
  　　在HTML规范中，很多HTML元素的属性是有默认值的，对于这些默认值可以抹去不写，下面是不完全统计。
  　　标签 属性 默认值
  　　style media screen
  　　link media screen
  　　form method get
  　　form
  　　input type text
  　　第二，橙色方法
  　　橙色方法是指那些有违标准，或者会导致页面出现无法预料的问题的一类方法，算是一类非常规的方法，因此也仅仅适用于一些非常规的页面，例如百度搜索引擎首页。
  　　1. 删除或替换
  　　DOCTYPE对于页面展现非常重要，浏览器会根据具体的DOCTYPE来决定如何显示页面，除非你对删除DOCTYPE后的页面展示十分有把握，否则不要轻易删除。另外一种可行的方式是采用HTML5中的写法，即，大多数浏览器能够将这种doctype写法解析为标准或准标准(Almost Standard)模式，不过依然会造成一些问题，具体见这里。目前百度推广、Google推广都是这么做的。
  　　2. 删除标签属性值的引号
  　　引号不是必须的，删之。此处也需要考虑一些特殊情况，例如属性值中包含引号等。（小编提醒：不符合XHTML规范）
  　　3. 省略某些属性值
  　　例如disabled、checked、multiple等的值都可以省略。（小编提醒：不符合XHTML规范）
  　　4. 删除可选的闭合标签
  　　例如body、p、tr等标签是允许没有闭合标签的，具体的参考此处。（小编提醒：不符合XHTML规范）
  　　5. 删除自动闭合标签的”/”。（小编提醒：不符合XHTML规范）
  　　最后，工具
  　　HTML优化工具目前比较理想的是Absolute HTML Compressor，另外，PageSpeed1.6中也引入了HTML压缩功能，不过目前只有四个简单的策略，尚处于实验性阶段。随着大家对前端性能越来越高的关注度，HTML优化及压缩方面也一定会有所发展的。
  　　小编总结：
  　　1. HTML优化及压缩的发展滞后于前端其他资源，不过目前也已经引起大家越来越多的关注。
  　　2. 绿色规则中的很多都是在写码过程中就可以注意和遵循的，如果能把这个优化融入到编码中，效果应该更好。
  　　3. 橙色规则由于违背某些规范，只适用于某些特定的页面，使用时务必谨慎。
  　　大家有没有理解清楚呢？不明白的地方欢迎随时咨询成都创新互联网站建设，我们将竭诚为你服务哦！
  
• 上一篇文章：如何使你的网站被百度有效收录和受欢迎
  下一篇文章：网站不被百度收录的16种原因