CSS和JS的绝对vs相对URL

Question

需要知道包含css或js的方法是否更好 -

<link href="http://www.mysite.com/css/style.css" rel="stylesheet" type="text/css"> 
or 
<link href="./style.css" rel="stylesheet" type="text/css"> 

有人告诉我，如果我使用绝对URL（包括http://www.mysite.com），那么每次加载页面时都会从服务器下载CSS或JS。

请帮助我理解这一点。

Answer 1

您应该使用相对链接，因为您的代码不会依赖于您的域。例如，如果您要更改域名，则无需更改代码。

你的朋友告诉你的是假的，浏览器无论如何都要从你的服务器下载你的CSS和js，但是它把它放在缓存中供以后使用。因此不会在每个页面上下载。

Answer 2

简短的回答是：没关系。使用您喜欢的任何一种风格，尽量保持一致。

答案很长：

人们一直在问这个问题，因为CSS成了一件事。有各种各样的答案会以某种方式争论，引用性能影响或可维护性。

这一切都不重要，因为：

• 浏览器非常高效，任何性能差异都没有用。
• 担心优化包含路径是一件令人分心的事情，你最好只编写代码。

Answer 3

绝对URL提供资源的完整路径。如果资源来自外部域或其他地方，通常就是这种情况。但是，为资源提供固定位置会导致破坏，尤其是在移动时，例如在生产服务器上部署文件。

例如，您在开发时处理localhost，并部署到example.com。您有index.html加载名为styles.css的样式表。您的绝对网址如下所示：

<link href="http://localhost/styles.css" type="text/css" />

但这仅适用于您的本地服务器。但是在部署时，您的页面将查找localhost - 但您已经在生产服务器中。它会破裂。

相对URL提供相对于加载它的页面的资源路径。它为您提供了更大的灵活性，尤其是在移动页面时。