前臺頁面優化全攻略（二）

　在上一篇文章中，咱們討論了一些基本的頁面優化和減肥方案，如今咱們的頁面已經被縮減了30%-50%，若是你尚未閱讀上一篇文章，我建議你完成那些基礎熱身以後再繼續進階的訓練。

　　若是你已經嘗試了基礎的熱身，那咱們就繼續採起一些更極客的解決方案。

　　1. 移除網站中社交網絡的組件

　　看到這個標題請不要驚訝，我並非讓你放棄第三方社交平臺，而是但願你能放棄那些肥胖的官方組件。你的網站中有社交平臺的分享按鈕麼？這些按鈕會爲你的網站增重大概0.5M。咱們知道，這些分享功能都是由JavaScript實現的，有些分享組件的網絡鏈接會強制在加載頁面以前進行。

　　太大的社交組件徹底沒有必要，你徹底能夠添加一個輕量級的社交分享按鈕在你的網頁中，幾行html代碼就能搞定的事爲何要弄的這麼複雜呢？不少人可能都沒有在乎到一個小細節，FaceBook的官方」贊「按鈕就要270KB！如今你應該明白這麼作的必要性了，咱們應該深刻研究如何優化社交組件。

　　若是你以爲一個簡單的按鈕沒法提供數據統計等功能，能夠看一看這篇文章，學習一下若是添加高性能的輕量級社交組件。

　　2. 檢查全部第三方組件的大小

　　社交網絡並非惟一的緣由，其它第三方的組件也大大增大了你網站的大小，這些組件有時候甚至會加載其它網站的內容，這些加載的數據可能高達幾百KB。

　　若是你必需要使用這個組件，那咱們要考慮的就是如何更好的處理和簡化這個組件了。理想狀況下，JavaScript組件應該都是輕量級的，它們在頁面底部被加載，

　　3. 考慮使用懶加載或內容點播

　　假設你的網站是用來顯示視頻供應商提供的視頻。不管用戶是否有意要播放，頁面都會加載視頻API和其它相關的資源。爲何不讓用戶請求以後再加載這些東西呢？

　　你也能夠採用滾動式頁面，在用戶往下拉滾動條時再開始加載新的內容，這樣作雖然可能會對SEO形成影響，可是在特定的狀況下，如照片展現，微博內容展現等都會有不錯的效果。

　　4. 用CSS取代圖片

　　你還在用切片技術建立圖片的圓角邊框等樣式嗎？咱們都知道，CSS能夠生成不少種前臺效果，包括各類樣式的按鈕，背景……雖然他們在不一樣的瀏覽器中可能會有不一樣的展現樣式，但用戶並不會在乎這些，他們不會像你同樣開不少個瀏覽器對比一樣的代碼會有什麼樣的區別。

　　你徹底不用擔憂古代瀏覽器會對CSS樣式形成影響，當你構建一個響應式設計的頁面，你要通配各類大小的屏蔽，這個時候若是你仍是用圖片就會有不少問題，因此CSS是很好的選擇。

　　不過須要注意的是重繪CSS的陰影和梯度代價也是很是大的，特別是你同時在幾十個元素中都添加了這些特性。因此你必須屢次去實踐，對比在你的網站中是用CSS好仍是用圖片好。這些都要因網站具體狀況而定。

　　5. 用CSS效果和動畫取代JavaScript

　　若是在你的JavaScript代碼中處處都是$("#x").fade() 和 $("#y").slideDown()這會對你的網站形成很大的影響。在幾年前咱們必須得這麼作，可是如今不一樣了，咱們能夠選擇用CSS3的animations, transitions 和 transformations取代了JavaScript的效果，緣由以下：

　　1). CSS3 animation是由本地瀏覽器自主繪製的，在沒有錯誤的狀況下，它會比JavaScript效果好，並且快不少。

　　2). CSS3 animation代碼更容易編寫，並且代碼量少。

　　3). 若是JavaScript不使用第三方類庫，3D效果的實現會比CSS3提供3D轉換難不少。

　　6. 使用可縮放矢量圖(SVGs)

　　SVGs 包括點，線和圖形，它們被以矢量的形式被定義在XML中，SVGs是響應式設計中比更理解的解決方案，它們能夠縮放成任意大小並且不會影響到顯示的效果，並且文件大小通常都會小於bitmap。

　　固然，SVGs並非在任何狀況下都適用，若是是相冊或是混合通道的圖片就應該使用JPG或是PNG格式。其餘好比logo，圖表能夠放心選用SVGs。

　　有一些工具能夠直接把bitmaps格式的圖轉成矢量格式，可是多少影響到圖片的效果。這裏推薦Inkscape 和 SVG edit，它們都是很不錯的建立SVGs的工具包。 

　　7. 用圖標字體(icon fonts)代替圖片

　　利用字體工具把咱們平時 Web 上用的圖形圖標（icons）轉換成 web fonts，就成了 icon fonts，它能夠藉助 CSS 的 @font-face 嵌入到網頁裏，用以顯示 icons。由於字體是矢量化圖形，它天生具備「分辨率無關」的特性，在任何分辨率和PPI下面，均可以作到完美縮放，不會像傳統位圖，如：png，jpeg，放大後有鋸齒或模糊現象。

　　因爲圖標字體的靈活性和易用性使得圖標字體使用愈來愈普遍了，咱們常常能夠看到不一樣的UI框架都整合了各類的圖標字體。

　　除了「分辨率無關」這個最大的優勢以外，icon fonts 還具備：

• 文件小：相比圖片幾十幾百KB的容量，icon fonts 幾乎是羽翼級輕量。
• 加載性能好：由於圖標都被打包進一套字體內，http request 減小。這如同咱們經常使用的 css sprites 技術。
• 支持CSS樣式：和普通字體同樣，你能夠利用CSS來定義大小、顏色、陰影、hover狀態、透明度、漸變等等…
• 兼容性好：web fonts 起源很早，別說主流瀏覽器，連IE6/7都能良好支持。除了一些老的移動端瀏覽器，如Android 2.1如下的初代瀏覽器，Opera mini 這類自限型瀏覽器。

　　固然 icon fonts 也有它的不足：

• 樣式單一，沒法針對不一樣分辨率來調整icon 的細節，好比下降大尺寸icon 的線條粗細。
• 顏色單一，CSS 沒法方便的去定義彩色的 icon，卻是有經過疊加組合的方式來達到彩色圖標的目的。
• 移動端瀏覽器兼容性還不夠完善，像Opera mini、Windows phone 7.0-7.8 都不能正常顯示icon fonts。
• 有少許的移動設備有可能會和 icon fonts 的字符編碼衝突，致使icon 顯示不正常（咱們本身風車Android 版本就碰到了這個問題）。

　　因此 icon fonts 也並非一套完美的響應式圖片的解決方案，當它適宜你的應用場景時，好比：

• 你的網站是扁平化或簡約風格，圖標樣式單一，顏色爲純色。
• 你的目標用戶使用桌面瀏覽器爲主，或者，
• 你願意爲非兼容設備作兼容hack。

　　icon fonts 是一個令設計師和前端工程師都心花盛開的方案。

　　icon fonts 的製做主要有兩條思路：

1. 利用字體工具手動製做
2. 利用在線工具自動生成

　　8. 使用sprite來優化圖片資源

　　Sprite」(精靈)這個詞在計算機圖形學中有它獨特的定義，因爲遊戲、視頻等畫質愈來愈高，必須有一種技術能夠智能的處理材質和貼圖，而且要同時保持畫面流暢。「Sprite」就是這樣一種技術，它將許多圖片組合到一個網格上，而後經過程序將每一個網格的內容定位到畫面上。

　　Sprite被定位到一副靜態圖片上，而且經過簡單的程序或硬件便可正肯定位到畫面上，一幅幅圖片就像是被「變」出來的，他們並無單獨佔用內存，因此被取名爲「Sprite精靈」。

　　時間進行到2000年，Web設計向着精緻、巧妙的方向發展。設計師們開始考慮使用非Javascript的方 式製做鼠標滑過、懸停菜單的效果，這時CSS Sprite應運而生，它基於同上文提到的遊戲Sprite一樣的原理，而且使用CSS更容易控制，很快的流行開來。

　　當頁面加載時，不是加載每一個單獨圖片，而是一次加載整個組合圖片。這是一個了不得的改進，它大大減小了HTTP請求的次數，減輕服務器壓力，同時縮短了懸停加載圖片所須要的時間延遲，使效果更流暢，不會停頓。

　　CSS Sprites能夠用在不少場合，大型網站能夠將許多單獨的圖片，以有機的方式組合起來，從而使其便於維護和更新。圖片之間一般會留出較大的空白，使 得圖片不會影響網頁的內容。但同時CSS Sprite大多使用於較固定的像素定位中，它的彈性較差，收到定位等因素的制約。因此，你須要在可維護性vs下降負載之間權衡利弊，選擇最適合你的項目 的方式。

　　在網站圖片的解決方案中，CSS3應該是首選，其次是SVG和icon font,最後纔是Bitmap。常用的Bitmap文件應該打包放在一個單獨的sprite中，這樣一來圖片就能夠在CSS中訪問到了，像這樣：

    .sprite {
    width: 16px;
    height: 16px;
    background: url("sprite.png") 0 0 no-repeat;
    }
    .sprite.help { background-position: 0 -16px; }
    .sprite.info { background-position: 0 -32px; }
    .sprite.user { background-position: 0 -48px; }

　　9. 使用data URIs

　　假設你有一個圖片，把它在網頁上顯示出來的標準方法是：

<img src="http://gbtags.com/images/A.png"/>

　　這種取得資料的方法稱爲 http URI scheme ，一樣的效果使用 data URI scheme 能夠寫成：

    <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAIAAAA
    7ljmRAAAAGElEQVQIW2P4DwcMDAxAfBvMAhEQMYgcACEHG8ELxtbPAAAAAElFTkSuQmCC" />

　　換句話說咱們把圖像檔案的內容內置在 HTML 檔案中，節省了一個 HTTP 請求。

　　data uri的主要優勢是減小了http請求數，調用起來比css sprite更加靈活，缺點是增長了客戶端的資源消耗。

　　在全部瀏覽器的非緩存的模式下， CSS sprite 方式比 data URI 方式快了數百微秒。但事實上 CSS Sprite 比 Data URI 方式多發送了一次鏈接請求，包括 TCP 慢啓動招致全部相關的鏈接開銷。

　　緩存條件下 Android 4.2 和 iOS 6 的 CSS sprite 模式都有大概 2 倍的速度提高，只是 iOS 條件下減小了 220ms 而 Android 減小了 70ms （原生瀏覽器）。相對來講，Chrome 和 Firefox 的狀況平衡得好點，緩存和非緩存狀況下只有 50% 到 60ms 左右的性能差別。

　　在這裏我建議將 data URIs 用於很是小的資源，而且不能在 CSS 和 內聯 HTML 中屢次使用它們。

　　10. 使用網站評估工具

　　檢查是否減肥成功的最好方法就是站到稱上稱一下，一樣，你須要使用網站評估工具評估一下你給網站瘦身的效果。不少開發者工具和免費的在線測試工具都不錯，百度和Google的站長分析工具都很好用。

　　總結

　　你們能夠明顯的發現這篇文章比第一篇不正常多了，更顯極客範兒，相信能把實踐跟到這的站長已經很少了。對於咱們來講，極客的瘦身之道遠不只如此，在下一篇文章中，我會列出更加瘋狂的瘦身技巧。成功的都是堅持到最後的那些人，共勉之~