網(wǎng)站一般分為前端和后臺(tái)。我們可以理解成后臺(tái)是用來實(shí)現(xiàn)網(wǎng)站的功能的，比如：實(shí)現(xiàn)用戶注冊(cè)，用戶能夠?yàn)槲恼掳l(fā)表評(píng)論等等。而前端應(yīng)該是屬于功能的表現(xiàn)。并且影響用戶訪問體驗(yàn)的絕大部分來自前端頁面。

我們網(wǎng)站建設(shè)的目的不就是為了讓目標(biāo)人群來訪問嗎？

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

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

不僅僅如此，如果前端優(yōu)化得好，他不僅可以為企業(yè)節(jié)約成本，他還能給用戶帶來更多的用戶，因?yàn)樵鰪?qiáng)的用戶體驗(yàn)。所以說，網(wǎng)站和女人一樣，都要內(nèi)外兼修呀”。說了這么多，那么我們應(yīng)該如何對(duì)我們前端的頁面進(jìn)行性能優(yōu)化呢？

1、減少http請(qǐng)求，合理設(shè)置 HTTP緩存

http協(xié)議是無狀態(tài)的應(yīng)用層協(xié)議，意味著每次http請(qǐng)求都需要建立通信鏈路、進(jìn)行數(shù)據(jù)傳輸，而在服務(wù)器端，每個(gè)http都需要啟動(dòng)獨(dú)立的線程去處理。這些通信和服務(wù)的開銷都很昂貴，減少http請(qǐng)求的數(shù)目可有效提高訪問性能。

減少http的主要手段是合并CSS、合并javascript、合并圖片。將瀏覽器一次訪問需要的javascript和CSS合并成一個(gè)文件，這樣瀏覽器就只需要一次請(qǐng)求。圖片也可以合并，多張圖片合并成一張，如果每張圖片都有不同的超鏈接，可通過CSS偏移響應(yīng)鼠標(biāo)點(diǎn)擊操作，構(gòu)造不同的URL。
緩存的力量是強(qiáng)大的，恰當(dāng)?shù)木彺嬖O(shè)置可以大大的減少 HTTP請(qǐng)求。假設(shè)某網(wǎng)站首頁，當(dāng)瀏覽器沒有緩存的時(shí)候訪問一共會(huì)發(fā)出 78個(gè)請(qǐng)求，共 600多 K數(shù)據(jù)，而當(dāng)?shù)诙卧L問即瀏覽器已緩存之后訪問則僅有 10個(gè)請(qǐng)求，共 20多 K數(shù)據(jù)。 (這里需要說明的是，如果直接 F5刷新頁面的話效果是不一樣的，這種情況下請(qǐng)求數(shù)還是一樣，不過被緩存資源的請(qǐng)求服務(wù)器是 304響應(yīng)，只有 Header沒有Body ，可以節(jié)省帶寬 )

怎樣才算合理設(shè)置 ?

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

2、使用瀏覽器緩存

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

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

使用瀏覽器緩存策略的網(wǎng)站在更新靜態(tài)資源時(shí)，應(yīng)采用逐量更新的方法，比如需要更新10個(gè)圖標(biāo)文件，不宜把10個(gè)文件一次全部更新，而是應(yīng)該一個(gè)文件一個(gè)文件逐步更新，并有一定的間隔時(shí)間，以免用戶瀏覽器忽然大量緩存失效，集中更新緩存，造成服務(wù)器負(fù)載驟增、網(wǎng)絡(luò)堵塞的情況。

3、啟用壓縮

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

4、Lazy Load Images

這條策略實(shí)際上并不一定能減少 HTTP請(qǐng)求數(shù)，但是卻能在某些條件下或者頁面剛加載時(shí)減少 HTTP請(qǐng)求數(shù)。對(duì)于圖片而言，在頁面剛加載的時(shí)候可以只加載第一屏，當(dāng)用戶繼續(xù)往后滾屏的時(shí)候才加載后續(xù)的圖片。這樣一來，假如用戶只對(duì)第一屏的內(nèi)容感興趣時(shí)，那剩余的圖片請(qǐng)求就都節(jié)省了。

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

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

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

6、合理的ajax請(qǐng)求

對(duì)于返回內(nèi)容相同的請(qǐng)求，沒必要每次都直接從服務(wù)端拉取，合理使用 AJAX 緩存能加快 AJAX 響應(yīng)速度并減輕服務(wù)器壓力。

7、縮小 favicon.ico 并緩存

有利于 favicon.ico 的重復(fù)加載，因?yàn)橐话阋粋€(gè) Web 應(yīng)用的 favicon.ico 是很少改變的。

8、減少DOM數(shù)量和層級(jí)數(shù)量

HTML 中標(biāo)簽元素越多，標(biāo)簽的層級(jí)越深，瀏覽器解析 DOM 并繪制到瀏覽器中所花的時(shí)間就越長(zhǎng)，所以應(yīng)盡可能保持 DOM 元素簡(jiǎn)潔和扁平化的層級(jí)。

9、HTML標(biāo)簽轉(zhuǎn)換

語義化的HTML代碼，符合W3C規(guī)范：語義化代碼讓搜索引擎容易理解網(wǎng)頁

HTML標(biāo)簽的轉(zhuǎn)換主要是指使用短標(biāo)簽替換在網(wǎng)頁中有相同效果的長(zhǎng)標(biāo)簽，比如b與strong標(biāo)簽兩者都是對(duì)字體加粗可是strong卻比b多了5個(gè)字符。假設(shè)一個(gè)頁面出現(xiàn)上百個(gè)加粗標(biāo)簽，就會(huì)產(chǎn)生不少的冗余代碼。

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

如果想對(duì)seo產(chǎn)生影響則用strong、em，可自行調(diào)節(jié)樣式，在制作html頁面的時(shí)候。進(jìn)行優(yōu)化的選擇使用的標(biāo)簽。

頭部標(biāo)簽

1.<title>標(biāo)題：只強(qiáng)調(diào)重點(diǎn)即可，盡量把重要的關(guān)鍵詞放在前面，關(guān)鍵詞不要重復(fù)出現(xiàn)，盡量做到每個(gè)頁面的title標(biāo)題中不要設(shè)置相同的內(nèi)容。

2.<meta keywords>標(biāo)簽：關(guān)鍵詞，列舉出幾個(gè)頁面的重要關(guān)鍵字即可，切記過分堆砌。

3.<meta description>標(biāo)簽：網(wǎng)頁描述，需要高度概括網(wǎng)頁內(nèi)容，切記不能太長(zhǎng)，過分堆砌關(guān)鍵詞，每個(gè)頁面也要有所不同。

表格，ur 等容器形式的標(biāo)簽

瀏覽器編譯器遇到一個(gè)標(biāo)簽時(shí)，就開始尋找它的結(jié)束標(biāo)簽，直到它匹配上,才干顯示它的內(nèi)容，所以當(dāng)表，ur等容器形式的標(biāo)簽嵌套非常多時(shí),打開頁面就會(huì)特別慢,這樣就減少用戶體驗(yàn)了。

解決方法：在編寫html的時(shí)候：盡量使每一個(gè)容器獨(dú)立。假設(shè)要嵌套的時(shí)候，一定要使其清楚、簡(jiǎn)單介紹。

圖片img標(biāo)簽

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

合理 target="_blank"

合理而不頻繁使用target="_blank" 是可以在一定程度上位站點(diǎn)帶來回旋流量和點(diǎn)擊的。同一時(shí)候。在細(xì)節(jié)上使用 target="_blank" ，可以增強(qiáng)站點(diǎn)總體用戶體驗(yàn)。

head頭部標(biāo)簽部分

<title> 標(biāo)題: 只強(qiáng)調(diào)重點(diǎn)，不要重復(fù)出現(xiàn)關(guān)鍵詞，各個(gè)頁面的title不要設(shè)置相同的

<meta keywords> 關(guān)鍵詞： 列舉出關(guān)鍵詞，不要過分堆砌

<meta description> 描述： 同2，不要太長(zhǎng)，各個(gè)頁面的description不要設(shè)置相同的

body代碼正文

標(biāo)簽語義化，比較以下兩部分代碼做頭部導(dǎo)航：

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

以上代碼沒有一點(diǎn)語義化，可以優(yōu)化成如下：

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

<a> 對(duì)于a標(biāo)簽，要加title，同時(shí)加屬性rel=‘nofollow’

nofollow: 告訴爬蟲不要去該鏈接去爬了，因?yàn)榕肋^去可能爬不回來了，不利于seo優(yōu)化

<h1> 對(duì)于標(biāo)題盡量用h標(biāo)簽，而且是h1標(biāo)簽，因?yàn)榕老x認(rèn)為h1標(biāo)簽是本文最重要的標(biāo)題，副標(biāo)題用h2，其他不重要的標(biāo)題就不要用h標(biāo)簽了

h1、h2 標(biāo)題太大的話，自行用css去修飾

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

<p>  //正確示例，注意p表示 文本段落,不用div
這是文本內(nèi)容啊<br>
這是文本內(nèi)容啊<br>
這是文本內(nèi)容啊
</p>
<div>  //錯(cuò)誤示例
<span>這是文本內(nèi)容啊</span><br>
<span>這是文本內(nèi)容啊</span><br>
<span>這是文本內(nèi)容啊</span>
</div>

table，定義table標(biāo)題，以下為正確示例

<table>
<caption>表格標(biāo)題</caption>
……
</table>

注意

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

重要的內(nèi)容不要用js輸出，爬蟲是看不懂js的，所以我們常用的vue框架是不利于seo優(yōu)化的。

盡量少用iframe標(biāo)簽，爬蟲是不會(huì)讀取iframe的內(nèi)容的

謹(jǐn)慎使用display：none ，理由同3

精簡(jiǎn)代碼，若用一個(gè)標(biāo)簽完成的布局，不要用兩個(gè)

本文鏈接：http://www.sztqnet.com/article/1203.html