前端通過css庫緩存配置
⑴ js 前端過濾器 實現圖片緩存與版本控制更新的功能
兄台多慮了，以我個人見解，這個功能應該是前端js搞不定，你js什麼時候載入就是個問題，第二個問題就是js也檢測不到網路請求，那是瀏覽器乾的事。
但是針對緩存這事，一個是在服務端設置，也就少web服務或者少CDN那設置緩存。很多情況下，圖片，css都是默認緩存的，你打開開發者工具之後確保禁用緩存的復選框取消，你刷新一下，看看那圖片、css是不是就是304狀態。
⑵ css樣式載入慢，怎麼解決。求大神幫忙！
提高網站頁面的載入速度的方法其實有很多，那本文主要從下面四個角度進行討論，分享常用的提高網頁載入速度的技巧：
一、網頁壓縮技術
對於網頁壓縮而言，相信各位站長都比較熟悉，主要是啟用伺服器Gzip，對頁面Gzip壓縮，減少元素的體積，從而減少數據的傳輸，進而提高網頁的載入速度。
二、Css優化
（1）css位置
CSS說明如果出現在<body>後，頁面需要重新渲染，打開速度受到影響。所有css定義代碼的位置要放到網站<body>之前。
（2）css sprite技術
網站上的一些圖片可以採用css sprite技術進行合並，減少載入請求次數，從而提高網頁的載入速度。
（3）css代碼優化
通過對css代碼屬性的簡寫、移除多餘的結構(frameworks)和重設(resets)等一系列的方法和技巧來簡化css代碼，減小css文件的大小。
三、JS優化
（1）JS位置
網頁代碼中對js進行優化的時候，建議將JS放在頁面最後，這樣可以加快頁面打開速度。
（2）合並JS
合並相同域名下的js，通過減少網路連接次數從而提高網頁的打開速度。
（3）LazyLoad(延遲載入)技術
Lazy Load是一個用JavaScript 編寫的 jQuery 插件，它可以延遲載入長頁面中的圖片。在瀏覽器可視區域外的圖片不會被載入，直到用戶將頁面滾動到它們所在的位置。
四、緩存靜態資源
通過設置瀏覽器緩存，將css、js等不太經常更新的文件緩存在瀏覽器端，這樣同一訪客再次訪問你的網站的時候，瀏覽器就可以從瀏覽器的緩存中獲取css、js等，而不必每次都從伺服器讀取，這樣在一定程度上加快了網站的打開速度，又可以節約伺服器流量。
⑶ 如何防止js和css緩存
解決辦法一：每次修改js或css文件後，都要手工修改那個版本號，注意：是每修改一次（哪怕僅僅是改了一個字元）都要修改版本號；
解決辦法二：如果嫌手工修改太麻煩，那可以通過程序來自動修改（用隨機數做版本號）。如果你的網站是動態的，那可以通過後台程序來改，比如ASP的：
<link rel="stylesheet" href="static/mimi/css/main.css?v=<%=rnd()%>" type="text/css"/>
php的：
<link rel="stylesheet" href="static/mimi/css/main.css?v=<?php echo mt_rand(); ?>" type="text/css"/>
如果是靜態網站那就要js腳本來實現了，這個稍微麻煩點，這里就不說了。
其實上述方法一和方法二的目的都是為了使每次打開的js或css的url不同，這樣瀏覽器就不會去緩存區取數據，而是直接到網站下載。
如果上述方法仍然無效，那就是你的瀏覽器的緩存機制存在問題，比如「從不檢查網頁的新版本，除非手動刷新」，這個就要你自己去設置了。
⑷ 如何對前端性能進行優化
前端開發代碼優化、可維護性、瀏覽器兼容性是非常重要的課題。從實際的工程應用角度出發，最常遇見的前端優化問題。前端性能進行優化規則，基本可以涵蓋現在前端大部分的性能優化原則了，很多更加geek和精細優化方法都是從這些原則裡面延伸出來的。
前端性能進行優化都有哪些規則
減少HTTP請求次數
盡量合並圖片、CSS、JS。比如載入一個頁面有5個css文件的話，把這個5個文件合成一個的話，就只需要發出一次http請求，節省網路請求時間，加快頁面的載入。
2. 使用CDN
網站上靜態資源即css、js全都使用cdn分發，包括圖片
3. 避免空的src和href
當link標簽的href屬性為空、script標簽的src屬性為空的時候，瀏覽器渲染的時候會把當前頁面的URL作為它們的屬性值，從而把頁面的內容載入進來作為它們的值。所以要避免犯這樣的疏忽。
4. 為文件頭指定Expires
Exipres是用來設置文件的過期時間的，一般對css、js、圖片資源有效。 他可以使內容具有緩存性，這樣下回再訪問同樣的資源時就通過瀏覽器緩存區讀取，不需要再發出http請求。如下例子：
新浪微博的這個css文件的Expires時間是2016-5-04 09:14:14.
5. 使用gzip壓縮內容
gzip能夠壓縮任何一個文本類型的響應，包括html，xml，json。大大縮小請求返回的數據量。
6. 把CSS放到頂部
網頁上的資源載入時從上網下順序載入的，所以css放在頁面的頂部能夠優先渲染頁面，讓用戶感覺頁面載入很快。
7. 把JS放到底部
載入js時會對後續的資源造成阻塞，必須得等js載入完才去載入後續的文件 ，所以就把js放在頁面底部最後載入。
8. 避免使用CSS表達式
舉個css表達式的例子
font-color: expression( (new Date()).getHours()%3 ? 「#FFFFFF" : 「#AAAAAA" );
這個表達式會持續的在頁面上計算樣式，影響頁面的性能。並且css表達式只被IE支持。
9. 將CSS和JS放到外部文件中
目的是緩存文件，可以參考原則4。 但有時候為了減少請求，也會直接寫到頁面里，需根據PV和IP的比例權衡。
10. 權衡DNS查找次數
減少主機名可以節省響應時間。但同時，需要注意，減少主機會減少頁面中並行下載的數量。
IE瀏覽器在同一時刻只能從同一域名下載兩個文件。當在一個頁面顯示多張圖片時，IE 用戶的圖片下載速度就會受到影響。所以新浪會搞N個二級域名來放圖片。
下面是新浪微博的圖片域名，我們可以看到他有多個域名，這樣可以保證這些不同域名能夠同時去下載圖片，而不用排隊。不過如果當使用的域名過多時，響應時間就會慢，因為不用響應域名時間不一致。
11. 精簡CSS和JS
這里就涉及到css和js的壓縮了。比如下面的新浪的一個css文件，把空格回車全部去掉，減少文件的大小。現在的壓縮工具有很多，基本主流的前端構建工具都能進行css和js文件的壓縮，如grunt，glup等。
12. 避免跳轉
有種現象會比較坑爹，看起來沒什麼差別，其實多次了一次頁面跳轉。比如當URL本該有斜杠（/）卻被忽略掉時。例如，當我們要訪問http:// .com時，實際上返回的是一個包含301代碼的跳轉，它指向的是http:// .com/（注意末尾的斜杠）。在nginx伺服器可以使用rewrite；Apache伺服器中可以使用Alias 或者 mod_rewrite或者the DirectorySlash來避免。
另一種是不用域名之間的跳轉， 比如訪問http:// .com/bbs跳轉到http:// bbs..com/。那麼可以通過使用Alias或者mod_rewirte建立CNAME（保存一個域名和另外一個域名之間關系的DNS記錄）來替代。
13. 刪除重復的JS和CSS
重復調用腳本，除了增加額外的HTTP請求外，多次運算也會浪費時間。在IE和Firefox中不管腳本是否可緩存，它們都存在重復運算JavaScript的問題。
14. 配置ETags
它用來判斷瀏覽器緩存里的元素是否和原來伺服器上的一致。比last-modified date更具有彈性，例如某個文件在1秒內修改了10次，Etag可以綜合Inode(文件的索引節點(inode)數)，MTime(修改時間)和Size來精準的進行判斷，避開UNIX記錄MTime只能精確到秒的問題。 伺服器集群使用，可取後兩個參數。使用ETags減少Web應用帶寬和負載
15. 可緩存的AJAX
非同步請求同樣的造成用戶等待，所以使用ajax請求時，要主動告訴瀏覽器如果該請求有緩存就去請求緩存內容。如下代碼片段, cache:true就是顯式的要求如果當前請求有緩存的話，直接使用緩存
$.ajax({ url : 'url', dataType : "json", cache: true, success : function(son, status){ }
16. 使用GET來完成AJAX請求
當使用XMLHttpRequest時，瀏覽器中的POST方法是一個「兩步走」的過程：首先發送文件頭，然後才發送數據。因此使用GET獲取數據時更加有意義。
17. 減少DOM元素數量
這是一門大學問，這里可以引申出一堆優化的細節。想要具體研究的可以看後面推薦書籍。總之大原則減少DOM數量，就會減少瀏覽器的解析負擔。
18. 避免404
比如外鏈的css、js文件出現問題返回404時，會破壞瀏覽器的並行載入。
19. 減少Cookie的大小
Cookie裡面別塞那麼多東西，因為每個請求都得帶著他跑。
20. 使用無cookie的域
比如CSS、js、圖片等，客戶端請求靜態文件的時候，減少了 Cookie 的反復傳輸對主域名的影響。
21. 不要使用濾鏡
IE獨有屬性AlphaImageLoader用於修正7.0以下版本中顯示PNG圖片的半透明效果。這個濾鏡的問題在於瀏覽器載入圖片時它會終止內容的呈現並且凍結瀏覽器。在每一個元素（不僅僅是圖片）它都會運算一次，增加了內存開支，因此它的問題是多方面的。
完全避免使用AlphaImageLoader的最好方法就是使用PNG8格式來代替，這種格式能在IE中很好地工作。如果你確實需要使用AlphaImageLoader，請使用下劃線_filter又使之對IE7以上版本的用戶無效。
22. 不要在HTML中縮放圖片
比如你需要的圖片尺寸是50* 50
那就不用用一張500*500的大尺寸圖片，影響載入
23. 縮小favicon.ico並緩存
⑸ 前端http請求細節——Cache-Control（緩存機制）
請求和響應中的 Cache-Control 指令並不完全相同，具體可以查看 這里 ，包括指令的具體意思，這里不過多贅述。（默認值：private）
瀏覽器的緩存機制是根據 HTTP 報文的緩存標識進行的，瀏覽器第一次向伺服器發起該請求後拿到請求結果，會根據響應報文中 HTTP 頭的緩存標識，決定是否緩存結果。
瀏覽器緩存策略分為兩種：強制緩存和協商緩存。
強制緩存不會向伺服器發送請求，直接從緩存中讀取資源，可以看到請求返回的狀態碼都是200，並且 Size 代表該緩存的位置。
瀏覽器讀取緩存的順序為memory –> disk。
三級緩存原理 (訪問緩存優先順序)：
在瀏覽器中，瀏覽器會在js，字體，圖片等文件解析執行後直接存入內存緩存中，那麼當刷新頁面時只需直接從內存緩存中讀取(from memory cache)；而css文件則會存入硬碟文件中，所以每次渲染頁面都需要從硬碟讀取緩存(from disk cache)。
為什麼CSS會放在硬碟緩存中？
因為CSS文件載入一次就可渲染出來,我們不會頻繁讀取它,所以它不適合緩存到內存中,但是js之類的腳本卻隨時可能會執行,如果腳本在磁碟當中,我們在執行腳本的時候需要從磁碟取到內存中來,這樣IO開銷就很大了,有可能導致瀏覽器失去響應。
若伺服器的資源最後被修改時間 > If-Modified-Since的欄位值
則重新返回資源，狀態碼為200；否則則返回304，代表資源無更新，可繼續使用緩存文件
If-None-Match 的欄位值 = 該資源在伺服器的Etag值
一致則返回304，代表資源無更新，繼續使用緩存文件；不一致則重新返回資源文件，狀態碼為200。
ETag 和 Last-Modified 區別
參考鏈接：
https://juejin.im/entry/5ad86c16f265da505a77dca4
https://www.cnblogs.com/suihang/p/12855345.html
https://www.jianshu.com/p/54cc04190252
⑹ 如何高效部署前端代碼，如css，js
1.利用瀏覽器的304緩存，但是304叫協商緩存，還是需要與伺服器通信一次
2.強制使用瀏覽器使用本地緩存（cache-control/expires），但是問題來了，不讓瀏覽器發資源請求，資源怎麼更新。
3.使用版本號，類似於a.css?v=1.0，b.css?v=1.0，做了更改的時候都變成a.css?v=2.0，b.css?v=2.0，有時候a.css改變了，b.css沒有改變，不是多此一舉嗎？
4.使用數據摘要演算法，類似於a.css?v=0abc23，b.css?v=65ao1j，如果a.css做了更改的話，a.css=v=1asd2j，b.css還是b.css?v=65ao1j。
5.很多企業，現在都靜態文件cdn部署了，類似於http://static.cdn.com/css/a.css?v=0abc23，與頁面分開部署了，
a.如果先部署頁面，再部署資源：在二者部署的時間間隔內，如果有用戶訪問頁面，就會在新的頁面結構中載入舊的資源，並且把這個舊版本的資源當做新版本緩存起來，其結果就是：用戶訪問到了一個樣式錯亂的頁面，除非手動刷新，否則在資源緩存過期之前，頁面會一直執行錯誤。
b.如果先部署資源，再部署頁面：
在部署時間間隔之內，有舊版本資源本地緩存的用戶訪問網站，由於請求的頁面是舊版本的，資源引用沒有改變，瀏覽器將直接使用本地緩存，這種情況下頁面展現正常；但沒有本地緩存或者緩存過期的用戶訪問網站，就會出現舊版本頁面載入新版本資源的情況，導致頁面執行錯誤，但當頁面完成部署，這部分用戶再次訪問頁面又會恢復正常了。
解決方法：改變命名方式，改成a_0abc23.css，上線的時候先部署靜態資源，再部署頁面。
⑺ 前端之CSS篇
px像素。絕對單位，像素px是相對於顯示器屏幕解析度而言的，是一個虛擬單位。是計算機系統的數字化圖像長度單位，如果px要換算成物理長度，需要指定精度DPI。
2、em是相對長度單位，相對於當前對象內文本的字體尺寸。如當前對行內文本的字體尺寸未被人為設置，則相對瀏覽器的默認字體尺寸。它會繼承父級元素的字體大小，因此並不是一個固定的值。
rem是CSS3新增的一個相對單位(root em,根em),使用rem為元素設定字體大小事，仍然是相對大小但相對的只是HTML根元素。
4、區別：IE無法調用那些使用px作為單位的字體大小，而em和rem可以縮放，rem相對的只是HTML根元素。這個單位可謂集相對大小和絕對大小的優點於一身，通過它既可以做到只修改根元素就成比例地調整所有字體大小，又可以避免字體大小逐層復合的連鎖反應。目前，除了IE8及更早版本外，所有瀏覽器已支持rem。
1.定位
2.尺寸
3.浮動
4.最初的布局——table
5.兩欄布局（浮動和定位）
6.三欄布局（flex，聖杯和雙飛翼： https://www.jianshu.com/p/f9bcddb0e8b4 ）
7.移動端的布局（媒體查詢，flex彈性盒子（ https://github.com/laizimo/zimo-article/issues/13 ），rem適配（ http://www.cnblogs.com/lyzg/p/4877277.html ））
8.grid布局
摘自： https://segmentfault.com/a/1190000011358507
1.flex方式（適用於居中元素元素寬高未知），但是這種方式僅限於body裡面只有一個子元素，如果body裡面有多個div不行
2.絕對定位和負邊距（適用於居中元素的寬高是固定的）
3.CSS3的transform屬性（適用於居中元素元素寬高未知）
4.margin:auto
1.transform
transform屬性是靜態屬性。它其實只是一個靜態屬性，需要配合transition和animation才能展現出動畫效果。你可以把它看成是跟left、top等屬性一樣，只是一個靜態樣式而已。它可以讓元素偏移、伸縮、變形、旋轉等。
2.transition,它屬性是一個簡單的動畫屬性，非常簡單非常容易用。可以說它是animation的簡化版本，是給普通做簡單網頁特效用的。
3.Animation
https://www.jianshu.com/p/f9bcddb0e8b4
⑻ 前端程序員必須了解的幾個CSS使用技巧
1、元素的margin的top、bottom及padding的top、bottom使用百分比作為單位時，其是相對父元素的寬度width的而不是我們想像的高度height;其實出現這種現象，我們可以巧用margin/padding的百分比值實現高度自適應。當然該元素高度上的百分比是相對其父元素高度的百分比的，min-height及max-height也適用這條規律。
2、含有定位屬性的元素，其top、bottom單位為百分比時，該百分比是相對於父元素的高度的。同理，left、right則是相對於父元素的寬度的。
3、邊框寬度不允許使用百分比值。這點就不解釋了。
4、width：100%，當父容器里有絕對定位的子元素時，子元素設置width:100%實際上指的是相對於父容器的padding+content的寬度。當子元素是非絕對定位的元素時width:100%才是指子元素的 content ，其等於父元素的 content寬度。
5、line-height。你知道line-height:150%和line-height:1.5的區別嗎? line-height有單位時，子元素是繼承父元素的line-height的，無單位時，其line-height等於無單位的數值乘以子元素本身的字體大小。顯然為了不出現意外，還是建議首選無單位的。
6、ex和 ch單位。ex：取當前作用效果的字體的x的高度，在無法確定x高度的情況下以0.5em計算;ch:以節點所使用字體中的“0”字元為基準，找不到時為0.5em。
ex和 ch單位，類似於 em和 rem,依賴於當前的字體和字體大小。但是，不同的是，這兩貨是基於字體的度量單位，依賴於設定的字體。7、使用calc時運算符之間要有空格 ，否則可能無效。
以上這7個知識點你們掌握了嗎?更多的內容資訊，小編會及時發布在本平台，請及時關注哦!
⑼ 前端怎麼解決js css 緩存問題
將路徑 變成活的或者加隨機數
例如：
link href="/css/styles.css?v=隨機數" type="text/css"
link href="日期/css/styles.css?v=1234" type="text/css"
⑽ html 頁面怎麼對緩存進行設置
根據伺服器系統環節的不同設置方法不一樣
1、在Apache環境下
可以通過在.htaccess文件中添加下面的代碼，設置圖片的HTTP緩存和有效期（需要開啟apache的headers模塊支持）：
#.gimhoy.com<FilesMatch".(flv|gif|jpg|jpeg|png|ico|swf)$">HeadersetCache-Control"max-age=3156000"
其中max-age後面這個數字就是設置的緩存有效期（以秒為單位），比如上面的代碼設置了網站的圖片使用為期一年（3156000秒）的HTTP緩存。
2、在Nginx下
可以通過修改nginx.conf配置文件，來修改緩存設置：
location ~* .(flv|gif|jpg|jpeg|png|ico|swf)$ { expires 1y; access_log off; break; }
注意：同樣的方法，可以給js和css文件設置緩存。