网页优化的最基础部分:HTML的优化
2010-03-18 13:09
288 查看
网页优化的最基础的部分应该就是HTML的优化,具体来说首先就是标记的清理,清理标记不仅仅能缩减文档的大小,而且能够让文档更易于维护提高搜索引擎的可见度(Clean markup means better accessibility, easier maintenance, and good search engine visibility),但是即便是那些号称高度优化过的网页,如果仔细查看代码,依旧可以发现很多可以删减或者已经过时的标记用法:
1.script里的注释符<SCRIPT language=javascript>
<!-- Begin
alert("daimaren.cn");
// End -->
</script>
除非是像95 Netscape 1.0这类几乎绝迹的浏览器需要这样的处理,在大部分主流浏览器里,往脚本块里添加HTML注释是完全不需要的。
2.<![CDATA[ … ]><script type="text/javascript">
//<![CDATA[
...
//]]>
</script>
这是另外一个经常在js代码块里添加的错误预防措施,他是在处理真正的XHTML文档(“application/xhtml+xml” content-type)时为了防止代码将形如<号解析为标签开始,所有在CDATA内包含的内容,都会被当成文本处理。但是实际情况是,目前几乎所有的网页的content-type都是text/html,也就是说它们不是严格意义上的xml文档,而是只是text文本,所以这个错误预防处理措施是完全没有必要的,即使你确定要支持xml的文档,也要视情况合理的运用CDATA。
3.onclick=”…”, onmouseover=”“等等。
将事件属性写在HTML标签内是一种很不明智的做法,降低了代码的可维护性,同时污染了标签,如果将事件属性通过JS动态添加,不仅可以灵活控制,还可以利用JS客户端缓存的优势,让这些事件属性不必每次跟随文档请求。
4.onclick=”javascript:…”
这是一个有趣的javascript混乱,伪协议和内在的事件处理程序可以组成高达10W多种多余的组合,事实是事件属性内部的内容在解析后成为body的一个fucution,这个function然后会作为事件处理程序,所以javascript:在此成为一个无用的多余标签。
5.href=”javascript:void(0)”
继续javascript:伪协议,有一个臭名昭著的就是javascript:void(0),他是用来避免默认的锚点动作的,它在JS无法正常解析或者出错时(disabled/not available/errors)会使得锚点完全不可用,理想的解决方案是在href里填写正确的URL,然后用JS去动态改写,这样即使在JS未执行的情况下也不会出现锚点不可用的状况。HREF =“#”是一个精简和更快的替代方案。
6. style=”…”
没有什么本质性的错误,只是后期维护麻烦,另外移到外联的CSS文件中可以缓存起来提高页面执行效率。
7. <script language=”Javascript” … >
最容易误解的属性之一,觉得这个是脚本的“语言”,这个属性是如此古老,在1999年就已经不推荐被使用了。
8. <script charset=”…” … > <script type="text/javascript" charset="UTF-8">
...
</script>
script标签的另一个容易被误解的属性,charset在HTML4.01里的描述:请注意,charset属性是指字符的 src属性所指定的脚本编码,它不涉及的脚本元素的内容。(Note that the charset attribute refers to the character encoding of the script designated by the src attribute; it does not concern the content of the SCRIPT element.),也就是说他只在外联脚本的时候指定脚本文件的编码格式。不推荐使用。
上面说的都是一些错误或者不推荐的用法,下面是一些可以合理忽略以清理标记的属性:
1.<style media=”all” …>
HTML 4.01规定的默认媒体是“screen”,但是经过测试发现几乎所有浏览器并未按照规定执行,而是用“all”替代,如果你要使用media=”all”,那建议可以省略此属性。
2. <form method=”get” …>
form的默认method是get,所以如果要使用get可以不用再指明。
3. <input type=”text” …>
在HTML 4.01和HTML5草案里规定了input的默认属性为text,所以可以忽略。
4. <meta http-equiv=”Content-type” …>
指定文件的字符编码一直都引起极大的混乱,Content-type的优先级并不比HTTP HEADER高,当两者都存在时,请求头更优先,所以如果你能控制好服务器响应,并且设置好HEADER,那MATE就可以安全的忽略,除非页面需要本地浏览的时候。
5. <a id=”…” name=”…” …>
如果不想兼容古老的浏览器(如 Netscape 4),完全不用在一个元素上同时出现ID和NAME。
下面是在HTML(非XHTML)下一些更极端的标记优化方法:
删除注释
删除代码空白
移除可选结束标签,如P标签可以不写结束标签
移除属性引号
移除布尔属性的值,如option的selected
尽量移除内联的样式和脚本等
尽量优化类和ID名
http://daimaren.cn -》//daimaren.cn
X啊,老外罗哩罗嗦的,最后再写点是关于错误的,不好优化示例:
1.移除doctype,HTML Compresor是一个HTML优化工具,它会直接去掉文档声明,会导致页面触发怪异模式,很不好。
2.用B替代STRONG用I替代EM。
HTML Compresor会直接用B替代STRONG用I替代EM,B不是一个强烈的强调,同样I和EM也不一样,B和I只是字体风格,他们会影响页面渲染,同时也不具备语义。
3.删除title/alt/等标签属性。,节约字符和无障碍以及用户体验的权衡,得不偿失。
1.script里的注释符<SCRIPT language=javascript>
<!-- Begin
alert("daimaren.cn");
// End -->
</script>
除非是像95 Netscape 1.0这类几乎绝迹的浏览器需要这样的处理,在大部分主流浏览器里,往脚本块里添加HTML注释是完全不需要的。
2.<![CDATA[ … ]><script type="text/javascript">
//<![CDATA[
...
//]]>
</script>
这是另外一个经常在js代码块里添加的错误预防措施,他是在处理真正的XHTML文档(“application/xhtml+xml” content-type)时为了防止代码将形如<号解析为标签开始,所有在CDATA内包含的内容,都会被当成文本处理。但是实际情况是,目前几乎所有的网页的content-type都是text/html,也就是说它们不是严格意义上的xml文档,而是只是text文本,所以这个错误预防处理措施是完全没有必要的,即使你确定要支持xml的文档,也要视情况合理的运用CDATA。
3.onclick=”…”, onmouseover=”“等等。
将事件属性写在HTML标签内是一种很不明智的做法,降低了代码的可维护性,同时污染了标签,如果将事件属性通过JS动态添加,不仅可以灵活控制,还可以利用JS客户端缓存的优势,让这些事件属性不必每次跟随文档请求。
4.onclick=”javascript:…”
这是一个有趣的javascript混乱,伪协议和内在的事件处理程序可以组成高达10W多种多余的组合,事实是事件属性内部的内容在解析后成为body的一个fucution,这个function然后会作为事件处理程序,所以javascript:在此成为一个无用的多余标签。
5.href=”javascript:void(0)”
继续javascript:伪协议,有一个臭名昭著的就是javascript:void(0),他是用来避免默认的锚点动作的,它在JS无法正常解析或者出错时(disabled/not available/errors)会使得锚点完全不可用,理想的解决方案是在href里填写正确的URL,然后用JS去动态改写,这样即使在JS未执行的情况下也不会出现锚点不可用的状况。HREF =“#”是一个精简和更快的替代方案。
6. style=”…”
没有什么本质性的错误,只是后期维护麻烦,另外移到外联的CSS文件中可以缓存起来提高页面执行效率。
7. <script language=”Javascript” … >
最容易误解的属性之一,觉得这个是脚本的“语言”,这个属性是如此古老,在1999年就已经不推荐被使用了。
8. <script charset=”…” … > <script type="text/javascript" charset="UTF-8">
...
</script>
script标签的另一个容易被误解的属性,charset在HTML4.01里的描述:请注意,charset属性是指字符的 src属性所指定的脚本编码,它不涉及的脚本元素的内容。(Note that the charset attribute refers to the character encoding of the script designated by the src attribute; it does not concern the content of the SCRIPT element.),也就是说他只在外联脚本的时候指定脚本文件的编码格式。不推荐使用。
上面说的都是一些错误或者不推荐的用法,下面是一些可以合理忽略以清理标记的属性:
1.<style media=”all” …>
HTML 4.01规定的默认媒体是“screen”,但是经过测试发现几乎所有浏览器并未按照规定执行,而是用“all”替代,如果你要使用media=”all”,那建议可以省略此属性。
2. <form method=”get” …>
form的默认method是get,所以如果要使用get可以不用再指明。
3. <input type=”text” …>
在HTML 4.01和HTML5草案里规定了input的默认属性为text,所以可以忽略。
4. <meta http-equiv=”Content-type” …>
指定文件的字符编码一直都引起极大的混乱,Content-type的优先级并不比HTTP HEADER高,当两者都存在时,请求头更优先,所以如果你能控制好服务器响应,并且设置好HEADER,那MATE就可以安全的忽略,除非页面需要本地浏览的时候。
5. <a id=”…” name=”…” …>
如果不想兼容古老的浏览器(如 Netscape 4),完全不用在一个元素上同时出现ID和NAME。
下面是在HTML(非XHTML)下一些更极端的标记优化方法:
删除注释
删除代码空白
移除可选结束标签,如P标签可以不写结束标签
移除属性引号
移除布尔属性的值,如option的selected
尽量移除内联的样式和脚本等
尽量优化类和ID名
http://daimaren.cn -》//daimaren.cn
X啊,老外罗哩罗嗦的,最后再写点是关于错误的,不好优化示例:
1.移除doctype,HTML Compresor是一个HTML优化工具,它会直接去掉文档声明,会导致页面触发怪异模式,很不好。
2.用B替代STRONG用I替代EM。
HTML Compresor会直接用B替代STRONG用I替代EM,B不是一个强烈的强调,同样I和EM也不一样,B和I只是字体风格,他们会影响页面渲染,同时也不具备语义。
3.删除title/alt/等标签属性。,节约字符和无障碍以及用户体验的权衡,得不偿失。
相关文章推荐
- html基础 框架网页 将网页分为上下三部分 显示框架的边框线 设置边框线的宽及颜色
- html基础 框架网页 将网页分为上下三部分 显示框架的边框线 设置边框线的宽及颜色
- 12-25 网页基础,html。
- html基础 frameset 将网页分割成左右形,框架网页。 为frame添加name属性,超链接在同网页中指定的frame中显示
- 网页HTML部分
- Web前端开发精品课HTML CSS JavaScript基础教程JavaScript部分知识点总结
- 获取html网页中的body部分内容
- ASP.NET网络爬虫小研究 HtmlAgilityPack基础,爬取数据保存在数据库中再显示再自己的网页中
- html基础-图片标签、表格的属性、链接的属性及链接的分类、name定义锚点的名称、网页的自动刷新、基本字符
- Javaweb 初期Html网页设计基础
- 前端基础面试题大全-极乐科技(二)-HTML+CSS部分
- html2canvas插件对整个网页或者网页某一部分截图并保存为图片
- 网页开发基础知识 HTML + CSS
- 【C#】通过HtmlAgilityPack+XPath来优化网页采集学习笔记
- 搜索引擎优化基础,第 1 部分: 提高站点在搜索引擎中的排名
- HTML基础篇(标签和属性整--已剔除不被浏览器支持的部分)
- 网页布局代码html部分
- html精简总结基础部分
- 网页制作基础学习——HTML+CSS