URL在前端设计中优化的重要作用
2012-11-29 23:59
337 查看
很多朋友都认为关于URL优化方面的工作是后端工程师做的,前端方面注重结构方面的优化就可以了。其实不然,对于请求及DNS请求等等诸多方面,前端工程师也应该在自己能做到的方面给予优化。
下面我就说说我对于URL在前端优化方面的理解。
首先,第一点,
比较“吝啬”,就是使用“c”、“j”、“i”文件夹分别代替我们经常用的“css”、“javascript”、“images”文件夹。当然很多人会说,有这个必要吗?我个人觉得有,虽然这样做或许不会对页面精简带来太大的效果,但是并不会带来任何坏处。
第二点 ,
对于链接到像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使用优化,肯定能使你的页面有更好的呈现。
下面我就说说我对于URL在前端优化方面的理解。
首先,第一点,
比较“吝啬”,就是使用“c”、“j”、“i”文件夹分别代替我们经常用的“css”、“javascript”、“images”文件夹。当然很多人会说,有这个必要吗?我个人觉得有,虽然这样做或许不会对页面精简带来太大的效果,但是并不会带来任何坏处。
第二点 ,
对于链接到像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使用优化,肯定能使你的页面有更好的呈现。
相关文章推荐
- URL在前端设计中优化的重要作用
- 顺序表查找优化(哨兵元素的重要作用)
- 【前端GUI】——网站设计的重要知识点总结&思维导图(二)
- 转载_铁氧体磁环在EMI滤波器设计中的重要作用
- 前端设计中关于外部js文件加载的速度优化及minify使用教程
- Canonical URL Tag - 继SiteMap之后最重要的搜索引擎优化实践
- 网站优化-前端设计在不同浏览器上面的兼容
- 接口层设计的重要作用
- 【前端GUI】——网站设计的重要知识点总结&思维导图(一)
- 大巧不工Web前端设计修炼之道——(7)让你的设计更加完美——优化技巧和最佳实践
- 前端【学习心得】电商网站前端架构#3 前端在产品设计中的作用
- 阿里云前端周刊 - 第 29 期 RESTful API 设计最佳实践_项目资源的URL应该如何设计?用名词复数还是用名词单数?一个资源需要多少个URL?
- 响应式前端设计的优化
- web前端网站优化-你真的不重要了吗?
- 前端设计中关于外部js文件加载的速度优化
- 设计索引的原则(查询优化最重要的,优先权最高的优化就是建立索引)
- Google排名优化-面向Google(Search Engine Friendly)的URL设计
- 前端通信:ajax设计方案(六)--- 全局配置、请求格式拓展和优化、请求二进制类型、浏览器错误搜集以及npm打包发布
- 前端性能优化的几个重要规则
- Google排名优化-面向Google(Search Engine Friendly)的URL设计