浅谈URL使用在前端设计中的优化
发表时间: March 26, 2009 分类: WebBuild 11条评论
很多朋友都认为关于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优化方面极具讨论价值的话题，欢迎大家讨论指教。
已有 11 条评论
#1 花花 Says:
April 3rd, 2009 at 11:25 am
很不错！ 学习了！！！
#2 36394574 Says:
April 3rd, 2009 at 01:45 pm
缩短连接是不是会好些？
#3 muton Says:
April 5th, 2009 at 02:59 am
URL的优化，在服务器方面的配置（包括CDN，路由等方面）效果明显
#4 艾美 Says:
April 7th, 2009 at 01:30 pm
感觉还是连接能文字化的好http://www.ivershuo.com/qian-duan-she-ji
这样的，貌似不错！
http://jiqingliaotianroom.com
#5 云南旅游 Says:
April 8th, 2009 at 11:05 am
路过，顶一下
#6 91liao Says:
April 8th, 2009 at 11:25 am
写的很不错！！！！
#7 股票 Says:
May 11th, 2009 at 04:41 pm
URL优化和SEO是一体的
#8 lawqq Says:
July 10th, 2009 at 10:20 am
路过，学习了。呵呵！
#9 clone Says:
October 4th, 2009 at 04:00 pm
老乡，你的博客很不错！
#10 tuifei.net Says:
October 12th, 2009 at 12:06 pm
为啥子我的typecho里没有编辑器呢？
发个文章，加个描点连接都不行。
#11 灵子 Says:
March 25th, 2010 at 12:17 am
还真没有考虑过这么多
添加新评论