我想知道这两种URL之间的区别:相对URL(用于图片,CSS文件,JS文件等)和绝对URL。
另外,哪个更好用?
我想知道这两种URL之间的区别:相对URL(用于图片,CSS文件,JS文件等)和绝对URL。
另外,哪个更好用?
Answers:
通常,使用相对URL被认为是最佳实践,这样您的网站就不会绑定到当前部署位置的基本URL。例如,它无需修改即可在localhost和公共域上工作。
如果使用绝对URL,则意味着包括方案(例如,http / https)和主机名(例如,yourdomain.com)的URL永远不会这样做(对于本地资源),因为这将使维护和调试变得很糟糕。
假设您在代码中到处都使用了绝对URL,例如<img src="http://yourdomain.com/images/example.png">
。现在,当您要执行以下操作时会发生什么:
在第一个示例中,将发生的事情是,您将收到有关在页面上请求不安全内容的警告。因为您所有的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
在下面的示例中,我假设网站是从服务器上的以下位置运行的/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>
看到这个: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
in http://foo/bar/baz
)和主机名(foo
in 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指向:如果没有,则根本无法找到它们,因为它们驻留在其他服务器上。
//example.com/…
,?foobar
并且#foobar
也是相对URL,并且不要以URL路径开头(好的,因为?foobar
您可以说它确实以空路径开头)。
//example.com/…
-type URL是否称为相对URL?这对我来说是新的。
假设我们正在创建一个子站点,其文件位于文件夹http://site.ru/shop中。
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/"
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时,都应始终指定相对于什么。
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://是不同的站点。
即相对于域的根文件夹。
Link to home page
href="/shop/"
Link to product page
href="/shop/t-shirts/t-shirt-life-is-good/"
如果所有页面都在同一个域内,则是一个不错的选择。当您将站点移至另一个域时,无需对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)。
实际上,应该明确讨论三种类型。实际上,尽管URL被抽象化以便在较低的层次上进行处理,但我想说的是,开发人员可以一生都无需手工编写一个URL。
绝对URL将您的代码绑定到协议和域。这可以通过动态URL克服。
<a href=“https://dev.example.com/a.html?q=”>https://dev.example.com/a.html?q=</a>
绝对优点:
控制 -子域和协议可以控制。通过晦涩的子域进入的人将被转移到适当的子域中。您可以根据需要在安全和不安全之间来回切换。
可配置 -开发人员喜欢绝对的东西。使用绝对URL时,您可以设计简洁的算法。可以将URL设置为可配置的,以便在单个配置文件中进行一次更改即可在站点范围内更新URL。
千里眼 -您可以搜索抓取您网站的人员,也可以搜索一些额外的外部链接。
根目录相对URL将您的代码绑定到基本URL。这可以通过动态URL和/或基本标记来克服。
<a href=“/index.php?q=”>.example.com/index.php?q=</a>
相对根优势:
相对URL将您的代码绑定到目录结构。没有办法克服这个问题。相对URL仅在文件系统中用于遍历目录或作为特殊任务的快捷方式时才有用。
<a href=“index.php?q=”>index.php?q=</a>
<link src=“../.././../css/default.css” />
相对缺点:
困惑 -那是多少个点?那是几个文件夹?文件在哪里?为什么不起作用?
维护 -如果文件被意外移动而导致资源退出加载,链接会将用户发送到错误的页面,表单数据可能会发送到错误的页面。如果需要移动文件,则所有需要退出加载的资源和所有不正确的链接都需要更新。
无法缩放 -当网页变得更加复杂并且视图开始在多个页面之间重用时,相对链接将相对于它们所包含的文件。如果您的HTML导航段将出现在每个页面上,则relative将相对于许多不同的地方。人们开始创建模板时首先意识到的是,他们需要一种管理URL的方法。
已计算 -它们由您的浏览器实现(希望符合RFC)。请参阅RFC3986中的第5章。
糟糕!-错误或错别字可能会导致蜘蛛陷阱。
开发人员已停止编写此处讨论的URL。所有请求都针对网站的索引文件,并包含查询字符串(也称为路由)。可以将路由视为一个迷你URL,它告诉您的应用程序要生成的内容。
<a href="<?=Route::url('named_url', array('first' => 'my', 'last' => 'whacky'))?>">
http://dev.example.com/index.php/my:whacky:url
</a>
路线优点:
大多数人会以某种方式在项目中使用这三种形式。关键是要了解它们并选择最适合该任务的一种。
如果是在您的网站中使用,则最好使用相对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">
...但这只是提高速度的最佳实践。在您的情况下,您似乎并没有在做类似的事情,所以我不必担心。
我将不得不同意这里的大多数人的意见。
我想当您想要快速启动并运行某些东西而又不跳出框框思考时,相对的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网址生成器超赞的一系列原因。
:)
/
用于链接到基本路径?即/products/wallets/thing.html
相对于thing.html
相对http://www.myshop.com/products/wallets/thing.html
echo Route::url('route_name')
使用站点URL来构建绝对URL,并可以选择通过HTTPS建立路由的路由信息。
在大多数情况下,相对URL是必经之路,它们本质上是可移植的,这意味着如果您想提升自己的网站并将其放在其他可以立即使用的地方,则可以减少调试时间。
关于绝对URL和相对URL,有一篇不错的文章,请查看。
的URL与所述URL方案和计划特定部分(开始http://
,https://
,ftp://
等)是绝对URL。
任何其他URL都是相对URL,并且需要一个基本URL,如果没有另外声明,则相对URL是从该URL解析(并因此而来)的,该相对URL是使用该引用的资源的URL。
查看RFC 2396 –附录C,了解解析相对URL的示例。
假设您有一个网站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仍将保持原样。
对于每个支持相对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处理对您来说通常更有价值,这样您就可以真正利用相对链接的好处。