web性能優化 來自《web全棧工程師的自我修養》

最近在看《web全棧工程師的自我修養》一書，做者是來自騰訊的前端工程師。做者在作招聘前端的時候問應聘者web新能優化有什麼瞭解和經驗，應聘者思索後回答「在發佈項目以前壓縮css和 Javascript源代碼。這樣文件體積就變小了，用戶加載必要資源所花費的時間就更短了」。做者追問還有嗎，應聘者答不上來了。

做者在書中附上的更多的web性能優化經驗。其中我詳細補充了不少

 

• 壓縮源碼和圖片 
  • JavaScript 文件源代碼能夠採用混淆壓縮（）的方式，css文件源代碼進行普通壓縮，jpg圖片能夠根據質量壓縮爲50%到70%，PNG能夠用一些開源軟件來壓縮，好比24色變成8色，去掉一些PNG格式信息等。
  • js代碼混淆壓縮工具  站長工具：http://tool.chinaz.com/js.aspx 
  • png格式,壓縮工具 https://tinypng.com/
  • 騰訊出品的壓縮工具：智圖 http://zhitu.isux.us/  
• 選擇合適的圖片格式
  • 若是圖片顏色比較多就用JPG格式，若是圖片顏色比較多就用JPG格式，較少就用PNG格式，透明的圖片都用PNG格式，若是可以經過服務器判斷瀏覽器支持webP格式，那就用WebP格式和SVG。
  • 其中webP格式是谷歌大力推崇的圖片格式，體積比PNG小45%。關於WebP格式的具體請看https://isux.tencent.com/introduction-of-webp.html
• 合併靜態資源
  • 包括CSS,Javascript和小圖片，減小HTTP請求
  其中小圖片的優化我我知道的有2種，
  • 第一種：使用css精靈圖sprites（也有人稱爲雪碧圖），將小圖標所有放在一張圖片上（可使用這個網站來製做雪碧圖 http://csssprites.com/），經過background-position屬性來偏移圖片。節省了大量的http請求。缺點固然有，須要耐心調整圖片位置。
  • 第二種：使用iconfont字體，圖片以字體的形式展示，註明的bootstrap框架就用到了這個技術。國內比較著名的免費開源iconfont是阿里是Iconfont(http://iconfont.cn/),能夠根據本身的需求選擇不一樣的兼容文件，低至IE6.
• 開啓服務端的Gzip壓縮
  • 對文本資源很是有效，對圖片資源則沒那麼大的壓縮比率。
• 使用CDN
  • 一些公共庫可使用第三方提供的靜態資源地址，（好比jquery,Normalize.css），一方面增長併發下載量，另外一方面可以和其餘網站共享緩存。
  • 免費的cdn網站 http://www.bootcdn.cn/
• 延長靜態資源緩存時間
  • 這樣頻繁訪問網站的訪客就可以更快的訪問，不過這裏要經過修改文件名的方式，確保在資源更新的時候，用戶會拉取到最新的內容。
• 把css放在頁面頭部，把JavaScript 放在頁面底部
  • 這樣就不會阻塞頁面渲染，讓頁面長時間的空白。