一張圖片優化5k帶來的帶寬成本及其前端頁面的優化方法 【原】提升網站加載速度的3項黃金守則

上週，我參加了公司的一門課程《網站性能優化》，講師提出了一個問題：一張圖片優化後減小5K，1年內能夠大概省下多少寬帶成本呢？很是好奇，仔細聽完講師分析，計算出來的數據讓小夥伴們都驚呆了，僅僅5K，看起來真的沒什麼，一年內大概節省540元~1440元，這說明一個問題，用戶數龐大的網站中，一點優化可能會帶來巨大的帶寬成本節省，表現出價值是特別高的，不容忽視小小優化帶來的意義。相信不少同窗也好奇這個數據是怎麼計算的，公司的內部數據很差透露，給你們從新舉個例子：

<!-- 
    公司內某個活動的最高峯半小時PV大概佔總PV的3%，某天PV大概去到50萬 高峯期的半小時PV大概就是500000*0.03 = 15000，每秒PV是15000/1800 = 8.3(次每秒)（活動頁面通常只訪問一次，不考慮客戶端緩存的狀況） 一張圖片優化了5K，減小的寬帶就是5*8.3 = 41.6kByte/s Byte是字節數，bit是位數，在計算機中每八位爲一字節，也就是1Byte＝8bit 那麼5K產生的帶寬就是41.6*8/1024 = 0.325Mbit/s 不一樣地區的IDC服務效果不一樣，價錢差別也比較大，每個月100M大概在1萬~2.68萬不等(09年市場帶寬成本價算的，數字不必定精準，但也是有力的數據) 　 5K的圖片所帶來的0.325M帶寬的成本，大概每個月32.5元~87.1元 那麼，一年大概節省390元~1045元 -->

這個例子只是圖片的優化，對於實際工做中，還有不少節省寬帶成本的方法，若是要去算，那這個影響會放大10倍，100倍甚至是1000倍以上的數量級。網站性能的優化是一個一直不容忽視的話題，曾經寫過《提升網站加載速度的3項黃金守則》一文，有興趣能夠了解下，平時多關心本身網站的性能優化，無形地爲公司省錢，老闆不止關心賺錢的事情，省錢的事情老闆也會關注，若是你爲老闆省錢，說不定他一高興就漲你工資了~

今天寫這篇文章不止是想告訴你們小小優化帶來的價值，另外給你們帶來jpg圖片的優化技巧，相信如何優化圖片也是你們特別關心的問題。

實際運營的業務，不少圖片存在被被忽視的優化，近期我在部門網站上下載了4張jpg廣告圖共300K+，這幾張廣告圖上線前已被公司內部的優圖工具壓縮過，而我本身再經過軟件進行二次壓縮，保證圖片質量良好下，優化後能夠減小150K+，壓縮率100%，那麼，是什麼軟件壓縮率這麼好呢？

相信不少同窗會猜測是咱們很是熟悉的photoshop，ps的確是很是優秀的圖像處理軟件，基本上作web開發都會使用它，咱們可使用它壓縮圖片，效果也很是不錯，之前我一直是使用它的存儲爲web格式的功能來壓縮圖片。今天介紹另外一款圖片處理軟件，回顧博文《PNG的使用技巧》， 推薦過你們在移動端使用PNG8 alpha格式，該格式不只文件小，節省流量，並且半透明效果良好，而導出它的軟件正是傳說中fireworks，沒錯，就是它，強大的圖片壓縮軟件，爲 網頁設計而出生的做圖軟件， 是一款建立與優化 Web 圖像和快速構建網站與 Web 界面原型的理想工具，咱們來看實例~

保證圖片質量良好的狀況下，使用firework與photosop分別對jpg圖片的進行，對比它們壓縮率

下圖是上上週上線的一張廣告圖：

1.用photoshop CS6壓縮處理圖片

按存儲爲web全部格式(CTRL+ALT+SHIFT+S)，彈出以下界面，設置以下，優化後的圖片大小爲55.5K，減小了40.8K

2.用firework CS6壓縮處理圖片

 以下界面，在優化面板中選擇：JPEG - 較高質量

使用導出功能來壓縮圖片，優化後的圖片大小爲49.2K，減小了47.1K

通過筆者屢次嘗試使用後，firework對圖片(jpg、png、gif)壓縮處理上比photoshop要優秀（例外：photoshop在png32的壓縮處理稍微好點），關於png的壓縮處理，能夠參考《PNG的使用技巧》。強烈推薦你們使用firework，即使是Adobe公司在CC版本中止了firework，但相比其餘圖片處理軟件，值得確定的是，它的壓縮圖片功能(壓縮圖片的算法)是一流，將來咱們仍是能夠繼續使用。

話說回來，按照文章開頭的計算，該廣告圖使用ps和fw壓縮後可剩下多少錢多少流量呢，相信這也是一個驚人的數據，具體還跟頁面的PV、廣告的上下線時間等有關係。。

【原】提升網站加載速度的3項黃金守則

如何優化網頁加載速度是每一個前端開發工程師須要瞭解的，也是前端開發工程師須要具有的基本條件。

優化網站加載速度的原理主要是減小網站文件的大小，減小HTTP請求數。網站文件越小，瀏覽器加載頁面會比較輕鬆，打開頁面的速度也會提高；一個HTTP請求，對頁面打開速度形成的延時大概是0.01秒，HTTP的請求數越多，網站打開的速度就會越慢。

那麼如何減小網站文件的大小，減小HTTP請求數呢？筆者作前端(重構方向)有2年多了，這裏分享3項優化網站加載速度的方法，但願能給有須要的同窗以及剛接觸前端的初學者帶來幫助~

comm on！一塊兒來優化你的網站~

一、優化圖片

使用Css Sprites（適用於大流量的網站）

其原理是把網頁中一些背景圖片整合到一張圖片文件中，再利用CSS的"background"的進行背景定位。Css Sprites 最大的好處是減小http請求數，減輕服務器的壓力，但使用它是須要付出"下降開發效率，增大維護成本的代價"，對流量小的網站帶來的好處並不明顯，使用 它取決網站的流量。

圖片合成的工具如：Photoshop，輸出樣式的工具如：LinrPStoolkit-5、騰訊鬼哥的Css Sprites 樣式生成工具；這樣作的好處是儘量減小圖片數，將HTTP請求減小到最低，減輕服務器的壓力。

示例：合併5張小圖

合併後的代碼

.ico-1,.ico-2,.ico-3,.ico-4,.ico-5
{
display:inline-block;
background: url(img/ico.png) no-repeat;
overflow:hidden;
}
.ico-1{width:106px;height:104px;background-position:0 0;}
.ico-2{width:44px;height:104px;background-position:-107px 0;}
.ico-3{width:25px;height:104px;background-position:-152px 0;}
.ico-4{width:44px;height:52px;background-position:-178px 0;}
.ico-5{width:44px;height:51px;background-position:-178px -53px;}

合併後的Css sprite圖片

給圖片減肥
保證圖片不失真的前提，適當壓縮是圖片大小，不只能夠減小用戶等待時間，下降公司帶寬使用，節約成本。

下面的截圖是去年公司的一張輪播廣告圖，每張圖片大小都超過100K左右，在0.5M低帶寬下，最大一張等待了7秒，僅僅4張輪播廣告圖就等了20秒，這種狀況用戶還會繼續等待嗎？

查了緣由，瞭解這些圖片從設計師給過來後，產品經理直接經過廣告系統發佈上線，並無進行壓縮圖片，致使了用戶在低網速狀況下等待時間太久，無疑會流失不少用戶。

如何壓縮jpg圖片呢？

這裏以廣告圖爲例，一般廣告圖的內容和色彩是比較豐富的jpg圖片，jpg是有損壓縮格式，壓縮的時候主要注意保證圖片清晰爲前提，把圖像上一些人眼不敏感的細節去掉，來達到減小圖片大型的效果。使用最多見圖片處理軟件PS，存儲爲web全部格式(快捷鍵是alt+shift+ctrl+s)可壓縮jpg圖片。

把圖片質量調整爲中，品質在45~60之間，可必定幅度減小jpg圖片的大小，你們能夠試試看。

如何壓縮png圖片呢？

一淘UX的一絲冰涼，有篇png的祕密，寫得很是好，對png圖片解釋的很是詳細，文章最後有png的各類壓縮工具，這邊我搬過來了，以下：

推薦壓縮工具 PngOptimizer （http://psydk.org/PngOptimizer)
推薦壓縮工具 Pngout (http://advsys.net/ken/utils.htm)
推薦壓縮工具 雅虎: Smush.it（http://www.smushit.com/ysmush.it/）

2.優化HTML頁面

刪除沒必要要的空白字符和註釋

刪除對執行結果無影響的空格、換行、tab和註釋

減小DOM元素數量

HTML頁面中節點數目越多須要下載更多數據，同時也意味着JavaScript遍歷DOM的效率越慢，減小沒必要要的標籤嵌套可提高頁面性能。

使用鏈接式link緩存CSS和JS文件

使用外部鏈接式link，加載CSS和JS文件，瀏覽器第一次訪問頁面後緩存他們，之後調用他們擁有更快的頁面加載速度。
內置在HTML頁面中的CSS和JS，會在每次請求中隨HTML文檔從新下載，這雖然減小了HTTP請求的次數，卻增長了HTML文檔的大小。從另外一方面來講，若是外部文件中的CSS和JS被瀏覽器緩存，在沒有增長HTTP請求次數的同時能夠減小HTML文檔的大小。

<link href="global.css?v=20130219" rel="stylesheet" type="text/css" />

大型網站主頁內置CSS和JS

比較適合使用內置代碼的例外就是大型網站的主頁，主頁在一次打開中擁有較少（可能只有一次）的瀏覽量，採用了減小HTTP請求的方法，把CSS寫到HTML文件裏，而不採用外部調用的方法，也能夠防止css沒有加載完畢出現頁面亂的現象，內置CSS和JS對於終端用戶來講會加快響應時間，用戶體驗好。 

<style type="text/css">
......
</style>

<script type="text/javascript">
......
</script>

減小css、js文件數目

CSS和JS文件能夠合併的最好合並

例如
<link rel="stylesheet" type="text/css" href="reset.css" />
<link rel="stylesheet" type="text/css" href="common.css" />
<link rel="stylesheet" type="text/css" href="index.css" />
<link rel="stylesheet" type="text/css" href="page.css" />
<script type="text/javascript" src="page.js"></script>
<script type="text/javascript" src="v4.js"></script>

1.reset.css和common.css是公用的樣式，可合併爲global.css

2.index.css和page.css爲私有的樣式，可合併爲index.css

3.page.js和v4.js爲私有腳本，能夠合併爲index.js

合併後：

<link rel="stylesheet" type="text/css" href="global.css" />
<link rel="stylesheet" type="text/css" href="index.css" />
<script  type="text/javascript" src="index.js"></script>

這樣一來能夠減小3個http請求

css放頁頭head標籤中，js文件放頁面底部

用戶沒有太多的耐心等待頁面加載，咱們可利用網頁先展示給用戶，後加載功能原則

1.優先加載css：

瀏覽器渲染HTML的順序是從上到下，下載和渲染是同時進行的，在載入HTML元素以前，先加載css，能夠避免HTML出現無樣式狀態，先將網頁展示給用戶

2.最後加載js：

若是js文件放到頁面頂部，瀏覽器加載網頁，加載js時，尚未加載HTML代碼，網頁顯示爲空白，腳本阻塞了HTML的加載，也可能會出現js捕捉不到操做的節點，就會報錯

網址後加反斜槓

有些網址，好比"https://www.tenpay.com/v2/mapp"，當服務器收到這樣一個地址請求的時候，它須要花費時間去肯定這個地址 的文件類型。在網址後多加一個斜槓，讓其變成"https://www.tenpay.com/v2/mapp/"，這樣服務器就能一目瞭然地知道要訪問 該目錄下的index文件，從而節省了加載時間。

img、table、iframe標籤標明高度和寬度

例如網頁上添加圖片時，標明它們的高度和寬度，也就是height和width參數。若是瀏覽器沒有找到這兩個參數，它須要一邊下載圖片一邊計算大小，若是圖片不少，瀏覽器須要不斷地調整頁面。這不但影響速度，也影響瀏覽體驗。
下面是一個比較友好的圖片代碼：
<img width="120" height="40" src="logo.gif" alt="logo" />
當瀏覽器知道了高度和寬度參數後，即便圖片暫時沒法顯示，頁面上也會騰出圖片的空位，而後繼續加載後面的內容，從而加載時間快了，瀏覽體驗也更好了。

三、優化CSS文件

不要在ID或者class選擇器前使用標籤名
通常寫法：span.ico-peun
更好寫法：.ico-peun
儘可能少使用層級關係，使用長命名
通常寫法：.main .line span.txt{...}
更好寫法：.main-line-txt{...}

爲何要這樣寫呢？瀏覽器CSS匹配不是從左到右進行查找，而是從右到左進行查找。 好比.main .line .txt{...}，瀏覽器的查找順序以下：先查找html中全部class='txt'的span元素，找到後，再查找其父輩元素中是否有 class="line"的元素，再判斷.line的父元素中是否有class="main"元素，若是都存在則匹配上。 瀏覽器從右到左進行查找的好處是爲了儘早過濾掉一些無關的樣式規則和元素。

長命名的寫法有2個好處：一來能夠減小代碼量，二來能夠提升選擇器解析css代碼的速度。

使用class代替層級關係
通常寫法：.main ul li a{display:block;}
更好寫法：.block{display:block;}

CSS代碼簡寫

簡寫的好處是代碼簡練，提升開發速度，並減小多餘的代碼量

.test{
      margin-top: 10px;
      margin-right: 20px;
      margin-bottom: 10px;
      margin-left: 20px;
}
簡化爲：
.test{margin: 10px 20px 10px 20px;}

CSS代碼一行式編碼風格，去掉不須要的空白字符（空格、換行、tab縮進）

一行式的好處是有效減小css文件的行數和空白符，最終減小文件的大小

.test{
      width:50px;
      height:100px;
      color:#000000;
}
簡化爲：
.test{width:50px;height:100px;color:#000000;}

壓縮css，最有效的減小文件大小(去除註釋、空白字符)

如把css文件複製成爲2份，把其中一份保留原稿，令一份壓縮並添加min後綴，並把壓縮這份用於線上使用

常見壓縮工具：YUICompressor，淘寶封裝的css和js壓縮工具TBCompressor，站長工具等，都適合css和js文件的壓縮，去掉不須要的空白字符（空格、換行、tab縮進）