項目經過第一波優化之后APP端已基本已經符合我們的要求了，但是TV端還是反應比較慢，頁面加載和渲染都比較慢了一點，我覺的還是有必要在進行一些優化，經過前面的優化，我們的優化空間已經小了一部分，不過還是有一部分可以進行優化。本文主要描述一些細節方面的優化，不足之處歡迎批評指正。
在fis上我發現我們還可以把小的圖標合並為大的圖片，可以叫做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年的前端性能優化就到這就結束了，但我的代碼之路永遠不會到這就結束，與諸君共勉。
以下前端性能調優系列文章列表，感興趣的朋友也可以看看：