CSS和JS的绝对URL和相对URL

Absolute vs relative URL for CSS and JS

本文关键字:URL 相对 JS CSS      更新时间:2023-09-26

需要知道哪种方法包含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将在每个页面加载时从服务器下载。

你应该使用相对链接,因为这样你的代码不依赖于你的域名。例如,如果您要更改域,则不必更改代码。

你的朋友告诉你的是假的,浏览器从你的服务器下载你的CSS和js,但它把它放在缓存中供以后使用。所以它不会被下载到每个页面

绝对url提供资源的完整路径。如果资源来自外部域或其他地方,通常会出现这种情况。然而,为资源提供固定的位置会导致中断,特别是当您移动资源时,比如将文件部署到生产服务器上。

例如,您在开发时使用localhost,并部署到example.com。您有一个index.html,它加载一个名为styles.css的样式表。你的绝对URL看起来像这样:

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

但这只适用于本地服务器。但是当您部署时,您的页面将寻找localhost—但是您已经在生产服务器中了。它会坏的。

相对url提供资源相对于加载它的页面的路径。它给你更多的灵活性,特别是在移动页面的时候。

简短的回答是:没关系。使用你喜欢的样式,只要保持一致就可以了。

长答案是:

自从CSS成为一种东西以来,人们就一直在问这种问题。有各种各样的答案会以这样或那样的方式争论,引用性能影响或可维护性。

这些都不重要,因为:

  • 浏览器是如此高效,任何性能差异是完全没有意义的。
  • 担心优化你的包含路径会分散注意力,你最好只写代码。