绝对网址与相对网址


214

我想知道这两种URL之间的区别:相对URL(用于图片,CSS文件,JS文件等)和绝对URL。

另外,哪个更好用?

Answers:


191

通常,使用相对URL被认为是最佳实践,这样您的网站就不会绑定到当前部署位置的基本URL。例如,它无需修改即可在localhost和公共域上工作。


6
我同意+1。绝对URL可能有(几次)更好的情况,例如,使用CDN时,或者您需要更改内容网站时。搜索域名比搜索相对URL恕我直言要容易得多。
苏恩·里维尔斯

67
出于维护目的,无需域名即可使用绝对URL更加容易。即在StackOverflow上使用绝对URL'/ questions / 2005079 / absolute-vs-relative-urls'链接到此问题。前面的'/'使URL绝对。当您移动文件或更改项目的目录结构时,这种方法会奏效。
迈克(Mike)

10
@Baumr但是你能做到吗?我绝对是使用该方法的拥护者/拥护者,但进入一个更大的框架并进行大型重构是一个众所周知的艰巨/恐怖的任务。尽管您认为可能已经将它们全部切换了,即使是在智能IDE中,但如果将它们编码为字符串或动态创建,它们常常会丢失。最糟糕的是,通常只有在您的解决方案重新投入生产后,才会捕获那些丢失的引用... :(
dudewad 2013年

31
@Mike为什么将相对于根的 URL 称为“绝对”?
törzsmókus

4
@törzsmókus好问题。它不允许我进行编辑,那是几年前,甚至在我遇到术语“相对亲戚”之前。
Mike

236

我应该使用绝对URL还是相对URL?

如果使用绝对URL,则意味着包括方案(例如,http / https)和主机名(例如,yourdomain.com)的URL永远不会这样做(对于本地资源),因为这将使维护和调试变得很糟糕。

假设您在代码中到处都使用了绝对URL,例如<img src="http://yourdomain.com/images/example.png">。现在,当您要执行以下操作时会发生什么:

  • 切换到另一个方案(例如http-> https)
  • 切换域名(test.yourdomain.com-> yourdomain.com)

在第一个示例中,将发生的事情是,您将收到有关在页面上请求不安全内容的警告。因为您所有的URL都经过硬编码以使用http(://yourdomain.com/images/example.png)。并且当通过https运行页面时,浏览器希望所有资源都通过https加载,以防止信息泄漏。

在第二个示例中,从测试环境中启用站点时,这意味着所有资源仍指向您的测试域,而不是实时域。

因此,要回答有关使用绝对URL还是相对URL的问题:始终使用相对URL(用于本地资源)。

不同网址之间有什么区别?

首先让我们看一下我们可以使用的不同类型的URL:

  • http://yourdomain.com/images/example.png
  • //yourdomain.com/images/example.png
  • /images/example.png
  • images/example.png

这些URL尝试在服务器上访问哪些资源?

在下面的示例中,我假设网站是从服务器上的以下位置运行的/var/www/mywebsite

http://yourdomain.com/images/example.png

上面的(绝对)URL尝试访问资源/var/www/website/images/example.png。出于上述原因,您总是希望避免使用此类URL 来从您自己的网站请求资源。但是它确实有它的位置。例如,如果您有一个网站,http://yourdomain.com并且想通过http向外部域请求资源,则应该使用它。例如https://externalsite.com/path/to/image.png

//yourdomain.com/images/example.png

该URL是相对的,基于当前使用的方案,并且在包括外部资源(图像,javascript等)时几乎应始终使用该URL。

这种URL的作用是使用其所在页面的当前方案。这意味着您在该页面上,http://yourdomain.com并且在该页面上是图像标记<img src="//yourdomain.com/images/example.png">,图像的URL将在其中解析http://yourdomain.com/images/example.png
当您进入该页面时http**s**://yourdomain.com,在该页面上是图像标记<img src="//yourdomain.com/images/example.png">,图像的URL将解析为https://yourdomain.com/images/example.png

这防止加载资源通过HTTPS是不需要的时候,当它自动确保被请求的资源通过HTTPS 必要的。

上面的URL在服务器端的解析方式与以前的URL相同:

上面的(绝对)URL尝试访问资源/var/www/website/images/example.png

/images/example.png

对于本地资源,这是引用它们的首选方式。这是一个基于/var/www/mywebsite您网站的文档根()的相对URL 。这意味着当您拥有<img src="/images/example.png">它时,它将始终解析为/var/www/mywebsite/images/example.png

如果您决定切换域,则该域仍将起作用,因为它是相对的。

images/example.png

这也是一个相对URL,尽管与上一个有所不同。此URL是相对于当前路径的。这意味着它将根据您在站点中的位置解析为不同的路径。

例如,当您在页面上http://yourdomain.com并且使用<img src="images/example.png">它时,它将在服务器上/var/www/mywebsite/images/example.png按预期方式解析,但是当您在页面上http://yourdomain.com/some/path并且使用完全相同的图像标签时,它突然会解析为/var/www/mywebsite/some/path/images/example.png

什么时候使用什么?

请求外部资源时,您最有可能要使用相对于方案的URL(除非您要强制使用其他方案),而在处理本地资源时,则要基于文档根目录使用相对URL。

示例文件:

<!DOCTYPE html>
<html>
    <head>
        <title>Example</title>
        <link href='//fonts.googleapis.com/css?family=Lato:300italic,700italic,300,700' rel='stylesheet' type='text/css'>
        <link href="/style/style.css" rel="stylesheet" type="text/css" media="screen"></style>
    </head>
    <body>
        <img src="/images/some/localimage.png" alt="">
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" ></script>
    </body>
</html>

一些(同类)重复项


2
与使用相对URL相比,使用绝对URL加载页面的速度更快吗?(花时间解决相对路径吗?)
shasi kanth 2014年

2
任何可能的差异都将很小,如果根本无法测量,您就不必担心。
PeeHaa 2014年

3
将Google Jquery包含为无协议示例:<script src =“ // ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js”> </ script>
shasi kanth 2014年

8
该答案假定不会动态生成绝对URL,从而解决了上述每个问题。

2
J.Money是正确的。现代Web框架具有“反向路由”的概念,可让您从一个页面到另一个页面(必须到同一网站的另一个页面)创建URL。这些允许您给URL命名,然后使用该名称代替URL。这样,如果您想更改URL,则可以在一个位置更改URL,因为在其他任何地方,您都只能通过其名称来引用该URL。
凯文·惠勒

65

看到这个:http : //en.wikipedia.org/wiki/URI_scheme#Generic_syntax

foo://username:password@example.com:8042/over/there/index.dtb;type=animal?name=ferret#nose
\ /   \________________/\_________/ \__/            \___/ \_/ \_________/ \_________/ \__/
 |           |               |       |                |    |       |           |       |
 |       userinfo         hostname  port              |    |       parameter query  fragment
 |    \_______________________________/ \_____________|____|____________/
scheme                  |                               | |  |
 |                authority                           |path|
 |                                                    |    |
 |            path                       interpretable as filename
 |   ___________|____________                              |
/ \ /                        \                             |
urn:example:animal:ferret:nose               interpretable as extension

绝对URL包括“路径”部分之前的部分-换句话说,它包括方案(httpin http://foo/bar/baz)和主机名(fooin http://foo/bar/baz)(以及可选的port,userinfo和port)。

相对网址以路径开头。

绝对网址是绝对网址:可以仅通过网址本身来解析资源的位置。相对网址在某种意义上是不完整的:要解析它,您需要使用方案和主机名,这些通常是从当前上下文中获取的。例如,在网页中

http://myhost/mypath/myresource1.html

你可以像这样放置一个链接

<a href="pages/page1">click me</a>

href链接的属性中,使用了一个相对URL,如果单击该URL,则必须对其进行解析才能跟随它。在这种情况下,当前上下文是

http://myhost/mypath/myresource1.html

因此,将这些的架构,主机名和引导路径作为前缀pages/page1,并添加到,从而产生

http://myhost/mypath/pages/page1

如果链接是:

<a href="/pages/page1">click me</a>

(请注意/出现在url开头),则该问题将被解析为

http://myhost/pages/page1

因为前导/表示主机的根。

在Web应用程序中,我建议对属于您应用程序的所有资源使用相对URL。这样,如果您更改页面的位置,一切将继续进行。任何外部资源(可能是完全在应用程序外部的页面,也可能是您通过内容交付网络交付的静态内容)都应始终使用绝对URL指向:如果没有,则根本无法找到它们,因为它们驻留在其他服务器上。


9
相对URL就不会需要启动的URL路径。//example.com/…?foobar并且#foobar也是相对URL,并且不要以URL路径开头(好的,因为?foobar您可以说它确实以路径开头)。
Gumbo 2010年

@ Gumbo,//example.com/…-type URL是否称为相对URL?这对我来说是新的。
törzsmókus

3
@törzsmókus 根据RFC 2396:“相对URI引用与绝对URI的区别在于它们不是以方案名称开头。”
Gumbo 2015年

50

假设我们正在创建一个子站点,其文件位于文件夹http://site.ru/shop中

1.绝对网址

Link to home page
href="http://sites.ru/shop/"

Link to the product page
href="http://sites.ru/shop/t-shirts/t-shirt-life-is-good/"

2.相对网址

Link from home page to product page
href="t-shirts/t-shirt-life-is-good/"

Link from product page to home page
href="../../"

尽管相对URL看起来比绝对URL短,但是绝对URL更可取,因为可以在网站的任何页面上不变地使用链接。

中级案件

我们考虑了两种极端情况:“绝对”绝对URL和“绝对”相对URL。但是,在这个世界上,一切都是相对的。这也适用于URL。每次谈到绝对URL时,都应始终指定相对于什么。

3.协议相对URL

Link to home page
href="//sites.ru/shop/"

Link to product page
href="//sites.ru/shop/t-shirts/t-shirt-life-is-good/"

Google推荐这样的网址。但是,现在通常认为http://和https://是不同的站点。

4.根目录相对URL

即相对于域的根文件夹。

Link to home page
href="/shop/"

Link to product page
href="/shop/t-shirts/t-shirt-life-is-good/"

如果所有页面都在同一个域内,则是一个不错的选择。当您将站点移至另一个域时,无需对URL中的域名进行大量替换。

5.基本相对URL(相对于首页)

标记<base>指定基本URL,该基本URL将自动添加到所有相对链接和锚点。基本标记不影响绝对链接。作为基本URL,我们将指定主页:<base href =“ http://sites.ru/shop/”>。

Link to home page
href=""

Link to product page
href="t-shirts/t-shirt-life-is-good/"

现在,您不仅可以将站点移动到任何域,而且可以移动到任何子文件夹。请记住,尽管URL看起来是相对的,但实际上它们是绝对的。特别要注意锚点。要在当前页面中导航,我们必须编写href =“ t-shirts / t-shirt-life-is-good /#comments”而不是href =“#comments”。后者将放在主页上。

结论

对于内部链接,我使用基本相对URL(5)。对于外部链接和新闻通讯,我使用绝对URL(1)。


1
好答案。太糟糕了,它在页面上停留的时间太短了,人们看不到它。回答了很多其他答案的评论。
oligofren

24

实际上,应该明确讨论三种类型。实际上,尽管URL被抽象化以便在较低的层次上进行处理,但我想说的是,开发人员可以一生都无需手工编写一个URL。

绝对

绝对URL将您的代码绑定到协议和域。这可以通过动态URL克服。

<a href=“https://dev.example.com/a.html?q=”>https://dev.example.com/a.html?q=</a>

绝对优点:

  1. 控制 -子域和协议可以控制。通过晦涩的子域进入的人将被转移到适当的子域中。您可以根据需要在安全和不安全之间来回切换。

  2. 可配置 -开发人员喜欢绝对的东西。使用绝对URL时,您可以设计简洁的算法。可以将URL设置为可配置的,以便在单个配置文件中进行一次更改即可在站点范围内更新URL。

  3. 千里眼 -您可以搜索抓取您网站的人员,也可以搜索一些额外的外部链接。


根相对

根目录相对URL将您的代码绑定到基本URL。这可以通过动态URL和/或基本标记来克服。

<a href=“/index.php?q=”>.example.com/index.php?q=</a>

相对根优势:

  1. 可配置 -基本标记使它们相对于您选择的任何根目录都相对容易,从而使切换域和实现模板变得容易。

相对的

相对URL将您的代码绑定到目录结构。没有办法克服这个问题。相对URL仅在文件系统中用于遍历目录或作为特殊任务的快捷方式时才有用。

<a href=“index.php?q=”>index.php?q=</a>
<link src=“../.././../css/default.css” />

相对缺点:

  1. 困惑 -那是多少个点?那是几个文件夹?文件在哪里?为什么不起作用?

  2. 维护 -如果文件被意外移动而导致资源退出加载,链接会将用户发送到错误的页面,表单数据可能会发送到错误的页面。如果需要移动文件,则所有需要退出加载的资源和所有不正确的链接都需要更新。

  3. 无法缩放 -当网页变得更加复杂并且视图开始在多个页面之间重用时,相对链接将相对于它们所包含的文件。如果您的HTML导航段将出现在每个页面上,则relative将相对于许多不同的地方。人们开始创建模板时首先意识到的是,他们需要一种管理URL的方法。

  4. 已计算 -它们由您的浏览器实现(希望符合RFC)。请参阅RFC3986中的第5章。

  5. 糟糕!-错误或错别字可能会导致蜘蛛陷阱。


路线的演变

开发人员已停止编写此处讨论的URL。所有请求都针对网站的索引文件,并包含查询字符串(也称为路由)。可以将路由视为一个迷你URL,它告诉您的应用程序要生成的内容。

<a href="<?=Route::url('named_url', array('first' => 'my', 'last' => 'whacky'))?>">
    http://dev.example.com/index.php/my:whacky:url
</a>

路线优点:

  1. 绝对网址的所有优点。
  2. 在URL中使用任何字符。
  3. 更好的控制(适用于SEO)。
  4. 能够通过算法生成URL。这使URL是可配置的。更改URL是单个文件中的单个更改。
  5. 不需要404 not founds。后备路线可以显示站点地图或错误页面。
  6. 间接访问应用程序文件的便捷安全性。警卫声明可以确保每个人都通过适当的渠道到达。
  7. MVC方法的实用性。

我的看法

大多数人会以某种方式在项目中使用这三种形式。关键是要了解它们并选择最适合该任务的一种。


您缺少相对于协议的URL,这些URL严格比完全绝对URL更好。升级方案时(绝对是HTTPS),绝对URL会很麻烦,相对URL可以解决此问题。
东武

@Tobu只需通过HTTPS即可提供所有服务。

旁注:看起来您在上面的大多数代码示例中都使用了印刷引号。您可能要修复它。
domsson

哪种类型的url首先带有点号?例如“ ./index.html”
Narvalex

您能详细介绍一下千里眼吗?如果您使用的是“ Root Relative” URL,为什么看不到有人在抓取您的网站?
Lovethenakedgun

6

如果是在您的网站中使用,则最好使用相对URL,例如,如果您需要将网站移至另一个域名或仅在本地调试,则可以这样做。

看一下stackoverflow在做什么(firefox中为ctrl + U):

<a href="/users/recent/90691"> // Link to an internal element

在某些情况下,它们使用绝对网址:

<link rel="stylesheet" href="http://sstatic.net/so/all.css?v=5934">

...但这只是提高速度的最佳实践。在您的情况下,您似乎并没有在做类似的事情,所以我不必担心。


6

我将不得不同意这里的大多数人的意见。

我想当您想要快速启动并运行某些东西而又不跳出框框思考时,相对的URL方案是“不错的”,尤其是在您的项目很小而开发人员很少(或者只有您自己)的情况下。

但是,一旦您开始在大型的胖系统上工作,并一直在其中切换域和协议,那么我相信一种更优雅的方法是有必要的。

当您本质上比较绝对URL和相对URL时,绝对胜利。为什么?因为它永远不会中断。曾经 绝对URL就是它所说的。最主要的是必须维护您的绝对URL。

绝对URL链接的较弱方法实际上是对整个URL进行硬编码。这不是一个好主意,可能是为什么人们认为它们是危险/邪恶/令人讨厌的罪魁祸首。更好的方法是为自己编写一个易于使用的URL生成器。这些很容易编写,并且功能强大到令人难以置信-自动检测您的协议,易于配置(对整个应用程序一次设置url),等等,它本身就注入了您的域。这样做的好处是:您继续使用相对URL进行编码,并且在运行时,应用程序会即时将URL作为完整的绝对值插入。太棒了

看到几乎所有现代站点都在使用某种动态后端,以这种方式来满足该站点的最大利益。绝对URL不仅可以使您确定它们指向的位置,还可以提高SEO性能。

我可能会补充说,绝对URL会以某种方式更改页面的加载时间的说法是一个神话。如果您的域重于几个字节,并且您使用的是1980年代的拨号调制解调器,那么可以肯定。但这不再是事实了。https://stackoverflow.com/是25个字节,而他们用于网站导航区域的“ topbar-sprite.png”文件的大小则为9+ kb。这意味着与sprite文件相比,附加的URL数据是已加载数据的0.2%,并且该文件甚至不被认为对性能造成了重大影响。

较大的,未经优化的整页背景图像很可能会减慢加载时间。

关于为什么不应该使用相对URL的有趣文章在这里:http: //yoast.com/relative-urls-issues/

例如,亲戚可能会出现一个问题,就是有时服务器映射(请注意大型,混乱的项目)与文件名不符,并且开发人员可能会假设相对URL并非真正。今天,我刚刚在一个正在进行的项目中看到了它,它使整个页面停滞了下来。

也许开发人员忘记了切换指针,谷歌一下子就索引了整个测试环境。糟糕-内容重复(对SEO不利!)。

绝对值可能很危险,但是如果使用正确且不会破坏您的构建的方式,它们被证明是更可靠的。请看上面的文章,其中提供了Wordpress网址生成器超赞的一系列原因。

:)


1
当您说绝对URL时,是指完整URL还是/用于链接到基本路径?即/products/wallets/thing.html相对于thing.html相对http://www.myshop.com/products/wallets/thing.html
布拉德利洪水2014年

我相信,以“ /”开头的前缀总是相对于域根。因此,如果您的域名是“ www.example.com”,则任何编码为“ /image1.jpg”的引用都将被解释为“ www.example.com/image1.jpg”。没有前斜杠的项目将被解释为相对于请求根目录。当我说“绝对URL”时,是指完全限定的URL。我畏缩通过互联网发送MSDN联系,但其实这是一个相当不错的故障:msdn.microsoft.com/en-us/library/windows/desktop/...
dudewad

这是当前的最佳做法,尽管许多人尚未意识到。我喜欢路由,例如在Kohana中,您可以在其中echo Route::url('route_name')使用站点URL来构建绝对URL,并可以选择通过HTTPS建立路由的路由信息​​。

我感到有必要指出,拨号调制解调器并没有保留在80年代。现在有很多人除了拨号上网或价格过高的非常有限的卫星互联网外别无选择...如果您很穷,还有什么比免费拨号上网更好的呢?看到开发人员认为拨号不再存在真的让我感到困扰。可能需要5到10分钟(!!!)才能通过拨号登录到我的银行网站... Paypal,Amazon和Ebay并没有好得多。Egg Cave(虚拟宠物网站)和Facebook只是不能在拨号上使用。这影响了许多居住在农村地区的人。
凯特考克斯

好的,是的,尽管有些人正在使用拨号,但绝大多数(绝大多数)用户都没有使用拨号。这与人口统计也有很大关系。如果您要拍摄超高性能的结果,请开始将您的域名从网址中删除。但是,该评论的重点是强调性能通常在其他方面可以找到-您可以通过优化单个图像来获得丢失的所有传输时间(以url字节为单位)。但是,如果您有20%或更多的用户正在拨号,那我认为那很重要。在2015年,出于所有实际目的,事实并非如此。
dudewad 2015年

4

在大多数情况下,相对URL是必经之路,它们本质上是可移植的,这意味着如果您想提升自己的网站并将其放在其他可以立即使用的地方,则可以减少调试时间。

关于绝对URL和相对URL,有一篇不错的文章,请查看。


4

的URL与所述URL方案和计划特定部分(开始http://https://ftp://等)是绝对URL。

任何其他URL都是相对URL,并且需要一个基本URL,如果没有另外声明,则相对URL是从该URL解析(并因此而来)的,该相对URL是使用该引用的资源的URL。

查看RFC 2396 –附录C,了解解析相对URL的示例。


3

假设您有一个网站www.yourserver.com。在Web文档的根目录中,有一个images子目录,而在其中有myimage.jpg。

绝对URL定义了文档的确切位置,例如:

http://www.yourserver.com/images/myimage.jpg

相对URL定义了相对于当前目录的位置,例如,假设您位于根Web目录中,则图像位于:

images/myimage.jpg

(相对于该根目录)

您应尽可能使用相对URL。如果将站点移至www.anotherserver.com,则必须更新指向www.yourserver.com的所有绝对URL,相对的URL仍将保持原样。


0

对于每个支持相对URI解析的系统,相对URI和绝对URI确实实现了相同的目标:引用。它们可以互换使用。因此,您可以在每种情况下做出不同的决定。从技术上讲,它们提供相同的引用。

确切地说,对于每个相对URI,已经有一个绝对URI。这就是相对URI所针对的基本URI。因此,相对URI实际上是绝对URI之上的功能。

这就是为什么使用相对URI可以单独使用绝对URI 做更多的事情-这对于静态网站尤其重要,因为静态网站与绝对URI相比,维护起来不那么灵活。

相对URI解析的这些积极影响也可以用于动态Web应用程序开发。在动态环境中,绝对URI确实引入的灵活性也很容易解决,因此对于一些不确定URI解析以及如何正确实现和管理(不是总是很容易)的开发人员,他们经常选择使用绝对URI。网站动态部分中的URI,因为它们可以引入其他动态功能(例如,包含URI前缀的配置变量),以便解决不灵活性的问题。

那么使用绝对URI的好处是什么?从技术上讲没有,但是我要说:相对URI更复杂,因为需要针对所谓的绝对基本URI解析它们。多年来,即使严格地定义了解析,您也可能会在URI解析错误的客户端上运行。由于绝对URI不需要任何解析,因此使用绝对URI不会冒险以相对URI解析遇到错误的客户端行为。那么,这种风险到底有多高?好吧,这非常罕见。我只知道一个Internet浏览器的相对URI解析有问题。这不是普遍的,而只是在非常(模糊)的情况下。

在HTTP客户端(浏览器)旁边,对于超文本文档或代码的作者来说,它可能更复杂。在这里,绝对URI的优点是易于测试,因为您可以按原样将其输入到浏览器地址栏中。但是,如果这不只是您的一小时工作,那么实际上了解绝对和相对URI处理对您来说通常更有价值,这样您就可以真正利用相对链接的好处。


-4

我衷心推荐相对URL,以将同一站点的位指向同一站点的其他位。

不要忘记,即使在同一个站点中,对HTTPS的更改也将需要一个绝对URL。

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.