網(wǎng)站前端的用戶體驗(yàn)，決定了用戶是否想要繼續(xù)使用網(wǎng)站以及網(wǎng)站的其他功能，網(wǎng)站的用戶體驗(yàn)佳，可留住更多的用戶。除此之外，前端優(yōu)化得好，還可以為企業(yè)節(jié)約成本。那么我們應(yīng)該如何對(duì)我們前端的頁(yè)面進(jìn)行性能優(yōu)化呢？

前端性能優(yōu)化可以分為三個(gè)方面：接口訪問(wèn)優(yōu)化、靜態(tài)資源優(yōu)化和頁(yè)面渲染速度優(yōu)化。

一、接口訪問(wèn)優(yōu)化

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

http協(xié)議是無(wú)狀態(tài)的應(yīng)用層協(xié)議，每次發(fā)送http請(qǐng)求時(shí)，都需要建立連接、通信、斷開(kāi)連接，在服務(wù)器端每個(gè)http都需要開(kāi)啟獨(dú)立的線程去處理。所以盡量減少http請(qǐng)求，盡可能地提高訪問(wèn)性能。

減少http請(qǐng)求的方法：

合并 js、css、圖片等文件，合并成一個(gè)文件，瀏覽器就只需請(qǐng)求一次就可以了。圖片合并要適當(dāng)，不能想著優(yōu)化呢，盲目地都合并成一張圖片。借用瀏覽器緩存。恰當(dāng)?shù)木彺嬖O(shè)置可以大大減少http請(qǐng)求。不懂瀏覽器緩存的可參考《瀏覽器九大緩存方法》。接口合并。前端交互，經(jīng)常需要請(qǐng)求多個(gè)并行或串行接口，此時(shí)可以通過(guò)接口合并方式，提高接口訪問(wèn)速度。能使用css的盡量不使用js，能使用js的盡量不用三方插件，避免三方插件大量的庫(kù)。

1.2、減少cookie傳輸

cookie 存在于 http 頭，在客戶端與服務(wù)器之間交換，盡可能地控制 cookie 的大小，cookie越小，響應(yīng)速度越快，減少 cookie 傳輸，響應(yīng)速度更快。

1.3、使用CDN提供靜態(tài)文件

使用 CDN 可以更快地在全球范圍內(nèi)獲取到你的靜態(tài)文件，加快網(wǎng)頁(yè)加載。

1.4、啟用 GZIP 壓縮

http 協(xié)議上 GZIP 編碼，是一種用來(lái)改進(jìn) web 應(yīng)用程序的。開(kāi)啟 GZIP 后，服務(wù)器會(huì)把網(wǎng)頁(yè)內(nèi)容壓縮后傳輸，一般能壓縮到原大小40%，這樣網(wǎng)頁(yè)傳輸速度就更快了。GZIP 有兩大好處：一是減少存儲(chǔ)空間，二是通過(guò)網(wǎng)絡(luò)傳輸文件時(shí)，可以減少傳輸時(shí)間。

1.5、分域存放資源

HTTP 客戶端一般對(duì)同一個(gè)服務(wù)器的并發(fā)連接個(gè)數(shù)都是有限制的，通常最大并行連接為四了，剩下的會(huì)進(jìn)入等待隊(duì)列，等前邊的執(zhí)行完畢，等待的才會(huì)執(zhí)行。所以利用多域名主機(jī)存放資源，增加并行連接量，縮短資源加載時(shí)間。

1.6、減少頁(yè)面重定向

開(kāi)啟 https 可以有效防范攻擊，保證用戶始終訪問(wèn)到網(wǎng)站的加密連接，保護(hù)數(shù)據(jù)安全，同時(shí)省去 301/302 跳轉(zhuǎn)的時(shí)間，大大提升網(wǎng)站的安全系數(shù)和用戶體驗(yàn)。

如果在網(wǎng)站設(shè)置當(dāng)用戶訪問(wèn)域名的時(shí)候強(qiáng)制 https 進(jìn)行 301 或者 302 跳轉(zhuǎn)，但是這個(gè)過(guò)程中，用到 HTTP 因此容易發(fā)生劫持，受到第三方的攻擊。所以盡可能使用https安全。

1.7、避免使用iframe

iframe 相當(dāng)于本頁(yè)面又嵌套了一個(gè)頁(yè)面，消耗性能，還要加載嵌套頁(yè)面的資源，所以更消耗時(shí)間。

1.8、借用瀏覽器緩存

ajax 請(qǐng)求到的數(shù)據(jù)，可以緩存到瀏覽器，下次使用的時(shí)候無(wú)需再次獲取，直接取緩存數(shù)據(jù)就可以。這個(gè)會(huì)根據(jù)具體的項(xiàng)目來(lái)做，比如常用的角色類型就會(huì)緩存，獲取到的普通數(shù)據(jù)為了保證實(shí)時(shí)性，不能使用緩存。

二、靜態(tài)資源優(yōu)化

2.1、壓縮 html、css、js 等文件

刪除不必要的空格、注釋和中行，減少文件大小，顯著減少用戶下載時(shí)間，加快網(wǎng)頁(yè)加載速度?？梢灾苯邮褂脡嚎s工具，可以自動(dòng)刪除所有不必要內(nèi)容。

2.2、在 js 之前引用 css

這是一個(gè)小細(xì)節(jié)，js 執(zhí)行的時(shí)候會(huì)進(jìn)入阻塞，如果放入 js 之后加載，會(huì)等待 js 執(zhí)行完成之后才能加載 css，渲染頁(yè)面，此時(shí)就會(huì)出現(xiàn)布局錯(cuò)亂。所以 css 文件需要非阻塞引入，以防DOM 花費(fèi)更多時(shí)間才能渲染。

2.3、非阻塞 js

js 會(huì)阻止 html 文檔的正常解析，當(dāng)解析器到達(dá) script 標(biāo)記時(shí)，她會(huì)停止解析并執(zhí)行腳本。所以我們經(jīng)常把 script 引入的 js，放到 html 中最底下。如果需要讓腳本位于頁(yè)面頂部，建議添加非阻塞屬性。經(jīng)常使用 defer 和 async 來(lái)異步加載js文件。

<!--  使用defer  --><script defer src=http://www.zoomboom.cn/skin/m04blueskin/image/nopic.gif ></script><!--   使用async  --><script async src=http://www.zoomboom.cn/skin/m04blueskin/image/nopic.gif></script>

2.4、圖片壓縮

最常見(jiàn)的就是 css 雪碧，就是將很多很多的小圖標(biāo)放在一張圖片上，就稱為雪碧圖。雪碧圖最大優(yōu)點(diǎn)就是可以減少http請(qǐng)求，除此也能壓縮圖片文件大小。使用的時(shí)候，通過(guò)設(shè)置 background-position ，移動(dòng)圖片的位置。除此之外，網(wǎng)站用到的大圖，也需要在保證圖片質(zhì)量前提下優(yōu)化到最小。

2.5、矢量圖替代位圖

矢量圖（SVG）往往比圖像小很多，縮放的時(shí)候不失真，這些圖像還可以通過(guò) css 進(jìn)行動(dòng)畫(huà)和修改，比位圖方便控制?？梢缘脑?，盡量用矢量圖多點(diǎn)。

2.6、js代碼相關(guān)優(yōu)化

盡量減少使用閉包，因?yàn)殚]包所在的上下文不會(huì)被釋放。js避免嵌套循環(huán)和死循環(huán)，一旦遇到死循環(huán)，瀏覽器會(huì)卡死。在js封裝過(guò)程中，盡量做到低耦合高內(nèi)聚。減少頁(yè)面的冗余代碼。盡量減少遞歸，避免死遞歸。盡量使用window.requestAnimationframe替代傳統(tǒng)的定時(shí)器。

三、頁(yè)面渲染速度

3.1、懶加載

素材類的網(wǎng)站，頁(yè)面一屏展示很多圖片，而且圖片還不能失真，圖片加載太多，網(wǎng)頁(yè)加載慢得很，所以就引用懶加載，只加載可視區(qū)的圖片，避免加載可以能不需要或不必要的圖像。改善頁(yè)面的響應(yīng)時(shí)間。

3.2、避免響應(yīng)式布局

響應(yīng)式網(wǎng)站雖然能夠兼容所有終端設(shè)備，但是會(huì)出現(xiàn)隱藏部分無(wú)用內(nèi)容，浪費(fèi)帶寬，加載時(shí)間還長(zhǎng)，頁(yè)面的渲染時(shí)間也長(zhǎng)。想更多了解響應(yīng)式布局，請(qǐng)點(diǎn)擊《前端響應(yīng)式布局為什么是個(gè)坑？》。

3.3、設(shè)置大小，避免重繪

遇到 img 標(biāo)簽，會(huì)立馬發(fā)送一個(gè) http 請(qǐng)求，下載圖片，頁(yè)面繼續(xù)向下渲染，等圖片加載成功了，發(fā)現(xiàn)圖片的寬高大小發(fā)生變化，影響后邊排版，所以頁(yè)面會(huì)重新再繪制一次這部分。所以盡可能設(shè)置圖片的大小。

3.4、減少DOM元素

解析 html 內(nèi)容，將標(biāo)簽轉(zhuǎn)化為DOM節(jié)點(diǎn)，之后再解析其他文件，DOM元素越少，也就是標(biāo)簽越少，文件轉(zhuǎn)化得越快，加載速度也就快了。

3.5、減少 Flash 的使用

flash 文件比較大，加載起來(lái)耗時(shí)。除此，flash 插件還需要運(yùn)行才能運(yùn)行，最主要有些瀏覽器flash插件馬上要下線了，建議盡量不用 flash。

3.6、文件順序

css文件放在最頂部，優(yōu)先渲染。js放在最底部，避免阻塞。

讓網(wǎng)頁(yè)如何加載更快，有好多的細(xì)節(jié)，還是要好好提升自己的技能~~~~~~~~~

點(diǎn)個(gè)關(guān)注！更多分享內(nèi)容。