2013-05-21 104 views
0

相對URL需要知道哪種方法包括CSS或JS更好 -絕對VS對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會在每次頁面加載時從服務器下載。

請幫我理解這一點。

回答

2

簡短的回答是:沒關係。使用你喜歡的任何一種風格,試着保持一致。

長的答案是:

人都在問這樣的問題,因爲CSS成了一件事。有各種各樣的答案會引發性能問題或可維護性,這些答案會以某種方式爭論。

都不是很重要,因爲:

  • 瀏覽器是如此有效,以至於任何性能差異是完全沒有實際意義。
  • 擔心優化你的包含路徑是一種分心,你最好只寫代碼。
2

絕對URL提供資源的完整路徑。通常情況下,如果資源來自外部域或其他地方,則是這種情況。但是,爲資源提供固定位置會導致破壞,特別是在移動環境時,比如說將文件部署到生產服務器上。

例如,您在開發localhost上工作,並將其部署到example.com。您有一個加載名爲styles.css的樣式表的index.html。您的絕對URL將如下所示:

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

但這隻適用於您的本地服務器。但是當您部署時,您的頁面將尋找localhost - 但您已經在生產服務器中。它會中斷。

相對URL提供資源相對於加載它的頁面的路徑。它爲您提供了更大的靈活性,尤其是在移動頁面時。

+1

「僅供參考:所有的網址都會下載在每個頁面加載要不然怎麼會他們的工作?」 < - 這完全是錯誤的。所有現代瀏覽器在本地緩存經常訪問頁面的JS和CSS。下載一次,根據需要提供服務。您可以通過網絡檢查員進行驗證; Chrome現在告訴我,這個頁面上的三個CSS文件都是在0ms內從緩存中加載的。 –

+0

@DanM也許我說錯了。更新。 – Joseph

3

你應該使用相對鏈接,因爲就像你的代碼不能解除你的域名一樣。例如,如果您要更改域名,則不必更改代碼。

你的朋友告訴你的是錯誤的,瀏覽器從你的服務器上下載你的CSS和js,但它將它放到緩存中供後期使用。所以它不會在每個頁面上下載。