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

另外,用哪个比较好呢?


当前回答

我不同意大多数人的观点。

我认为相对URL方案是“好的”,当你想快速启动和运行一些东西,而不是跳出框框思考,特别是如果你的项目很小,只有几个开发人员(或者只有你自己)。

然而,一旦您开始在大型的、臃肿的系统上工作,并且一直在切换域和协议,我相信一种更优雅的方法是合适的。

当你从本质上比较绝对和相对url时,绝对url胜出。为什么?因为它永远不会坏。永远。绝对URL就是它所描述的那样。问题是你必须维护你的绝对url。

The weak approach to absolute URL linking is actually hard coding the entire URL. Not a great idea, and probably the culprit of why people see them as dangerous/evil/annoying to maintain. A better approach is to write yourself an easy to use URL generator. These are easy to write, and can be incredibly powerful- automatically detecting your protocol, easy to config (literally set the url once for the whole app), etc, and it injects your domain all by itself. The nice thing about that: You go on coding using relative URLs, and at run time the application inserts your URLs as full absolutes on the fly. Awesome.

鉴于所有现代网站实际上都使用某种动态后端,这样做对网站最有利。绝对url的作用不仅仅是让你确定它们指向哪里——它们还可以提高SEO性能。

I might add that the argument that absolute URLs is somehow going to change the load time of the page is a myth. If your domain weighs more than a few bytes and you're on a dialup modem in the 1980s, sure. But that's just not the case anymore. https://stackoverflow.com/ is 25 bytes, whereas the "topbar-sprite.png" file that they use for the nav area of the site weighs in at 9+ kb. That means that the additional URL data is .2% of the loaded data in comparison to the sprite file, and that file is not even considered a big performance hit.

大的,未优化的,整个页面的背景图像更有可能减慢你的加载时间。

这里有一篇关于为什么不应该使用相对url的有趣文章: 为什么相对url应该被禁止

例如,可能会出现的一个问题是,有时服务器映射(请注意大型、混乱的项目)与文件名不一致,开发人员可能会对相对URL做出不正确的假设。我今天在我参与的一个项目上看到了这个,它把整个页面都拖下来了。

或者开发人员忘记切换指针,突然谷歌索引了整个测试环境。唉,重复的内容(不利于搜索引擎优化!)

绝对可能是危险的,但如果使用得当,并且不会破坏你的构建,它们被证明是更可靠的。看看上面的文章,它给出了一堆为什么Wordpress url生成器超级棒的理由。

:)

其他回答

请看这个: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包括“路径”部分之前的部分——换句话说,它包括方案(http://foo/bar/baz中的http)和主机名(http://foo/bar/baz中的foo)(还有可选的port、userinfo和port)。

相对url以路径开头。

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

http://myhost/mypath/myresource1.html

你可以这样放一个链接

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

在链接的href属性中,使用了一个相对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指向:如果不这样做,则根本无法定位它们,因为它们驻留在不同的服务器上。

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

1. 绝对URL

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. 相对URL

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.Protocol-relative URL

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

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

谷歌推荐这样的URL。然而,现在通常认为http://和https://是不同的网站。

4. Root-relative 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,它会自动添加到所有相对链接和锚点。base标记不影响绝对链接。作为基本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-shirt /t-shirt-life-is-good/#comments"而不是href="#comments"。后者将扔在首页上。

结论

对于内部链接,我使用基本相对url(5),对于外部链接和时事通讯,我使用绝对url(1)。

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

如果你所说的绝对url指的是包含方案(例如HTTP / HTTPS)和主机名(例如yourdomain.example)的url,不要这样做(对于本地资源),因为维护和调试会很糟糕。

假设您在代码中处处使用绝对URL,如<img src="http://yourdomain.example/images/example.png">。现在,当你要去的时候,会发生什么:

切换到其他方案(例如HTTP -> HTTPS) 切换域名(test.yourdomain. com)。示例-> yourdomain.example)

在第一个例子中,您将收到关于页面上正在请求的不安全内容的警告。因为你所有的url都是硬编码使用http(://yourdomain.example/images/example.png)。当通过HTTPS运行页面时,浏览器期望所有资源都通过HTTPS加载,以防止信息泄露。

在第二个例子中,当你把你的网站从测试环境中上线时,这意味着所有的资源仍然指向你的测试域,而不是你的上线域。

因此,为了回答您关于使用绝对url还是相对url的问题:始终使用相对url(用于本地资源)。

不同的url之间有什么区别?

首先让我们来看看我们可以使用的不同类型的url:

http://yourdomain.example/images/example.png / / yourdomain.example /图片/ example.png /图片/ example.png 图片/ example.png

这些url试图访问服务器上的哪些资源?

在下面的例子中,我假设网站在服务器/var/www/mywebsite上运行

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

上面的(绝对)URL试图访问资源/var/www/website/images/example.png。这种类型的URL是你总是想要避免从你自己的网站请求资源的原因如上所述。然而,它确实有它的位置。例如,如果你有一个网站http://yourdomain.example,你想通过HTTPS从外部域请求资源,你应该使用这个。例如,https://externalsite.example/path/to/image.png。

/ / yourdomain.example /图片/ example.png

这个URL是相对的,基于当前使用的方案,当包含外部资源(图像,javascript等)时几乎总是应该使用。

What this type of URL does is use the current scheme of the page it is on. This means that you are on the page http://yourdomain.example and on that page is an image tag <img src="//yourdomain.example/images/example.png"> the URL of the image would resolve in http://yourdomain.example/images/example.png. When you would have been on the page https://yourdomain.example and on that page is an image tag <img src="//yourdomain.example/images/example.png"> the URL of the image would resolve in https://yourdomain.example/images/example.png.

这可以防止在不需要时通过HTTPS加载资源,并自动确保在需要时通过HTTPS请求资源。

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

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

/图片/ example.png

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

如果在某个时候你决定切换域,它仍然可以工作,因为它是相对的。

图片/ example.png

这也是一个相对URL,尽管与前一个略有不同。这个URL相对于当前路径。这意味着它将解析到不同的路径,这取决于您在站点中的位置。

例如,当你在http://yourdomain.example页面上,你使用<img src="images/example.png">时,它会在服务器上解析为/var/www/mywebsite/images/example.png,然而,当你在http://yourdomain.example/some/path页面上,你使用完全相同的图像标记时,它会突然解析为/var/www/mywebsite/ somepath /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>

有些(有点)复制品

编写跨环境传输url的安全方法 在网站中链接图片的正确方法是什么?

我衷心推荐使用相对url将同一站点的部分指向同一站点的其他部分。

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

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

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

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

相对URL定义了相对于当前目录的位置,例如,假设你在你的图片所在的根目录中:

images/myimage.jpg

(相对于根目录)

你应该尽可能使用相对url。如果你将网站移动到www.anotherserver.com,你将不得不更新所有指向www.yourserver.example的绝对url,相对的url将继续工作。