前端性能優化之js,css調用優化

規則1：減少HTTP請求
     把多個JS請求合並為一個JS請求，把多個CSS請求合並為一個CSS請求。從而減少從客戶端向服務器端的請求數。
     規則3：添加Expires頭
     用http請求的查看工具，我這里用的是firebug查看http請求，可以看到響應頭中有Expires頭，unicorn的設置的默認過期時間是30分鍾。即是如果當前網頁未過期，瀏覽器不會發請求，直接查找本地頁面緩存。加速前端響應速度，減少服務器端壓力。
     規則4：壓縮組件
     查看http請求頭參數中，有一項Accept-Encoding:gzip,deflate，響應頭中有一項Content-Encoding：gzip ，這里表示請求的內容采用gzip方式進行壓縮傳輸。減少傳輸文件的大小，加快頁面響應。
     規則5：將樣式表放在頂部
     規則6：將腳本放在底部
     瀏覽器的加載順序基本是按源碼從上到下加載的，把樣式表放在頂部，可以加快頁面樣式的顯示，給客戶更好的體驗。同理，把腳本放在底部，會避免因腳本阻塞頁面內容的呈現。
     因此，最理想的情況是，整個頁面只保留一個JS且放置在 標簽之前，只保留一個CSS且放置在之前。
目前的unicorn設計也是盡力按這個目標來做。CSS已經精簡到1個，位置也基本符合。但是結合網站的實際情況，JS的處理中涉及到一些函數依賴，必須有部分JS放在前端，供后面的JS調用。另外，ae.js這個庫必須提前調用，因此，就會看到當前的searchweb頁標簽內，依然存在2個JS。其他的JS都遵循此規則，合並成一個，且放置在前。
     規則10：精簡JavaScript
     如果你把頁面源碼中的js的URL輸入地址欄中（用FF瀏覽器，IE會彈出下載框），會列出JS的內容，會發現這里的JS文件作了很大的精簡。刪除了多余的空格、空行、注釋等。減少了JS的體積，壓縮原理主要參考開源工具JSMIN。
另外，其實unicorn也做了CSS的壓縮功能，但是因為目前國際站的應用中，CSS的注釋因為涉及到一些兼容性處理的內容，暫時無法做壓縮。這個功能雖然做了，但是默認不開啟。可以在antx.properties中配置是否開啟，對應配置項：alibaba.intl.compressCSS，為true時開啟壓縮，默認此項值為false。
     規則12：移除重復腳本
     unicorn還有一個功能是，對於一次請求中重復引入的JS或CSS，unicorn有去重功能，也就是只會調用一次。
     規則13：配置ETag
     項目設計之初，有在http請求中加入ETag標記，這個標記可以在請求時檢驗服務器端資源是否與客戶端資源相同。如果相同，只返回帶304響應碼的響應頭，不用重新從服務器端發送頁面數據，而直接使用本地緩存。后來在測試過程中，出現頁面偶爾丟失樣式的情況發生，經架構、開發等判斷可能是Etag標記與mod_jk沖突，因此取消了這項功能