如何優化網頁加載速度是每個前端開發工程師需要了解的，也是前端開發工程師需要具備的基本條件。
優化網站加載速度的原理主要是減少網站檔案的大小，減少http請求數。網站檔案越小，浏覽器加載頁面會比較輕松，打開頁面的速度也會提升；一個http請求，對頁面打開速度造成的延時大概是0.01秒，http的請求數越多，網站打開的速度就會越慢。
那麼如何減少網站檔案的大小，減少http請求數呢？筆者做前端(重構方向)有2年多了，這裡分享3項優化網站加載速度的方法，希望能給有需要的同學以及剛接觸前端的初學者帶來幫助~
comm on！一起來優化你的網站~
1、優化圖檔
使用css sprites（适用于大流量的網站）
其原理是把網頁中一些背景圖檔整合到一張圖檔檔案中，再利用css的"background"的進行背景定位。css sprites 最大的好處是減少http請求數，減輕伺服器的壓力，但使用它是需要付出"降低開發效率，增大維護成本的代價"，對流量小的網站帶來的好處并不明顯，使用它取決網站的流量。
示例：合并5張小圖
合并後的代碼
合并後的css sprite圖檔
給圖檔減肥
保證圖檔不失真的前提，适當壓縮是圖檔大小，不僅可以減少使用者等待時間，降低公司帶寬使用，節約成本。
下面的截圖是去年公司的一張輪播廣告圖，每張圖檔大小都超過100k左右，在0.5m低帶寬下，最大一張等待了7秒，僅僅4張輪播廣告圖就等了20秒，這種情況使用者還會繼續等待嗎？
查了原因，了解這些圖檔從設計師給過來後，産品經理直接通過廣告系統釋出上線，并沒有進行壓縮圖檔，導緻了使用者在低網速情況下等待時間過久，無疑會流失很多使用者。
如何壓縮jpg圖檔呢？
這裡以廣告圖為例，通常廣告圖的内容和色彩是比較豐富的jpg圖檔，jpg是有損壓縮格式，壓縮的時候主要注意保證圖檔清晰為前提，把圖像上一些人眼不敏感的細節去掉，來達到減少圖檔大型的效果。使用最常見圖檔處理軟體ps，存儲為web所有格式(快捷鍵是alt+shift+ctrl+s)可壓縮jpg圖檔。
把圖檔品質調整為中，品質在45~60之間，可一定幅度減少jpg圖檔的大小，大家可以試試看。
如何壓縮png圖檔呢？
2.優化html頁面
删除不必要的空白字元和注釋
删除對執行結果無影響的空格、換行、tab和注釋
減少dom元素數量
html頁面中節點數目越多需要下載下傳更多資料，同時也意味着javascript周遊dom的效率越慢，減少不必要的标簽嵌套可提升頁面性能。
使用連接配接式link緩存css和js檔案
使用外部連接配接式link，加載css和js檔案，浏覽器第一次通路頁面後緩存他們，以後調用他們擁有更快的頁面加載速度。
内置在html頁面中的css和js，會在每次請求中随html文檔重新下載下傳，這雖然減少了http請求的次數，卻增加了html文檔的大小。從另一方面來說，如果外部檔案中的css和js被浏覽器緩存，在沒有增加http請求次數的同時可以減少html文檔的大小。
大型網站首頁内置css和js
比較适合使用内置代碼的例外就是大型網站的首頁，首頁在一次打開中擁有較少（可能隻有一次）的浏覽量，采用了減少http請求的方法，把css寫到html檔案裡，而不采用外部調用的方法，也可以防止css沒有加載完畢出現頁面亂的現象，内置css和js對于終端使用者來說會加快響應時間，使用者體驗好。
減少css、js檔案數目
css和js檔案可以合并的最好合并
1.reset.css和common.css是公用的樣式，可合并為global.css
2.index.css和page.css為私有的樣式，可合并為index.css
3.page.js和v4.js為私有腳本，可以合并為index.js
合并後：
這樣一來可以減少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代碼簡寫
簡寫的好處是代碼簡練，提高開發速度，并減少多餘的代碼量
css代碼一行式編碼風格，去掉不需要的空白字元（空格、換行、tab縮進）
一行式的好處是有效減少css檔案的行數和空白符，最終減少檔案的大小
壓縮css，最有效的減少檔案大小(去除注釋、空白字元)
如把css檔案複制成為2份，把其中一份保留原稿，令一份壓縮并添加min字尾，并把壓縮這份用于線上使用
作者：白樹