引入css外部樣式表

前言

爲何會有這篇文章，外部引入樣式有什麼好談的，不外乎就是

<link rel="stylesheet" href="style.css" />

就這麼簡單，還有什麼，so easy，我以前都是這麼認爲的你確定比我聰明多了~_^，可是當作一個頁面在微信上瀏覽而且修改再瀏覽的時候我發現不對勁，由於已經上傳的樣式表木有改變，IOS還好，能夠強制刷新頁面。可是安卓端這塊一直在用微信的緩存，尚未刷新的按鈕，因此以爲css引入問題目測應該沒有這麼簡單。

好了，下面都是一些本身的純扯蛋瞎扯，歡迎前輩多拍磚。

關於路徑

在尚未說以前先說下關於css引入的2種方式：

相對路徑(Relative Path)，顧名思義：就是css文件相對某一個參照物的位置。上物理課的時候老師都會提到相對運動：指某一個物體對另一個物體的相對於一個固定參照物來是相對運動的。咱們走路看汽車的時候以爲汽車日後走，汽車看咱們的時候是往前走，那麼相對路徑也是醬樣子的，網頁所處目錄就是咱們的參照物。像剛剛上面這段css代碼的引入就是一個相對路徑地址，test是網站的目錄，style.css文件跟這個網頁文件是同處一個目錄層級，如圖： 
 
那麼在網頁文件index.html引入css應該是

<link rel="stylesheet" href="style.css" />

假如說css文件放在跟index.html同級目錄，名爲css文件夾裏面，相似這樣： 
 
那麼這時候引入css的時候就應該是

<link rel="stylesheet" href="css/style.css" />

假如css放跟目錄也就是test這裏 
 
那麼引入css就應該是

<link rel="stylesheet" href="/style.css" /> <link rel="stylesheet" href="./style.css" />

「/」斜槓符號在這裏表示的就是根目錄，也就是這些網頁文件之間聯繫的參照物。

絕對路徑(Absolute Path)，既然是絕對的，那就說明這個地址是惟一性，獨立性。相對本地來講，剛剛的站點test的絕對地址爲F:\test，相對服務器來講，就應該是127.0.0.1/test相似這樣的IP地址。

關於路徑引入

要相對路徑仍是絕對路徑引入css文件，我的認爲本地預覽的時候能夠選擇相對路徑，項目上線的時候改爲絕對路徑來引入，爲何？有如下幾點：

1. 減小索引，絕對地址的惟一性能夠確保用戶在輸入網頁的時候，瀏覽器直接去索引到那個IP地址，直接一刀致命，沒有拖沓。而相對路徑就要一步步索引目錄，這就比如在路上碰見一個心儀的妹紙，咱們害羞不敢當面去談話，因而咱們製造了無數的偶遇以後纔有膽子上去問聯繫方式，到最後才發現妹紙早名花有主，早知如此，何須當初呢~

2. 增長外鏈，對於作SEO的人來講，咱們都知道外鏈能帶來不錯的權重提升，就算是別人來抓咱們的內容，假如它沒有改爲本身的服務器地址，那說明這個網站的引用地址仍是咱們的網址，爬蟲會經過這個圖片引用地址反爬回去，但相對路徑引用，由於地址發生變動，所以爬蟲爬回去以後找不到相應的文件，所以爬蟲的工做也即將中止。

3. 提升排名，假如是你一個幹前端的，那麼多少都會遇到某一個本身喜歡的動畫效果，HTML搞下來了，可是不想要直接把css也下下來，所以會在本地直接調用網絡地址。當你預覽這個頁面的時候不當心點到了引入地址，會跳轉到相應的網站css，即便你沒有訪問其主頁，可是你仍是訪問了他的域名，無心之中仍是增長了其訪問量。

固然了，第三點是我本身YY出來的，至因而不是咱們無從考究，但願有過研究的能夠分享一下大家的看法咯。

絕對路徑幾種表現

通常式

剛剛咱們提到了相對來講不論是引用圖片仍是引用css文件，路徑最好是絕對路徑，因此上面的style.css文件的引入地址應該是

<link rel="stylesheet" href="http://xxx.com/test/css/style.css" />

這樣的引入彷佛是正確了的，各類對SEO來講也達到的滿意程度，可是某寶的作法是這麼作

某寶式

淘寶的css還有js的引入是經過他們的CDN分佈式形式，並且後面都帶有?t=20150105，這跟咱們的作法不太一致，後面的20150105應該是這個時間更新的，爲了方便記住版本信息，可是爲何帶「？」問號。因而有Google一番，各路大神對此的解釋能夠解答我心中的疑惑：

1. 標註版本號。 
   方便查看最近修改狀況。能夠是日期。【這是淘寶同樣】

2. 用隨機數防止緩存。 
   若是更改css，爲了不瀏覽器緩存，不會及時更新致使頁面沒有出現相應效果，在使用時帶上一個動態參數，讓瀏覽器從新下載這個css文件。

那就好理解了，帶「？」只是爲了讓瀏覽器把舊版本的css給over掉，重下新的css版本號。這個也好解釋了爲何微信瀏覽已經修改過的css文件，可是樣式尚未調試過來，由於微信調用的仍是老版本的css文件，所以假如各位csser們想要第一時間能預覽到最新修改的樣式，那麼引入的路徑最好是」?=xxx」相似這樣的版本號，以便讓瀏覽器重下咱們已經修改過的css文件。

Facebook式

假如你能FQ，能上Facebook，那麼不妨看看Facebook的css引入又跟咱們國內的不太同樣，如圖： 

這麼一大堆的大小寫英文字母是幹嗎的，爲何又跟咱們國內的不太同樣，問了一下同事，他說是相似哈希加密文件，因而百科一了一下哈希算法，大概解釋以下：

舊譯哈希（誤覺得是人名而採用了音譯）。它也經常使用做一種資訊安全的實做方法，由一串資料中通過散列算法（Hashing algorithms）計算出來的資料指紋（data fingerprint），常常用來識別檔案與資料是否有被竄改，以保證檔案與資料確實是由原創者所提供。

最後一句話解釋很好，就是常常被用來識別是否被篡改。假如說本地和網絡上的這個css文件被篡改了，那麼它會通知瀏覽器重下這個已經被修改css文件，而後清掉以前的css緩存。好了，說到緩存的問題，發現某寶的緩存仍是蠻讚的。

某寶的css刷新先後對比 

只有這數字的css每次F5以後都會加載一次，其餘的css文件都是304，何爲304？簡單地說就是啓用本地緩存機制，假如說這個css是公用的，基本上不會常常改變，那麼不妨能夠用給這個文件設置長的緩存機制，這樣一來該css文件不用每次都向服務器請求一次，不只提升了訪問速度，並且還能夠減小渲染這些文件的流量，應該能夠減小相應的一些寬帶費用。對於更加詳細的解釋，不妨前往百度百科去充電一下→百度百科解釋

按照304代碼的百科，首先先發一條指令到服務器，服務器發現其不改變那就返回304，假如改變，那就要通訊一次，我在想有沒有一種服務器機制，相似淘寶這種global.min.css，基本是一年更新不了幾回，能不能用戶只須要加載一次，後面的不管怎麼刷新都不須要從新加載，不懂這個能不能用JS來實現，問了大拿同事，他說是服務器這邊的問題，不須要JS來控制。

後話

嗦嗦，婆婆媽媽說了一大堆，不過總的仍是沒有改變，

1. 少用相對路徑
2. 多用絕對路徑；
3. webapp最好在引入css後加版本號；
4. 能夠適當增長緩存機制；
5. 那大家怎麼看？

2015.01.13更新：大公司裏怎樣開發和部署前端代碼？好厲害！http://www.zhihu.com/question/20790576