前端的性能優化是一個很寬泛的概念，最終目的都是為了提升用戶體驗，改善頁面性能。面試的時候經常會遇到問談談性能優化的手段，這個我分幾大部分來概述，具體細節需要自己再針對性的去搜索，只是提供一個索引（太多了寫不過來+主要是懶得寫）。這里PC端和移動端分開說了，業務場景不同，需要考慮各自的優化手段

目前來看，前端優化的策略有很多，主要包括網絡加載，頁面渲染，CSS優化，JS執行優化，緩存，圖片，協議幾大類。這一篇先講PC端的優化策略。

網絡加載

1. 減少HTTP請求次數

建議盡可能的根據需要去合并靜態資源圖片、JavaScript代碼和CSS文件，減少頁面請求數，這樣可以縮短頁面首次訪問的等待時間，另外也要盡量的避免重復資源，防止增加多余的請求

2. 減少HTTP請求大小

除了減少請求資源數，也要減少每個http請求的大小。比如減少沒必要的圖片，JS，CSS以及HTML等，對文件進行壓縮優化，開啟GZIP壓縮傳輸內容，縮短網絡傳輸等待延遲

3. 將CSS和JS放到外部文件中，避免使用style和script標簽引入

在HTML文件中引入外部的資源可以有效利用瀏覽器的靜態資源緩存。有時候在移動端對請求數比較在意的會為了減少請求把CSS和JS文件直接寫到HTML里邊，具體根據CSS和JS文件大小和業務場景來分析。如果CSS和JS文件內容較多，邏輯比較復雜，建議放到外部引入
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

4. 避免頁面中空的href和src

當link標簽的href屬性為空，或者script、img、iframe標簽的src屬性為空的時候，瀏覽器在渲染的過程中還是會把href和src的空內容進行加載，直到加載失敗。這樣就阻塞了頁面中其他資源的下載進程，并且最后加載的內容是無效的，因此要盡量避免。

<!-- 不推薦 --> <img src="" alt="占位圖"/>

5. 為HTML指定Cache-Control或者Expires

為HTML指定Cache-Control或者Expires可以將HTML內容緩存起來，避免頻繁向服務器發送請求。在頁面Cache-Control或Expires頭部又消失，瀏覽器會直接從緩存讀取內容，不向服務器發送請求

<meta http-equiv="Cache-Control" content="max-age=7200" /> <meta http-equiv="expires" content="Wed, 20 Jun 2017 22:33:00 GMT"＞

6. 合理設置Etag和Last-Modified

對于未修改的文件，靜態資源服務器會向瀏覽器端返回304，讓瀏覽器從緩存中讀取文件，減少下載的帶寬消耗并能減少服務器的負載
<meta http-equiv="last-modified" content="Mon, 03 Jan 2017 17:45:57 GMT">

7. 減少頁面重定向

一次重定向大概600毫秒的時間開銷，為了保證用戶能盡快看到頁面內容，盡量避免頁面的重定向

8. 靜態資源不同域名存放

瀏覽器在同一時刻向同一個域名請求文件的并行下載數是有限的，因此可以理由多個域名的主機來存放不同的靜態資源，增大頁面加載時資源的并行下載數。

9. 使用靜態資源CDN來存儲文件

詳情搜索CDN空間

10. 使用CDN Combo下載傳輸內容

CDN的combo技術能把多個資源文件合并引用，減少請求次數。這樣可以減少瀏覽器HTTP請求數，加快資源下載速度。比如淘寶的寫法：

<link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/??sm.min.css,sm-extend.min.css"> <script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/??sm.min.js,sm-extend.min.js' charset='utf-8'></script>

?11. 使用可緩存的AJAX

對于內容相同的請求，有時候沒必要每次都從服務器拉取，合理的使用ajax緩存能加快ajax響應速度并減少服務器的壓力

$.ajax({url : url,dataType : "json",cache: true, success: function(data){ // to do something... }});

?

12. 使用get請求

POST請求會首先發送文件頭，然后發送HTTP正文的數據。而使用GET只發送頭部，所以在拉取數據時使用GET請求效率更高

13. 減少Cookie的大小并進行Cookie隔離

HTTP請求默認是會帶上瀏覽器端的Cookie一起發送給服務器端的，所以在非必要的情況下要盡量減少Cookie。對于靜態的資源，盡量使用不同的域名存放，因為Cookie默認也是不能跨域的，這就做到了不同域名下靜態資源請求的Cookie隔離

14. 減少favicon.ico 并緩存

一般一個web應用的favicon.ico是很少改變的，。有利于favicon.ico的重復加載

15. 異步的加載JavaScript資源

異步的JavaScript資源不會阻塞文檔解析，所以瀏覽器會優先渲染頁面，延遲加載腳本執行。

<script src="main.js" defer></script> <script src="main.js" async></script>

16. 消除阻塞頁面的CSS和JS

對于頁面中加載時間過長的CSS或JS文件，需要進行合理的拆分或者延后加載，保證關鍵的資源能快速加載完成

17. 避免使用CSS import 引用加載CSS

18. 使用prefetch來完成網站預加載

讓瀏覽器預先加載用戶訪問當前頁后極有可能訪問的其他資源(頁面，圖片，視頻等)，從而讓用戶有更好的體驗

19. 按需加載

這個跟第二條差不多，特別做單頁應用的時候要注意（移動端部分會著重說明）

頁面渲染類

1. 把CSS資源引用放到HTML文件頂部

這樣瀏覽器可以優先下載CSS并盡快完成頁面渲染

2. JavaScript文件引用放到HTML文件底部

可以防止JavaScript的加載和解析執行對頁面渲染造成阻塞。由于JavaScript資源默認是解析阻塞的，除非被標記為異步或者通過其他的方式異步加載，否則會阻塞HTML DOM解析和CSS渲染過程

3. 不要在HTML中直接縮放圖片

在HTML中直接縮放圖片會導致頁面內容的重排重繪，此時可能會使頁面中的其他操作產生卡頓，因此要盡量減少在頁面中直接進行圖片縮放

4. 減少DOM元素數量和深度

HTML中標簽元素約的，標簽的層級越深，瀏覽器解析DOM并繪制到瀏覽器中說花的時間就越長。

5. 盡量避免使用table、iframe等慢元素

<table>內容的渲染是講table的DOM渲染樹全部生成完并一次性繪制到頁面上，所以在長表格渲染時很耗性能，應該盡量避免使用，可以考慮用ul代替。盡量使用異步的方式動態的加載iframe，因為iframe內資源的下載進程會阻塞父頁面靜態資源的下載以及HTML DOM的解析

6. 避免運行耗時的JavaScript

長時間運行的JavaScript會阻塞瀏覽器構建DOM樹、DOM渲染樹、渲染頁面。所以任何與頁面初次渲染無關的邏輯功能都應該延遲加載執行，這和JavaScript資源的異步加載思路一致

7. 避免使用CSS表達式和CSS濾鏡

CSS表達式和濾鏡的解析渲染速度是很慢的，再有其他解決方案的情況下應該盡量避免使用

// 不推薦 .opacity{filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=10, MakeShadow=false) }

?至此，PC部分的性能優化點介紹完了。有一些沒有講到的諸如DNS預解析，離線緩存，HTTP2協議，GPU加速等，想著移動端的優化更細，這些內容放到移動端再講會好一點。因為PC端由于兼容性的問題，很多的優化策略也不能很好的向下降級。盡管列舉了很多，但還有少部分遺漏的，歡迎大家補充。前端優化不是一件簡簡單單的事情，其涉及的內容很多，大家可以根據實際情況將這些方法應用到自己的項目當中去。

總結

以上是生活随笔為你收集整理的前端性能优化（PC版）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。