很多朋友都认为关于URL优化方面的工作是后端工程师做的，前端方面注重结构方面的优化就可以了。其实不然，对于请求及DNS请求等等诸多方面，前端工程师也应该在自己能做到的方面给予优化。

下面我就说说我对于URL在前端优化方面的理解，希望大家指正。

首先，第一点，比较“吝啬”，就是使用“c”、“j”、“i”文件夹分别代替我们经常用的“css”、“javascript”、“images”文件夹。如果没有记错的话，这个方法是Zeldman在《网站重构》第一版的时候提出来的（如果记错了，欢迎大家指正），我是比较赞成这个的。当然很多人会说，有这个必要吗？我个人觉得有，虽然这样做或许不会对页面精简带来太大的效果，但是并不会带来任何坏处。

第二点，对于链接到像http://www.example.com/dir/这样的URL时候，记得在最后加上“/”，因为如果你的网站包含目录并使用了自动索引，不加结尾的斜线的话会页面会多一次重定向。（p.s:对于链接到主机名的链接可以不必加）

第三点，就是上面已经提到的重定向问题。这应该是前端最应该重视的基于URL的优化问题，大家应该都有亲身体验重定向时的等待的不愉悦，尤其是第一个请求就是重定向时，用户看到的是一个“漫长”的空白页面过程。所以应该避免滥用重定向，不过很多时候（主要用在跟踪）还是需要用到重定向，当然这也包括服务器的配置方面，不管怎么说，我们还是在我们能做的方面尽量做好吧。

第四点，减少DNS的查找。对与这点，可以主要从增大DNS缓存时间和减少网站内容主机请求数量两点来优化。对于第一点在网站端可以通过DNS的TTL及HTTP的Keep-Alive来设置（虽然这不是HTTP1.1中必需的，但是很多浏览器和服务器都包含它）。当然你在配置中得考虑自己网站的实际情况，确保你的内容和ip不会在你设置的时间内失效。在主机名数量上，减少唯一主机名的数量会减少页面并行下载的数量，基于下面要说的原因，Steve Souders建议网站数据内容分别放在2-3个主机名下是最优选择。

最后一点，将数据内容并行下载。在HTTP1.1规范下，建议浏览器从每个主机名并行的下载两个数据包内容，并且很多浏览器默认都是这样做的（可以打开YSlow对照页面在firefox下的结果），如果你的页面包含较多的图片等数据内容，将其分别放在两个主机名下，整体的下载时间将会有明显的缩短。但是基于上面一点的原因，不要将内容放在太多的主机下，至于实际几个，可以通过自己的页面情况考虑。

当然，基于URL的优化，在服务器方面的配置（包括CDN，路由等方面）效果明显，但是我们前端在做好其他如页面结构、页面压缩、HTTP请求数量等方面的优化下，进行上述的URL使用优化，肯定能使你的页面有更好的呈现。

本文很多观点来自Steve Souders的《高性能网站建设指南》，本文内容比较偏，欢迎大家拍砖。现在像google的分布式还有热门的云计算方面也是URL优化方面极具讨论价值的话题，欢迎大家讨论指教。

这段时间在学校没有很多事，就将一直“看不惯”的中国移动的首页给重构了下玩玩。重构之后的网页：http://www.ivershuo.com/did/for_cmcc

下面是重构的效果：

可以看出重构之后的页面大小(131.1K+127.3K=258.4K)不到原网页大小(525.5)一半，HTTP请求大幅度的减少。单从经济方面来说，也算不小的一笔开销节约了。

首先说说原网页有哪些地方不够合理吧：

1. HTML标签混乱，结构不够合理；
2. 过多的图片装饰；
3. 浏览器兼容做得不好；
4. 可访问性有待加强；
5. 多余的样式和脚本（因为首页和内页的布局几乎完全不同）；
6. 那么大的一个FLASH放在内容前段！

所以在重构的时候主要从这几方面下手。使用XHTML+CSS重写结构和样式，完全通过W3C验证，HTML代码从原来的834行精简成342行；尽量兼容流行的浏览器（经测试，在WIN平台下的Firefox3、IE6、IE7、Opera9.6、Chrome2、Safari4 beta表现基本和原网页一致）；重做装饰图片，减少HTTP请求；增强可访问性，使用可禁用、兼容且无侵入式的脚本。最后我觉得首页的那个大FLASH——并且正在我准备重构的时候，他又换了个更大的FLASH——对于页面的载入影响比较大，何况还是使用的用户并不多的移动线路，曾经我使用教育网的时候就很难完整的刷开移动的首页，所以对于这个FLASH个人颇有微词。

上图显示了页面主要重构的部分，下面列表的每项对应上图相应数字热点区域：

1. 这里主要简单的做了个SEO的优化，思想借鉴了Google搜索结果页面的LOGO编写方式。关于细节可以查看原代码，至于可行性有待讨论（在CSS森林群里面讨论时，来自腾讯重构组的鬼和飘不赞同隐藏IE下无效图片的红叉）；
2. 个人认为这里是整个页面最杂乱的地方，没有办法，我得保留原来的呈现。优化了这里几个元素的底图，对英文版链接动态样式底图合并，并保证图片失效下的可用性（具体方法查看源代码）。搜索按钮使用border样式替换原背景样式。省公司的下拉链接添保证了禁用js下的可用性；
3. 这里优化底图。不过使用了一个多余的标签，并不是完美的重构，希望能找到更好的方法；
4. 这块的结构动了大手术，解决原网页在结构上的不科学、浏览器的不兼容及js禁用下tab无法切换的等诸多问题；
5. 这里解决在Firefox等浏览器下不显示背景问题，及下拉链接添保证了禁用js下的可用性。

在文档结构上，吝啬的使用了Zeldman推荐的“i”、“j”、“c”文件夹分别保存图片、脚本和样式表，并且将网页需要动态替换的广告图片另外存放以便后台程序处理（真正使用中不推荐使用名称为“ad”的文件夹，以免被广告拦截软件拦截）。

这是一个基础的网站重构的例子，对于想了解网站重构的朋友或许有点帮助。当然在正式的重构中还有很多需要做的，也希望各位朋友指导我需要改善和提高的地方。

最后要说的，大家不要批评中国移动的网页开发人员，他们比我们大多数人优秀，技术比我们也强，只是在真正的实施中会有其他不可控的客观原因，如历史原因、产品经理或者老板的压力等。所以我更希望在中国各位网站负责人能真正重视网站重构，因为他确实能使你节省钱，获得更多的客户……

下面这个写给豆瓣看的，各位可以无视：doubanclaim4ab4a8b8908a8c2b

先看几个图吧：

提问：这些“竖线”分隔符是什么——在HTML里怎么表现？

1. 仅仅在HTML里面插入一个竖线：|；
2. 将竖线放在一个<span>标签里面；
3. 作为背景图片插入（作为该导航连接的标签背景或者添加一个如<span>标签设置其背景）；
4. 作为列表（如果导航连接是放在一个列表标签里）的list-style样式属性；
5. 作为border样式表现；
6. others......

绝大部分网站将这个竖线表现为1或者2的形式，有些网站将这个用在了背景图（如淘宝），yahoo是用border样式表现的。到底用那种表现方式更好呢？

首先我们得弄清楚一件事：（从语义上来说）这个竖线到底是什么？

我个人的理解这是一个分割符（废话！），应该用border样式比较科学。打个比方：就像两个相邻的房间，中间分割的是墙。那么作为盒模型，border应该是最类似这个“墙”的。

只是，如果这个分割符不是一个“竖线”呢？像淘宝栏目导航和腾讯首页顶部的导航。我觉得这个分割（视觉表现形式）从HTML语义上来说没有明显的意义，在现阶段作为list-style表现可能比较好（不要说你的导航不是包含在列表里的）。

之所以说“现阶段”，是因为幸运的是CSS3已经支持将图片作为border（感谢腾讯文王同学提供参考文章地址），当然不幸的是还只有Safari和Firefox 3.1 (Alpha)支持这个属性，等到其他浏览器的支持估计不知道得等到什么时候。

上述观点欢迎大家发表不同意见。