我們知道，網頁中的CSS檔案、JS檔案、圖片等多數都是以資源形式引入HTML中的，既然是資原始檔那就存在一個引用的路徑（位置）。Web前端對於資源路徑的表現形式主要有兩種：相對路徑、絕對路徑，相信大家在剛學習Web前端時就聽老師和前輩們說過：相對路徑要比絕對路徑更容易維護。

那是不是意味著Web前端頁面中各類資源就一定得用相對路徑呢？其實也未必！

什麼是相對路徑？

在說相對路徑前我們先大體瞭解下與相對路徑對立的絕對路徑。舉例來說，老師在課堂上如果要點名，可能會說：“張三同學，請問答一下這個問題”，這裡的指名道姓其實就可以理解為絕對路徑。

但假設張三同學沒有回答出問題，那老師可能會讓他的同桌來回答問題，比如老師說道：“張三左邊的同學回答一下這個問題”。此時，張三左邊的同學就是相對於張三去定位到某個人的，這就可以理解為是相對路徑。

總結來說，相對路徑肯定是以一個絕對路徑為參考點來定位尋找資源的。

相對路徑的表示形式

那在前端中怎麼判斷一個路徑是相對路徑呢？很簡單，比如下面這些URI就是相對路徑形式：

a/b.html /a/b.html ./a/b.html ../a/b.html

如果一個URL是以“/”開頭的，表示此資源是當前站點根目錄下的某個資源；

“./”表示在當前目錄下的資源；

“../”表示上一級目錄下的資源；

如果不是以“http://”、“/”、“./”、“../”開頭的URL，那預設就是以當前目錄為參考路徑去定位查詢資源的。

建議使用絕對路徑而不是相對路徑

雖說使用相對路徑可以避免再次部署時可能導致的路徑錯誤的Bug，但我們在實際網站開發過程中並不建議大家使用相對路徑！因為現在的網站是需要注重效能的，前後端分離、動靜分離這種架構模式下再去使用相對路徑是不合適的，而應該使用完整的“域名+路徑”形式來引用資源，這樣也易於後期的CDN加速。