javascript中相对路径和绝对路径的区别

Have small clarifications,

有一点澄清，

As of my knowledge these are the relative and absolute paths,

据我所知，这些是相对和绝对的路径，

Completely relative: <img src="kitten.png"/>   
Absolute in all respects: <img src="http://www.foo.com/images/kitten.png">

What is the difference between Relative path and absolute path?

相对路径和绝对路径有什么区别？

Is there any performance issues occures for using these paths?

使用这些路径是否存在任何性能问题？

We will get any secure for the sites ?

我们会为网站安全吗？

Is there any way to converting absolute path to relative

有没有办法将绝对路径转换为相对路径

9 个解决方案

#1

What is the difference between Relative path and absolute path?

相对路径和绝对路径有什么区别？

One has to be calculated with respect to another URI. The other does not.

必须根据另一个URI计算一个。另一个没有。

Is there any performance issues occures for using these paths?

使用这些路径是否存在任何性能问题？

Nothing significant.

没什么重要的。

We will get any secure for the sites ?

我们会为网站安全吗？

No

没有

Is there any way to converting absolute path to relative

有没有办法将绝对路径转换为相对路径

In really simplified terms: Working from left to right, try to match the scheme, hostname, then path segments with the URI you are trying to be relative to. Stop when you have a match.

用非常简单的术语：从左到右工作，尝试匹配方案，主机名，然后使用您尝试相对的URI匹配路径段。当你有比赛时停止。

#2

The path with reference to root directory is called absolute. The path with reference to current directory is called relative.

引用根目录的路径称为绝对路径。引用当前目录的路径称为relative。

#3

Completely relative:

完全相对：

<img src="kitten.png"/>

this is a relative path indeed.

这确实是一条相对的道路。

Absolute in all respects:

在所有方面绝对：

<img src="http://www.foo.com/images/kitten.png"/>

this is a URL, and it can be seen in some way as an absolute path, but it's not representative for this matter.

这是一个URL，它可以在某种程度上被视为绝对路径，但它并不代表这个问题。

The difference between relative and absolute paths is that when using relative paths you take as reference the current working directory while with absolute paths you refer to a certain, well known directory. Relative paths are useful when you make some program that has to use resources from certain folders that can be opened using the working directory as a starting point.

相对路径和绝对路径之间的区别在于，当使用相对路径时，您将当前工作目录作为参考，而使用绝对路径时，您将引用某个已知的目录。当您创建一些必须使用某些文件夹中的资源的程序时，相对路径非常有用，这些文件夹可以使用工作目录作为起点打开。

Example of relative paths:

相对路径的示例：

• image.png, which is the equivalent to .\image.png (in Windows) or ./image.png (anywhere else).  The . explicitly specifies that you're expressing a path relative to the current working directory, but this is implied whenever the path doesn't begin at a root directory (designated with a slash), so you don't have to use it necessarily (except in certain contexts where a default directory (or a list of directories to search) will be applied unless you explicitly specify some directory).

  image.png，相当于。\ image.png（在Windows中）或./image.png（在其他任何地方）。这个。显式指定您表示相对于当前工作目录的路径，但只要路径不是从根目录（用斜杠指定）开始就暗示这一点，因此您不必必须使用它（除了在某些情况下，除非您明确指定某个目录，否则将应用默认目录（或要搜索的目录列表）。

• ..\images\image2.jpg  This way you can access resources from directories one step up the folders tree.  The ..\ means you've exited the current folder, entering the directory that contains both the working and images folders.  Again, use \ in Windows and / anywhere else.

  .. \ images \ image2.jpg通过这种方式，您可以从文件夹树一步到目录中访问资源。 .. \表示您已退出当前文件夹，进入包含工作文件夹和图像文件夹的目录。再次，在Windows和/或其他任何地方使用\。

Example of absolute paths:

绝对路径的示例：

• D:\documents\something.doc
• d：\文档\ something.doc
• E:\music\good_music.mp3
• E：\音乐\ good_music.mp3

and so on.

等等。

#4

Imagine you have a window open on http://www.foo.com/bar/page.html In all of them (HTML, Javascript and CSS):

想象一下，您在http://www.foo.com/bar/page.html上打开了一个窗口。在所有这些窗口中（HTML，Javascript和CSS）：

opened_url = http://www.foo.com/bar/page.html
base_path = http://www.foo.com/bar/
home_path = http://www.foo.com/
/kitten.png = Home_path/kitten.png
kitten.png = Base_path/kitten.png

In HTML and Javascript, the base_path is based on the opened window. In big javascript projects you need a BASEPATH or root variable to store the base_path occasionally. (like this)

在HTML和Javascript中，base_path基于打开的窗口。在大型javascript项目中，您需要BASEPATH或root变量来偶尔存储base_path。 （喜欢这个）

In CSS the opened url is the address of which your .css is stored or loaded, its not the same like javascript with current opened window in this case.

在CSS中，打开的URL是存储或加载.css的地址，在这种情况下，它与当前打开的窗口的javascript不同。

And for being more secure in absolute paths it is recommended to use // instead of http:// for possible future migrations to https://. In your own example, use it this way:

为了在绝对路径中更安全，建议使用//代替http：//以便将来可能迁移到https：//。在您自己的示例中，以这种方式使用它：

<img src="//www.foo.com/images/kitten.png">

#5

Relative Paths

相对路径

A relative path assumes that the file is on the current server. Using relative paths allows you to construct your site offline and fully test it before uploading it.

相对路径假定文件位于当前服务器上。通过使用相对路径，您可以离线构建站点并在上载之前对其进行全面测试。

For example:

例如：

php/webct/itr/index.php

PHP /的WebCT / ITR / index.php的

.

。

Absolute Paths

绝对路径

An absolute path refers to a file on the Internet using its full URL. Absolute paths tell the browser precisely where to go.

绝对路径是指使用其完整URL在Internet上的文件。绝对路径可以准确地告诉浏览器去哪里。

For example:

例如：

http://www.uvsc.edu/disted/php/webct/itr/index.php

http://www.uvsc.edu/disted/php/webct/itr/index.php

Absolute paths are easier to use and understand. However, it is not good practice on your own website. For one thing, using relative paths allows you to construct your site offline and fully test it before uploading it. If you were to use absolute paths you would have to change your code before uploading it in order to get it to work. This would also be the case if you ever had to move your site or if you changed domain names.

绝对路径更易于使用和理解。但是，在您自己的网站上这不是一个好习惯。首先，使用相对路径允许您离线构建站点并在上载之前对其进行全面测试。如果您要使用绝对路径，则必须在上传代码之前更改代码才能使其正常工作。如果您不得不移动您的网站或更改域名，也会出现这种情况。

Reference: http://openhighschoolcourses.org/mod/book/tool/print/index.php?id=12503

参考：http：//openhighschoolcourses.org/mod/book/tool/print/index.php？id = 12503

#6

If you use the relative version on http://www.foo.com/abc your browser will look at http://www.foo.com/abc/kitten.png for the image and would get 404 - Not found.

如果您使用http://www.foo.com/abc上的相对版本，您的浏览器将查看http://www.foo.com/abc/kitten.png以获取该图像，并且将获得404 - 未找到。

#7

Going Relative:

相对：

• You could download a self-contained directory (maybe a zipped file) and open links from an html or xml locally without need to reach the server. This increases speed performance significantly, specially if you have to deal with a slow network.
• 您可以下载一个自包含的目录（可能是压缩文件）并在本地打开来自html或xml的链接，而无需访问服务器。这显着提高了速度性能，特别是如果您必须处理慢速网络。

Going Absolute:

走向绝对：

• You would have to swallow the network speed, but in terms of security you could prevent certain users to see certain files or increase network traffic if (and only if...) that is good for you.
• 您必须吞下网络速度，但就安全性而言，如果（并且仅当...）对您有利，您可以阻止某些用户查看某些文件或增加网络流量。

#8

I think this example will help you in understanding this more simply.

我想这个例子可以帮助你更简单地理解这个。

Path differences in Windows

Windows中的路径差异

Windows absolute path C:\Windows\calc.exe

Windows绝对路径C：\ Windows \ calc.exe

Windows non absolute path (relative path) calc.exe

Windows非绝对路径（相对路径）calc.exe

In the above example, the absolute path contains the full path to the file and not just the file as seen in the non absolute path. In this example, if you were in a directory that did not contain "calc.exe" you would get an error message. However, when using an absolute path you can be in any directory and the computer would know where to open the "calc.exe" file.

在上面的示例中，绝对路径包含文件的完整路径，而不仅仅是非绝对路径中显示的文件。在此示例中，如果您位于不包含“calc.exe”的目录中，则会收到错误消息。但是，使用绝对路径时，您可以在任何目录中，计算机将知道打开“calc.exe”文件的位置。

Path differences in Linux

Linux中的路径差异

Linux absolute path /home/users/c/computerhope/public_html/cgi-bin

Linux绝对路径/ home / users / c / computerhope / public_html / cgi-bin

Linux non absolute path (relative path) /public_html/cgi-bin

Linux非绝对路径（相对路径）/ public_html / cgi-bin

In these example, the absolute path contains the full path to the cgi-bin directory on that computer. How to find the absolute path of a file in Linux Since most users do not want to see the full path as their prompt, by default the prompt is relative to their personal directory as shown above. To find the full absolute path of the current directory use the pwd command.

在这些示例中，绝对路径包含该计算机上cgi-bin目录的完整路径。如何在Linux中查找文件的绝对路径由于大多数用户不希望将完整路径视为提示，因此默认情况下，提示相对于其个人目录，如上所示。要查找当前目录的完整绝对路径，请使用pwd命令。

It is a best practice to use relative file paths (if possible).

最佳实践是使用相对文件路径（如果可能）。

When using relative file paths, your web pages will not be bound to your current base URL. All links will work on your own computer (localhost) as well as on your current public domain and your future public domains.

使用相对文件路径时，您的网页不会绑定到当前的基本URL。所有链接都可以在您自己的计算机（localhost）以及您当前的公共域和未来的公共域上运行。

#9

The relative path contains just the file with its extension, eg. abc.html, whereas in the absolute path the directory would be known from where to open that file, eg. C:\Windows\Desktop\abc.html .

相对路径仅包含具有其扩展名的文件，例如。 abc.html，而在绝对路径中，目录将从哪里打开该文件是已知的，例如。 C：\ Windows \ Desktop \ abc.html。