PC 瀏覽器前端優(yōu)化策略

PC 端優(yōu)化的策略很多番刊，如 YSlow（YSlow 是 Yahoo 發(fā)布的一款 Firefox 插件伏恐，現(xiàn) Chrome 也可安裝扑媚，可以對網(wǎng)站的頁面性能進行分析曾我，提出對該頁面性能優(yōu)化的建議）原則勤家，或者 Chrome 自帶的 Audits 等圾浅，總結(jié)起來主要包括網(wǎng)絡(luò)加載類掠手、頁面渲染類、CSS 優(yōu)化類狸捕、JavaScript 執(zhí)行類喷鸽、緩存類、圖片類灸拍、架構(gòu)協(xié)議類等幾類做祝，下面逐一介紹。

網(wǎng)絡(luò)加載類

1．減少 HTTP 資源請求次數(shù)

在前端頁面中鸡岗，通常建議盡可能合并靜態(tài)資源圖片混槐、JavaScript 或 CSS 代碼，減少頁面請求數(shù)和資源請求消耗轩性，這樣可以縮短頁面首次訪問的用戶等待時間声登。通過構(gòu)建工具合并雪碧圖、CSS揣苏、JavaScript 文件等都是為了減少 HTTP 資源請求次數(shù)悯嗓。另外也要盡量避免重復(fù)的資源，防止增加多余請求卸察。

2．減小 HTTP 請求大小

除了減少 HTTP 資源請求次數(shù)脯厨，也要盡量減小每個 HTTP 請求的大小。如減少沒必要的圖片坑质、JavaScript合武、CSS 及 HTML 代碼，對文件進行壓縮優(yōu)化涡扼，或者使用 gzip 壓縮傳輸內(nèi)容等都可以用來減小文件大小稼跳，縮短網(wǎng)絡(luò)傳輸?shù)却龝r延。前面我們使用構(gòu)建工具來壓縮靜態(tài)圖片資源以及移除代碼中的注釋并壓縮壳澳，目的都是為了減小 HTTP 請求的大小岂贩。

3．將 CSS 或 JavaScript 放到外部文件中茫经，避免使用或標簽直接引入

在 HTML 文件中引用外部資源可以有效利用瀏覽器的靜態(tài)資源緩存巷波，但有時候在移動端頁面 CSS 或 JavaScript 比較簡單的情況下為了減少請求萎津，也會將 CSS 或 JavaScript 直接寫到 HTML 里面，具體要根據(jù) CSS 或 JavaScript 文件的大小和業(yè)務(wù)的場景來分析抹镊。如果 CSS 或 JavaScript 文件內(nèi)容較多锉屈，業(yè)務(wù)邏輯較復(fù)雜，建議放到外部文件引入垮耳。

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

當標簽的 href 屬性為空颈渊，或、终佛、標簽的 src 屬性為空時俊嗽，瀏覽器在渲染的過程中仍會將 href 屬性或 src 屬性中的空內(nèi)容進行加載，直至加載失敗铃彰，這樣就阻塞了頁面中其他資源的下載進程绍豁，而且最終加載到的內(nèi)容是無效的，因此要盡量避免牙捉。

5．為 HTML 指定 Cache-Control 或 Expires

為 HTML 內(nèi)容設(shè)置 Cache-Control 或 Expires 可以將 HTML 內(nèi)容緩存起來竹揍，避免頻繁向服務(wù)器端發(fā)送請求。前面講到邪铲，在頁面 Cache-Control 或 Expires 頭部有效時芬位，瀏覽器將直接從緩存中讀取內(nèi)容，不向服務(wù)器端發(fā)送請求带到。

6．合理設(shè)置 Etag 和 Last-Modified

合理設(shè)置 Etag 和 Last-Modified 使用瀏覽器緩存昧碉，對于未修改的文件，靜態(tài)資源服務(wù)器會向瀏覽器端返回 304揽惹，讓瀏覽器從緩存中讀取文件晌纫，減少 Web 資源下載的帶寬消耗并降低服務(wù)器負載。

7．減少頁面重定向

頁面每次重定向都會延長頁面內(nèi)容返回的等待延時永丝，一次重定向大約需要 200 毫秒不等的時間開銷（無緩存）锹漱，為了保證用戶盡快看到頁面內(nèi)容，要盡量避免頁面重定向慕嚷。

8．使用靜態(tài)資源分域存放來增加下載并行數(shù)

瀏覽器在同一時刻向同一個域名請求文件的并行下載數(shù)是有限的哥牍，因此可以利用多個域名的主機來存放不同的靜態(tài)資源，增大頁面加載時資源的并行下載數(shù)喝检，縮短頁面資源加載的時間嗅辣。通常根據(jù)多個域名來分別存儲 JavaScript、CSS 和圖片文件挠说。

9．使用靜態(tài)資源 CDN 來存儲文件

如果條件允許澡谭，可以利用 CDN 網(wǎng)絡(luò)加快同一個地理區(qū)域內(nèi)重復(fù)靜態(tài)資源文件的響應(yīng)下載速度，縮短資源請求時間损俭。

10．使用 CDN Combo 下載傳輸內(nèi)容

CDN Combo 是在 CDN 服務(wù)器端將多個文件請求打包成一個文件的形式來返回的技術(shù)蛙奖，這樣可以實現(xiàn) HTTP 連接傳輸?shù)囊淮涡詮?fù)用潘酗，減少瀏覽器的 HTTP 請求數(shù)，加快資源下載速度雁仲。例如同一個域名 CDN 服務(wù)器上的 a.js仔夺，b.js，c.js 就可以按如下方式在一個請求中下載攒砖。

11．使用可緩存的 AJAX

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

12．使用 GET 來完成 AJAX 請求

使用 XMLHttpRequest 時惰蜜，瀏覽器中的 POST 方法會發(fā)起兩次 TCP 數(shù)據(jù)包傳輸，首先發(fā)送文件頭受神，然后發(fā)送 HTTP 正文數(shù)據(jù)蝎抽。而使用 GET 時只發(fā)送頭部，所以在拉取服務(wù)端數(shù)據(jù)時使用 GET 請求效率更高路克。

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

HTTP 請求通常默認帶上瀏覽器端的 Cookie 一起發(fā)送給服務(wù)器樟结，所以在非必要的情況下，要盡量減少 Cookie 來減小 HTTP 請求的大小精算。對于靜態(tài)資源瓢宦，盡量使用不同的域名來存放，因為 Cookie 默認是不能跨域的灰羽，這樣就做到了不同域名下靜態(tài)資源請求的 Cookie 隔離驮履。

14．縮小 favicon.ico 并緩存

有利于 favicon.ico 的重復(fù)加載，因為一般一個 Web 應(yīng)用的 favicon.ico 是很少改變的廉嚼。

15．推薦使用異步 JavaScript 資源

異步的 JavaScript 資源不會阻塞文檔解析玫镐，所以允許在瀏覽器中優(yōu)先渲染頁面，延后加載腳本執(zhí)行怠噪。例如 JavaScript 的引用可以如下設(shè)置恐似，也可以使用模塊化加載機制來實現(xiàn)。

使用 async 時傍念，加載和渲染后續(xù)文檔元素的過程和 main.js 的加載與執(zhí)行是并行的矫夷。使用 defer 時，加載后續(xù)文檔元素的過程和 main.js 的加載是并行的憋槐，但是 main.js 的執(zhí)行要在頁面所有元素解析完成之后才開始執(zhí)行双藕。

16．消除阻塞渲染的 CSS 及 JavaScript

對于頁面中加載時間過長的 CSS 或 JavaScript 文件，需要進行合理拆分或延后加載阳仔，保證關(guān)鍵路徑的資源能快速加載完成忧陪。

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

CSS 中的＠import可以從另一個樣式文件中引入樣式，但應(yīng)該避免這種用法，因為這樣會增加 CSS 資源加載的關(guān)鍵路徑長度嘶摊，帶有＠import的 CSS 樣式需要在 CSS 文件串行解析到@import時才會加載另外的 CSS 文件延蟹，大大延后 CSS 渲染完成的時間。

頁面渲染類

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

一般推薦將所有 CSS 資源盡早指定在 HTML 文檔中更卒，這樣瀏覽器可以優(yōu)先下載 CSS 并盡早完成頁面渲染等孵。

2．JavaScript 資源引用放到 HTML 文件底部

JavaScript 資源放到 HTML 文檔底部可以防止 JavaScript 的加載和解析執(zhí)行對頁面渲染造成阻塞稚照。由于 JavaScript 資源默認是解析阻塞的蹂空，除非被標記為異步或者通過其他的異步方式加載，否則會阻塞 HTML DOM 解析和 CSS 渲染的過程果录。

3．盡量預(yù)先設(shè)定圖片等大小

在加載大量的圖片元素時上枕，盡量預(yù)先限定圖片的尺寸大小，否則在圖片加載過程中會更新圖片的排版信息弱恒，產(chǎn)生大量的重排

4．不要在 HTML 中直接縮放圖片

在 HTML 中直接縮放圖片會導(dǎo)致頁面內(nèi)容的重排重繪辨萍，此時可能會使頁面中的其他操作產(chǎn)生卡頓，因此要盡量減少在頁面中直接進行圖片縮放返弹。

5．減少 DOM 元素數(shù)量和深度

HTML 中標簽元素越多锈玉，標簽的層級越深，瀏覽器解析 DOM 并繪制到瀏覽器中所花的時間就越長义起，所以應(yīng)盡可能保持 DOM 元素簡潔和層級較少拉背。

6．盡量避免在選擇器末尾添加通配符

CSS 解析匹配到 渲染樹的過程是從右到左的逆向匹配，在選擇器末尾添加通配符至少會增加一倍多計算量默终。

7．減少使用關(guān)系型樣式表的寫法

直接使用唯一的類名即可最大限度的提升渲染引擎繪制渲染樹等效率

8．盡量減少使用 JS 動畫

JS 直接操作 DOM 極容易引起頁面的重排

9．CSS 動畫使用 translate椅棺、scale 代替 top、height

盡量使用 CSS3 的 translate齐蔽、scale 屬性代替 top两疚、left 和 height、width含滴，避免大量的重排計算

10．盡量避免使用诱渤、<table>、<rameif>

<table>內(nèi)容的渲染是將 table 的 DOM 渲染樹全部生成完并一次性繪制到頁面上的谈况，所以在長表格渲染時很耗性能源哩，應(yīng)該盡量避免使用它，可以考慮使用列表元素<ul>代替鸦做。盡量使用異步的方式動態(tài)添加 iframe励烦，因為 iframe 內(nèi)資源的下載進程會阻塞父頁面靜態(tài)資源的下載與 CSS 及 HTML DOM 的解析。

11．避免運行耗時的 JavaScript

長時間運行的 JavaScript 會阻塞瀏覽器構(gòu)建 DOM 樹泼诱、DOM 渲染樹坛掠、渲染頁面。所以，任何與頁面初次渲染無關(guān)的邏輯功能都應(yīng)該延遲加載執(zhí)行屉栓，這和 JavaScript 資源的異步加載思路是一致的舷蒲。

12．避免使用 CSS 表達式或 CSS 濾鏡

CSS 表達式或 CSS 濾鏡的解析渲染速度是比較慢的，在有其他解決方案的情況下應(yīng)該盡量避免使用友多。