相对路径Or绝对路径--前端优化(一)

在谈论 相对路径 和 绝对路径谁优谁劣之前,我想问大家一个问题?

请问: PHP 是世界上最好的语言吗?

恩,各位心里应该有个答案啦~

是个屁呀~ js 才是最好的语言~23333
开玩笑的~ 本宝宝是一个前端,要是说PHP 好, 那我现在就不写js了。
其实, 在网页里使用相对路径或是绝对路径,两者是需要有context的, 就像 php 能用来写前端吗? 但我们js 就可以写后台~ 23333 这也算是一个差异吧.
在正式撕逼之前,我想给大家两个demo看看

  • First. Google的搜索页-->

大家有兴趣,可以自己打开google search 一遍。 看看,他搜索结果里面是绝对还是相对
的》。《

  • Second. 某宝页面

这里面的Button 没有一个是绝对路径的。

ok~ 上面两个demo也大致说了下 绝对路径和相对路径应用的场景。 接下来,我们来看看具体两者的 优势各在什么地方.

Relative Or Absolute urls?

这又是一个 能够撕逼 几十个分页的 problem.
不过,本宝宝不撕逼。 我们安安静静的坐下来,谈谈吧~

为什么 相对路径 better than 绝对路径?

首先,我们需要了解相对路径和绝对路径的对等关系.
给大家一个表格,好好感受一下吧。
这里的相对路径,相对于http://www.example.com

绝对路径 相对路径
http://www.example.com //www.example.com
http://www.example.com/path/index.html /index.html
http://www.example.com/path#a=123 /path#a=123
http://www.example.com/path?q=100 /path?q=100

上面是相对于绝对路径。现在,假设我们现在的路径在http://www.example.com/path
我们接着讨论

绝对路径 相对路径
http://www.example.com //www.example.com
http://www.example.com/index/index.html ../index/index.html
http://www.example.com/index#a=123 ../index#a=123
http://www.example.com/index?q=100 ../index?q=100

ok~ 现在我们基本上,能够容易的将interval links 写成相对urls, 但这样写有什么用呢?

  • 节省字段, 相比http://...blablablabla的 直接使用相对路径可以节省几个B的大小啊喂.

  • 开发上线无缝对接. 如果使用http://localhost 的话。上线的时候,我就呵呵了~

为什么 绝对路径 better than 相对路径?

绝对路径的好处就是相对路径的缺陷. 绝对路径 是 最直观的网页打开连接。 我只要复制到搜索栏里,然后entry 就over了。这应该算是绝对路径最直观的感受了.那绝对路径有什么优点啊喂?

  • SEO 优化~ 这是Ruth 强烈建议的。(Ps: 她是在google做Senior SEO Manager,所以你懂的)。通常你的网页需要被爬虫识别,然后根据你网页的引用次数以及能容更新的程度来决定你的排名.
    通常,crawl 对一个网页爬取是有限度的,因为爬虫就是一台服务器,它不可能花费很多资源,很多时间来处理你的网页,即,他的爬取深度是有限制的. 所以,如果你使用relative urls的话,造成的结果就是额外增加爬虫的处理量,而absolute urls 则能减少爬取成本 . 换句话说能够增加你的排名.

  • 网页防盗: 一些高质量论坛网站是最吸引 scrapers的. 如果你使用的全是rel urls, 那么你的整套网页很可能轻而易举就被套现了。 而,如果你增加一些abs urls, 那么 那些scrapers 抓取成本将会成指数增长(因为,他们还需要找到绝对路径并且更改). 如果你的页面全是relative urls的话, 估计那些scrapers 会崩溃的。

Which one could I use?

很简单, 就和开头的demo 一样. 淘宝和google就是两个非常典型的业务场景,绝对urls和相对urls 怎么使用,完全是看context的。不过在一般业务场景中使用 相对urls 是完全没问题的,当然,你想使用绝对urls这也是赞成的(我感觉,我在说废话).

转载请注明作者和原文链接: https://segmentfault.com/a/1190000004629039

阅读 4.1k

推荐阅读
前端的bigboom
用户专栏

个人博客: [链接] 公众号:前端小吉米

1062 人关注
111 篇文章
专栏主页