如何優化網頁加載速度是每個前端開發工程師需要了解的，也是前端開發工程師需要具備的基本條件。
優化網站加載速度的原理主要是減少網站文件的大小，減少HTTP請求數。網站文件越小，瀏覽器加載頁面會比較輕松，打開頁面的速度也會提升；一個HTTP請求，對頁面打開速度造成的延時大概是0.01秒，HTTP的請求數越多，網站打開的速度就會越慢。
那么如何減少網站文件的大小，減少HTTP請求數呢？筆者做前端(重構方向)有2年多了，這里分享3項優化網站加載速度的方法，希望能給有需要的同學以及剛接觸前端的初學者帶來幫助~
comm on！一起來優化你的網站~
1、優化圖片
使用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" />
當瀏覽器知道了高度和寬度參數后，即使圖片暫時無法顯示，頁面上也會騰出圖片的空位，然后繼續加載后面的內容，從而加載時間快了，瀏覽體驗也更好了。
3、優化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縮進）