引入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