在同樣的網絡環境下，兩個同樣能滿足你的需求的網站，一個“Duang”的一下就加載出來了，一個糾結了半天才出來，你會選擇哪個？研究表明：用戶最滿意的打開網頁時間是2-5秒，如果等待超過10秒，99%的用戶會關閉這個網頁。

許多研究發現，頁面速度和訪客的滯留時間，跳出率以及收入都有直接的關系。另外，谷歌的排名算法中也把頁面加載速度作為其中一項考慮因素。因此，你網站的頁面加載時間是至關重要的。

小于3秒的頁載入時間被認為是優良的，而且高達5秒是可接受的。而大于6秒的頁面載入時間不僅影響你網站的搜索引擎排名，還會嚴重影響用戶體驗。

在四月份下旬的時候，就有一個老客戶的反應他們的網站打開速度過慢，導致跳出率過高，尋求解決辦法。

經過對網站的實測分析：網站服務器基礎設施一般般+服務軟件有很大的改進空間+程序代碼和前端需要升級改進。針對這位老客戶的需求，提出如下解決方案：網站前端改版+服務端優化升級。

下面我們就分享一下如何提高前端網頁加速度

進行前端優化的時候，我們首先需要明白網頁加載順序：

加載順序：1.DNS查找 > 2.下載并渲染HTML文件 > 3.下載并執行css及js組件 > 4.下載圖片 > 5.渲染展示

1.html文檔優化

1.1. 避免使用空請求，包括空的href鏈接、空src鏈接?？真溄颖旧頍o法請求成功，因此會把一個HTTP請求拖到超時，而且空鏈接會阻塞頁面中其他資源的下載進程，會拖慢頁面加載速度。

1.2. 根據項目大小，選擇主要使用class還是id。id選擇器優先級最高，訪問速度最快。但是在html中每聲明一個id，就會在JS底層聲明一個全局變量，而全局變量的增多，將會拖慢JS中變量遍歷的效率，若變量遍歷達到十萬次以上，就會出現較顯著的延遲，而且容易造成全局變量污染。對于小項目，并無影響，但是對中大型項目來說，尤其是游戲項目，影響很大。個人推薦，當項目較小時，靈活使用class和id，當項目較大時，盡量少使用id。

1.3. 預先設定圖片大小。在頁面加載過程中，圖片最后加載，若不對圖片預設大小，當圖片加載完成后，將會引起大量的重排，將會浪費瀏覽器資源及拖慢頁面加載速度。

1.4. 盡量減少DOM元素的數量與層級。解析HTML時，標簽的數量越多，標簽的層級越深，瀏覽器解析構建DOM樹的時間就越長，應盡可能的減少DOM元素的數量和層級。

1.5. 盡量避免使用table標簽。瀏覽器對table標簽的解析是全部生成后再一次性繪制的，因此會造成表格位置較長時間的空白，推薦使用ul及li標簽繪制表格。

1.6. 使用異步加載iframe標簽。瀏覽器加載iframe標簽時，會阻塞父頁面渲染樹的構建及HTTP請求，因此盡量使用異步加載iframe。

2.減少DNS查找 增加DNS預解析

2.1 DNS查找，即瀏覽器根據url中域名，查找該域名對應的服務器IP地址，然后才能根據服務器IP地址，下載到文件。在DNS查找完成之前，所有的文件下載都無法執行。每一次DNS查找時間約20-120ms。

一般而言，電腦會進行DNS緩存，包括瀏覽器緩存、系統緩存、路由器緩存、ISP DNS緩存。所以，瀏覽器DNS查找順序一般是這樣的：瀏覽器緩存→系統緩存→路由器緩存→ISP DNS 緩存→遞歸搜索。

遞歸搜索，即ISP的DNS服務器從根域名開始進行遞歸查詢，查找時間一般為20-120ms。

若沒有DNS緩存，才會執行DNS遞歸搜索。但是顯而易見，第一次訪問網站首頁時，是不會有DNS緩存的，必然會執行DNS查找。而每一個DNS查找，需要耗時20-120ms。因此，減少DNS查找能加快網頁加載速度。

2.2 DNS預獲取，是前端優化的一部分。一般來說，在前端優化中與 DNS 有關的有兩點： 一個是減少DNS的請求次數，另一個就是進行DNS預獲取 。

DNS Prefetch 應該盡量的放在網頁的前面，推薦放在 <meta charset="UTF-8"> 后面。具體使用方法如下：

< meta  http-equiv="x-dns-prefetch-control" content="on">
< link  rel="dns-prefetch" href="//www.instfagram.com">

特別說明：減少dns請求是說盡量不要引用外站文件，dns預獲取是在引用外站文件的時候使用，比如說使用cdn的時候，使用這個就可以減少dns請求數和加快下載速度。

3.避免重定向

重定向增加了額外的HTTP請求，因此也增加了頁面加載時間。然而有時重定向卻是不可避免的，如鏈接網站的不同部分、保存多個域名、或者從不存在的頁面跳轉到新頁面。

重定向增加了延遲時間，因此要盡量避免使用它。檢查是否有損壞的鏈接，并立即修復。

4.減少http請求

HTTP請求需從客戶端發起請求，然后由服務器端進行數據處理，然后再返回數據或資源。一般而言，耗時據請求資源的大小，服務器網速，約數ms-數百ms之間。請求資源越大，所花費的時間越長，服務器網速越慢，所花費的時間也越長。

一般而言，完成了DNS查找后，接下來便是進行HTTP請求，獲取資源。首先下載HTML文件，然后解析HTML文件，根據HTML內容，獲取CSS、JS及圖片文件。每一個CSS鏈接、JS鏈接以及圖片鏈接都是一個HTTP請求。

4.1 合并圖片等小文件，使用 CSS Sprites 整合圖像。多圖像的網站加載時間比較久。其中一個解決方法就是把多個圖像整合到少數幾個輸出文件中。你可以使用 CSS Sprites 來整合圖像文件。這樣就減少了在下載其他資源時的往返次數和延遲，從而提高了站點的速度。

4.2 合并css/js文件。盡量減少css或是js文件的數量，有些css文件代碼比較少，可以多個合并成為一個。

5.壓縮/縮小文件

5.1 壓縮CSS和JavaScript. 壓縮是通過移除不必要的字符（如TAB、空格、回車、代碼注釋等），以幫助減少其大小和網頁的后續加載時間的過程。這是非常重要的，但是，你還需要保存JS和CSS的原文件，以便更新和修改代碼。

5.2 啟用GZIP壓縮. 在服務器上壓縮網站的頁面是提升網站訪問速度非常有效的一種方法。你可以用gzip壓縮做到這一點。Gzip是一個減小發送給訪客的HTML文件、JS和CSS體積的工具。壓縮的文件減少了HTTP響應時間。

5.3 圖片文件盡量滿足需要就好，圖片格式上盡量選擇壓縮比較高的格式。同一張圖片，jpg格式比png格式小約5倍，加載速度快約3倍；推薦使用webp圖片格式，更快更好哦。什么是webp圖片格式

6.CSS優先加載，JS延遲加載

在解析HTML文件，構建DOM樹時，一旦遇到link標記時，即遇到了CSS樣式表，將之下載，便可立即構建渲染樹，從而立即呈現頁面效果。

而一旦遇到script 標記時，即遇到了JS腳本，將立即阻塞DOM樹的構建，將控制權移交給 JavaScript 引擎，等到 JavaScript 引擎運行完畢，瀏覽器才會從中斷的地方恢復渲染樹的構建。

若將引入JS腳本的鏈接放到HTML頁面頂部，那么在加載該頁面時，一旦遇到JS，頁面渲染就會停滯，出現一段時間的灰色空白，直到JS加載完成，才會出現頁面內容，這對用戶體驗是不友好的。因此，我們需要將JS腳本放置到頁面底部，或者讓JS腳本異步或是延遲加載。（說白了就是css文件可以放到</head>標簽之前，js文件放到</html>之前）

7.合理利用緩存

避免在HTML文件中使用style標簽插入CSS樣式，及使用script標簽插入JS腳本。若在HTML文件中插入CSS及JS，那么它們無法進入緩存，每次刷新頁面，都要重新加載，不但浪費了瀏覽器資源，拖慢了頁面加載速度，而且顯得冗余且復用性低，不利于日后的維護。因此，將CSS樣式與JS腳本分離出來，形成CSS文件及JS文件，就能進入緩存，進而提高頁面加載速度。這就要求好好規劃文件內容了，緩存公共部分能有效提升加載渲染速度哦！

8.css代碼優化及js代碼優化

8.1 CSS樣式代碼優化

8.1.1. 禁止使用樣式表達式。CSS表達式從IE5起開始支持，但僅有IE支持。它的解析速度較慢，而且運算次數遠比我們想象的要大，隨意動動鼠標就能輕松達到上萬次運算，會對頁面性能造成影響。譬如："#myDiv{width:expression(document.body.offsetWidth - 110 + "px"); }"

8.1.2. 優化關鍵選擇器，去掉無效的父級選擇器，盡量少在選擇器末尾使用通配符。大多數人都認為，瀏覽器對CSS選擇器的解析式從左往右進行的，譬如選擇器："#myDiv ul li a"，大多數人會認為這個選擇器效率極高，畢竟第一個ID #myDiv 就已經把范圍限定了，先選擇 #myDiv ，再在 #myDiv 下尋找 ul ，再一級一級往下，直到找到 a 標簽，效率很高。事實上這是錯的，瀏覽器對CSS選擇器的解析式從右往左進行的。在上述選擇器中，瀏覽器會先去尋找 a 標簽，范圍為全局，再在 a 標簽的列表中，尋找父級標簽是 li 標簽的 a 標簽，一直向上，直到最后，找到父級標簽是 #myDiv ul li 的a標簽。因此，效率并不像想象中那么高。顯而易見，"#myDi a"選擇器比"#myDiv ul li a"選擇器效率要高得多。而通配符 a 的效率遠比類選擇器及id選擇器低，若給 a 標簽添加一個class myA ，構造新選擇器："#myDiv .myA"，它的效率又遠比"#myDi a"要高了。瀏覽器對CSS選擇器的解析式從右往左進行，因此在選擇器末尾最好使用類選擇器，而不是通配符。

8.2 JS代碼優化

8.2.1. ajax請求方法按需求選擇get或是post，訪問接口所花費的時間在頁面加載時間中占很大的比重，而接口訪問方法中，get方法遠比post方法要快，因此按需選擇接口訪問方法很重要。

8.2.2. 減少全局變量，盡量使用局部變量。js中，全局變量運算速率遠低于局部變量，速度差異達到上百倍，且全局變量越多，全局變量的查找速率便越慢。

8.2.3. 減少對DOM的操作。js操作DOM將會引起頁面的重繪及重排，需要花費時間及耗費瀏覽器資源。

9.去掉不必要的插件

一個非常值得關注但經常被忽略的因素是你網站安裝的插件。如今，大量免費的插件誘導網站開發者添加很多不必要的功能。您安裝的每個插件都需要服務器處理，從而增加了頁面加載時間。所以禁用和刪除不必要的插件。然而，有些插件是必須的，如社交分享插件，你可以選擇CMS內置的社交分享功能來代替安裝插件。

10.服務端輸出優化

10.1 啟用GZIP壓縮

在服務器上壓縮網站的頁面是提升網站訪問速度非常有效的一種方法。你可以用gzip壓縮做到這一點。Gzip是一個減小發送給訪客的HTML文件、JS和CSS體積的工具。壓縮的文件減少了HTTP響應時間。據Yahoo報道，這大概可以減少70%的下載時間。而目前90%的通過瀏覽器的流量都支持Gzip壓縮，因此，這是一個提示網站性能有效的選項。

10.2 添加Expires頭

頁面的初次訪問者會進行很多HTTP請求，但是通過使用一個長久的Expires頭，可以使這些組件被緩存，下次訪問的時候，就可以減少不必要的HTPP請求，從而提高加載速度。

Web服務器通過Expires頭告訴客戶端可以使用一個組件的當前副本，直到指定的時間為止。若同時制定Cache-Control和Expires，則max-age將覆蓋Expires頭（本方法對初次訪問無效，作用在于可以加快其它頁面的加載速度）

11 使用CDN服務

有些時候，技術手段搞到無能為力的時候，只需要使用CDN服務就可以將加載速度提升一個級別。如果應用程序web服務器離用戶更近，那么一個HTTP請求的響應時間將縮短。另一方面，如果組件web服務器離用戶更近，則多個HTTP請求的響應時間將縮短。

 CDN（內容發布網絡）是一組分布在多個不同地理位置的Web服務器，用于更加有效地向用戶發布內容。在優化性能時，向特定用戶發布內容的服務器的選擇基于對網絡慕課擁堵的測量。例如，CDN可能選擇網絡階躍數最小的服務器，或者具有最短響應時間的服務器。

其實大部分網站都是一般的網站，改善一下服務器設置，或是開啟CDN服務就能滿足用戶打開的速度要求了。記得有句話說的是：大部分網站web項目的性能瓶頸都可以通過人民幣快速找到解決辦法，若是還不能，那就再加一點。