WEB前端HTML頁面性能優化的9個方法

網站一般分為前端和后臺。我們可以理解成后臺是用來實現網站的功能的，比如：實現用戶注冊，用戶能夠為文章發表評論等等。而前端應該是屬于功能的表現。并且影響用戶訪問體驗的絕大部分來自前端頁面。

我們網站建設的目的不就是為了讓目標人群來訪問嗎？

所以我們可以理解成前端才是真正和用戶接觸的。除了后臺需要在性能上做優化外，其實前端的頁面更需要在性能優化上下功夫，只有這樣才能給我們的用戶帶來更好的用戶體驗。

舉個例子：就好像，好多人問，男人在找女朋友的時候是不是只看外表，一些智慧的男人給出了這樣的回答：臉蛋和身材決定了我是否想去了解她的思想，思想決定了我是否會一票否決她的臉蛋和身材。同理，網站也是這樣，網站前端的用戶體驗決定了用戶是否想要去使用網站的功能，而網站的功能決定了用戶是否會一票否決前端體驗。

不僅僅如此，如果前端優化得好，他不僅可以為企業節約成本，他還能給用戶帶來更多的用戶，因為增強的用戶體驗。所以說，網站和女人一樣，都要內外兼修呀”。說了這么多，那么我們應該如何對我們前端的頁面進行性能優化呢？

1、減少http請求，合理設置 HTTP緩存

http協議是無狀態的應用層協議，意味著每次http請求都需要建立通信鏈路、進行數據傳輸，而在服務器端，每個http都需要啟動獨立的線程去處理。這些通信和服務的開銷都很昂貴，減少http請求的數目可有效提高訪問性能。

減少http的主要手段是合并CSS、合并javascript、合并圖片。將瀏覽器一次訪問需要的javascript和CSS合并成一個文件，這樣瀏覽器就只需要一次請求。圖片也可以合并，多張圖片合并成一張，如果每張圖片都有不同的超鏈接，可通過CSS偏移響應鼠標點擊操作，構造不同的URL。
緩存的力量是強大的，恰當的緩存設置可以大大的減少 HTTP請求。假設某網站首頁，當瀏覽器沒有緩存的時候訪問一共會發出 78個請求，共 600多 K數據，而當第二次訪問即瀏覽器已緩存之后訪問則僅有 10個請求，共 20多 K數據。 (這里需要說明的是，如果直接 F5刷新頁面的話效果是不一樣的，這種情況下請求數還是一樣，不過被緩存資源的請求服務器是 304響應，只有 Header沒有Body ，可以節省帶寬 )

怎樣才算合理設置 ?

原則很簡單，能緩存越多越好，能緩存越久越好。例如，很少變化的圖片資源可以直接通過 HTTP Header中的Expires設置一個很長的過期頭 ;變化不頻繁而又可能會變的資源可以使用 Last-Modifed來做請求驗證。盡可能的讓資源能夠在緩存中待得更久。關于 HTTP緩存的具體設置和原理此處就不再詳述了。

2、使用瀏覽器緩存

對一個網站而言，CSS、javascript、logo、圖標這些靜態資源文件更新的頻率都比較低，而這些文件又幾乎是每次http請求都需要的，如果將這些文件緩存在瀏覽器中，可以極好的改善性能。通過設置http頭中的cache-control和expires的屬性，可設定瀏覽器緩存，緩存時間可以是數天，甚至是幾個月。

在某些時候，靜態資源文件變化需要及時應用到客戶端瀏覽器，這種情況，可通過改變文件名實現，即更新javascript文件并不是更新javascript文件內容，而是生成一個新的JS文件并更新HTML文件中的引用。

使用瀏覽器緩存策略的網站在更新靜態資源時，應采用逐量更新的方法，比如需要更新10個圖標文件，不宜把10個文件一次全部更新，而是應該一個文件一個文件逐步更新，并有一定的間隔時間，以免用戶瀏覽器忽然大量緩存失效，集中更新緩存，造成服務器負載驟增、網絡堵塞的情況。

3、啟用壓縮

在服務器端對文件進行壓縮，在瀏覽器端對文件解壓縮，可有效減少通信傳輸的數據量。如果可以的話，盡可能的將外部的腳本、樣式進行合并，多個合為一個。文本文件的壓縮效率可達到80%以上，因此HTML、CSS、javascript文件啟用GZip壓縮可達到較好的效果。但是壓縮對服務器和瀏覽器產生一定的壓力，在通信帶寬良好，而服務器資源不足的情況下要權衡考慮

4、Lazy Load Images

這條策略實際上并不一定能減少 HTTP請求數，但是卻能在某些條件下或者頁面剛加載時減少 HTTP請求數。對于圖片而言，在頁面剛加載的時候可以只加載靠前屏，當用戶繼續往后滾屏的時候才加載后續的圖片。這樣一來，假如用戶只對靠前屏的內容感興趣時，那剩余的圖片請求就都節省了。

5、CSS放在頁面最上部，javascript放在頁面最下面

瀏覽器會在下載完成全部CSS之后才對整個頁面進行渲染，因此最好的做法是將CSS放在頁面最上面，讓瀏覽器盡快下載CSS。如果將 CSS放在其他地方比如 BODY中，則瀏覽器有可能還未下載和解析到 CSS就已經開始渲染頁面了，這就導致頁面由無 CSS狀態跳轉到 CSS狀態，用戶體驗比較糟糕，所以可以考慮將CSS放在HEAD中。

Javascript則相反，瀏覽器在加載javascript后立即執行，有可能會阻塞整個頁面，造成頁面顯示緩慢，因此javascript最好放在頁面最下面。但如果頁面解析時就需要用到javascript，這時放到底部就不合適了。

6、合理的ajax請求

對于返回內容相同的請求，沒必要每次都直接從服務端拉取，合理使用 AJAX 緩存能加快 AJAX 響應速度并減輕服務器壓力。

7、縮小 favicon.ico 并緩存

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

8、減少DOM數量和層級數量

HTML 中標簽元素越多，標簽的層級越深，瀏覽器解析 DOM 并繪制到瀏覽器中所花的時間就越長，所以應盡可能保持 DOM 元素簡潔和扁平化的層級。

9、HTML標簽轉換

語義化的HTML代碼，符合W3C規范：語義化代碼讓搜索引擎容易理解網頁

HTML標簽的轉換主要是指使用短標簽替換在網頁中有相同效果的長標簽，比如b與strong標簽兩者都是對字體加粗可是strong卻比b多了5個字符。假設一個頁面出現上百個加粗標簽，就會產生不少的冗余代碼。

<strong><em>與<b><i>，如果只是單純加粗或斜體則用b、i標簽；

如果想對seo產生影響則用strong、em，可自行調節樣式，在制作html頁面的時候。進行優化的選擇使用的標簽。

頭部標簽

1.<title>標題：只強調重點即可，盡量把重要的關鍵詞放在前面，關鍵詞不要重復出現，盡量做到每個頁面的title標題中不要設置相同的內容。

2.<meta keywords>標簽：關鍵詞，列舉出幾個頁面的重要關鍵字即可，切記過分堆砌。

3.<meta description>標簽：網頁描述，需要高度概括網頁內容，切記不能太長，過分堆砌關鍵詞，每個頁面也要有所不同。

表格，ur 等容器形式的標簽

瀏覽器編譯器遇到一個標簽時，就開始尋找它的結束標簽，直到它匹配上,才干顯示它的內容，所以當表，ur等容器形式的標簽嵌套非常多時,打開頁面就會特別慢,這樣就減少用戶體驗了。

解決方法：在編寫html的時候：盡量使每一個容器獨立。假設要嵌套的時候，一定要使其清楚、簡單介紹。

圖片img標簽

<img src="圖片地址" alt="圖片keyword"/> alt屬性一定要寫

合理 target="_blank"

合理而不頻繁使用target="_blank" 是可以在一定程度上位站點帶來回旋流量和點擊的。同一時候。在細節上使用 target="_blank" ，可以增強站點總體用戶體驗。

head頭部標簽部分

<title> 標題: 只強調重點，不要重復出現關鍵詞，各個頁面的title不要設置相同的

<meta keywords> 關鍵詞： 列舉出關鍵詞，不要過分堆砌

<meta description> 描述： 同2，不要太長，各個頁面的description不要設置相同的

body代碼正文

標簽語義化，比較以下兩部分代碼做頭部導航：

<p>
<span>課程1</span>
<span>|</span>
<span>課程2</span>
<span>|</span>
<span>課程3</span>
<span>我的課程</span>
</p>

以上代碼沒有一點語義化，可以優化成如下：

<ul>
<li>課程1</li>
<li>課程2</li>
<li>課程3</li>
<span>我的課程</span>
</ul>
……
li{
border-right:1pxsolid#000;
}

<a> 對于a標簽，要加title，同時加屬性rel=‘nofollow’

nofollow: 告訴爬蟲不要去該鏈接去爬了，因為爬過去可能爬不回來了，不利于seo優化

<h1> 對于標題盡量用h標簽，而且是h1標簽，因為爬蟲認為h1標簽是本文最重要的標題，副標題用h2，其他不重要的標題就不要用h標簽了

h1、h2 標題太大的話，自行用css去修飾

<br>\ 表示換行，如果內容是純文本內容，可以br換行，示例如下，如果是<span>之間換行則不用，利用盒模型來調整

<p>//正確示例，注意p表示文本段落,不用p
這是文本內容啊<br>
這是文本內容啊<br>
這是文本內容啊
</p>
<p>//錯誤示例
<span>這是文本內容啊</span><br>
<span>這是文本內容啊</span><br>
<span>這是文本內容啊</span>
</p>

table，定義table標題，以下為正確示例

<table>
<caption>表格標題</caption>
……
</table>

注意

重要的html代碼放在文件最前邊，爬蟲是由上之下抓取html代碼的

重要的內容不要用js輸出，爬蟲是看不懂js的，所以我們常用的vue框架是不利于seo優化的。

盡量少用iframe標簽，爬蟲是不會讀取iframe的內容的

謹慎使用display：none ，理由同3

精簡代碼，若用一個標簽完成的布局，不要用兩個