web前端性能調優（二）

　　項目通過第一波優化以後APP端已基本已經符合咱們的要求了，可是TV端仍是反應比較慢，頁面加載和渲染都比較慢了一點，我覺的仍是有必要在進行一些優化，通過前面的優化，咱們的優化空間已經小了一部分，不過仍是有一部分能夠進行優化。本文主要描述一些細節方面的優化，不足之處歡迎批評指正。

CSSSprites

　　在fis上我發現咱們還能夠把小的圖標合併爲大的圖片，能夠叫作CSSSprites，它容許你將一個頁面涉及到的全部零星圖片都包含到一張大圖中去，這樣一來，當訪問該頁面時，載入的圖片就不會像之前那樣一幅一幅地慢慢顯示出來了。

 

CSSSprites

適度嵌入圖片的base64

　　分析發現請求在咱們的頁面仍是比較多的，在頁面中我還發現咱們有許多的小的圖片，如背景圖和logo等等，都在佔用咱們的請求，能不能有辦法清除一些請求呢，在把這些小請求在減小一下，咱們的頁面能不能獲得更好的優化，值得一試呢。在fis中要使圖片變成base64很是的簡單，只須要在連接上加上--?，看清楚是2個下劃線呢，我當時就是一個下劃線總是沒有用，被坑了。還來個現實代碼看看吧。固然這個也能夠藉助第三方的工具，具體就本身去搜索了。

嵌入圖片的base64

超級簡單，效果怎麼樣呢？仍是不錯的呢

嵌入圖片的base64效果

　　原本還想拿沒有替換base64的效果對比一下，不過看了一下以後覺的沒有必要了。確定是優化了，其餘請求即便是從緩存出來也要10幾秒，這個只要幾秒就能夠了。

　　爲啥這個小標題要寫適度的嵌入圖片的base64呢，由於我天真的覺得所有圖片變成base64性能就要爆炸了，發現我太天真了，把所有圖片變成爲成base64,僅僅css文件就變成2M，僅加載css就要2秒了，徹底沒有達到想要的效果，因此說只能說適度的應用。在咱們的項目中20k的圖片咱們都使用這種方式，最後我順便把favicon.ico加入到項目中了。

　　簡單陳述一下我對什麼時候這使用這兩種優化方法

使用CssSprites合併爲一張大圖：（來自百度）

　　①　頁面具備多種風格，須要換膚功能，可以使用CssSprites

　　②　網站已經趨於完美，不會再三天兩頭的改動（例如button大小、顏色等）

　　③　使用時無需重複圖形內容

　　④　沒有base64編碼成本，下降圖片更新的維護難度。（但注意Sprites同時修改css和圖片某些時候可能形成負擔）

使用base64直接把圖片編碼成字符串寫入CSS文件：

　　①　無額外請求

　　②　對於極小或者極簡單圖片

　　③　能夠被gzip。（經過gzip對base64數據的壓縮能力一般和圖片文件差很少或者更強）

　　④　下降css維護難度

　　⑤　可像單獨圖片同樣使用，好比背景圖片重複使用等

　　⑥　沒有跨域問題，無需考慮緩存、文件頭或者cookies問題 

YSlow插件的應用

　　優化完是否是想知道效果呢？是否是想強行秀一波呢，是的。至少知道本身的付出是有收穫的，哦，我不知道怎麼秀，那怎麼辦？推薦一個性能測試插件YSlow，YSlow是Yahoo發佈的一款基於FireFox的插件，咱們就用這款插件給你秀一波。

YSlow有什麼用？（來自百度）

　　①　YSlow能夠對網站的頁面進行分析，並告訴你爲了提升網站性能，如何基於某些規則而進行優化。

　　②　YSlow能夠分析任何網站，併爲每個規則產生一個總體報告，若是頁面能夠進行優化，則YSlow會列出具體的修改意見。

安裝插件

　　安裝YSlow必須首先先安裝 Firebug，而後下載YSlow，再對其安裝。

　　Chrome也能夠，我就是在使用chrome安裝還比較簡單，直接訪問http://yslow.org/就能夠了，什麼？你不能訪問？那隻能祝福了(能夠聯繫本人)！

 

安裝完的效果

插件使用

　　插件使用比較簡單，只須要在你想測試頁面點擊那個圖標就彈出插件界面了。

 

插件界面

　　你想測試那個頁面就點擊run test 就能夠了。咱們先拿百度來開個刀試一試咱們的插件是否是真的可以反應網頁效果。

百度測試

　　分數達到92分，仍是能夠的呢。插件的左邊的是顯示優化的條件以及分數，右邊是相關的說明和建議。仍是比較簡單明瞭的，多的小弟也不明白了，只能幫你到這了，哈哈。

秀一波本身優化的，發現效果是還不錯呢，好像分數比百度高呢，不要在乎這些細節。哈哈

 首頁優化效果

　　總結一下，插件整體仍是不錯的，利用雅虎軍規來檢測頁面，不過數據也不是絕對的，只能作爲參考。並且能夠提供一些建議，方便優化。不過雖然我的感受已經優化已經很好了，機頂盒的性能仍是一個瓶頸，仍是得向簡單、簡潔的方向去開發，稍微複雜一點的頁面在電腦上都可以接受，一到機頂盒效果就變差。不過這些都是環境因素，不該該過多影響咱們我的，覺的每一個人都應該積極的向寫出性能優良的代碼努力。個人2016年的前端性能優化就到這就結束了，但個人代碼之路永遠不會到這就結束，與諸君共勉。

 如下前端性能調優系列文章列表，感興趣的朋友也能夠看看：

web前端性能調優(一)