高性能網(wǎng)站建設(shè)指南>是一本非常有人氣的講解Web優(yōu)化的書(shū)籍,本文就根據(jù)書(shū)中對(duì)前端的一些經(jīng)驗(yàn)分享作了網(wǎng)站W(wǎng)eb端訪問(wèn)性能提升技巧總結(jié),需要的朋友可以參考下
《高性能網(wǎng)站建設(shè)指南》這本書(shū)里為Web性能提升設(shè)置了14條規(guī)則：
1.盡量減少 HTTP 請(qǐng)求
2.使用 CDN
3.添加 Expires 頭
4.采用 Gzip 壓縮組件
5.將樣式表放在頂部
6.將腳本放在底部
7.避免 CSS 表達(dá)式
8.使用外部的 javascript 和 CSS
9.減少 DNS 查詢(xún)
10.精簡(jiǎn) javascript
11.避免重定向
12.刪除重復(fù)的腳本
13.配置 ETag
14.使 Ajax 可緩存
下面是一些基本總結(jié)：
一、 理解 Ajax 性能
做性能優(yōu)化時(shí)，不要浪費(fèi)時(shí)間去嘗試為那些不消耗大量時(shí)間的代碼提速。
通常瀏覽器在運(yùn)行javascript上花費(fèi)的時(shí)間很少，絕大部分時(shí)間消耗在 DOM 上。
Ajax 提供了取代頁(yè)面替換的有效方案，善加利用 Ajax 能使應(yīng)用程序運(yùn)行的更快。
二、 創(chuàng)建快速響應(yīng)的 WEB 應(yīng)用
如何定義快速呢？
javascript 代碼執(zhí)行時(shí)間超過(guò) 0.1 秒，頁(yè)面會(huì)給人不夠平滑快捷的感覺(jué)；執(zhí)行時(shí)間超過(guò) 1秒，則會(huì)感到應(yīng)用程序緩慢；超過(guò) 10 秒，用戶(hù)會(huì)非常沮喪。
javascript 是單線程的！
在頁(yè)面上任何開(kāi)銷(xiāo)很大的（例如，長(zhǎng)時(shí)間運(yùn)行）javascript 操作都應(yīng)該委托給 Web Worker。
在 XMLHttpRequest 的異步模式中，XHR 實(shí)質(zhì)上就是一個(gè)擁有專(zhuān)用 API 的 Web Worker。
內(nèi)存對(duì)響應(yīng)時(shí)間的影響：
1.在 GC 執(zhí)行回收時(shí)，會(huì)凍結(jié)整個(gè)運(yùn)行環(huán)境，直到遍歷完整個(gè)創(chuàng)建對(duì)象的“堆”。隨著應(yīng)用程序內(nèi)存占用的增加，遍歷整個(gè)堆去查找用戶(hù)不再使用的對(duì)象所需要的時(shí)間最終會(huì)引起用戶(hù)的注意。
2.網(wǎng)頁(yè)內(nèi)存需求增長(zhǎng)到足夠大，迫使操作系統(tǒng)開(kāi)始內(nèi)存分頁(yè)，系統(tǒng)把內(nèi)存頁(yè)從物理內(nèi)存轉(zhuǎn)移到虛擬內(nèi)存（例如從 RAM 到硬盤(pán)）。
如果確定內(nèi)存有問(wèn)題，可以通過(guò)以下兩種方式清理內(nèi)存：
1.使用 delete 關(guān)鍵字從內(nèi)存中移除不再需要的 javascript 對(duì)象
2.從 DOM 樹(shù)中移除不再是必須的節(jié)點(diǎn)
三、拆分初始化負(fù)載
可以把 javascript 代碼拆分到不同的組，第一組包含初始化頁(yè)面所必須的函數(shù)，剩下的則在這些代碼需要執(zhí)行時(shí)按需加載它們，或者等到初始化的那些 javascript 代碼加載完畢時(shí)再加載。
四、 無(wú)阻塞加載腳本
瀏覽器在下載和解析 javascript 腳本時(shí)，不僅會(huì)阻塞頁(yè)面中其他內(nèi)容的下載，還會(huì)阻塞腳本后面所有元素的渲染。
瀏覽器在下載和執(zhí)行腳本時(shí)出現(xiàn)阻塞的原因在于，腳本可能會(huì)改變頁(yè)面或 javascript 的命名空間。
很顯然 javascript 腳本沒(méi)有必要按順序下載，這方面 IE8 走在了前面，IE8 是第一個(gè)支持腳本并行下載的瀏覽器。
下面列出異步加載腳本的技術(shù)：
1.XHR eval：該技術(shù)用過(guò) XHR 從服務(wù)器獲得腳本，然后通過(guò) eval 執(zhí)行腳本內(nèi)容。
2.XHR 注入：類(lèi)似于 XHR eval，但是與 eval 不同的是，該機(jī)制是通過(guò)創(chuàng)建一個(gè) script 的 DOM 元素，然后把 XHR 的響應(yīng)注入到 script 中執(zhí)行 javascript。
3.Script DOM Element：該技術(shù)使用 javascript 動(dòng)態(tài)創(chuàng)建 script DOM 元素并設(shè)置其 src 屬性。下載過(guò)程中用這種方式創(chuàng)建腳本不會(huì)阻塞其他組件。和前面的技術(shù)相比，該技術(shù)允許跨域獲取腳本。
4.Script defer 屬性：HTML 4 為 script 標(biāo)簽定義了一個(gè)擴(kuò)展屬性：defer。帶有 defer 屬性的 JavaScript 文件下載時(shí)，它不會(huì)阻塞瀏覽器的其他進(jìn)程，因此這類(lèi)文件可以與其他資源文件一起并行下載。帶有 defer 屬性的 script 標(biāo)簽可以放置在文檔的任何位置。對(duì)應(yīng)的 JavaScript 文件將在頁(yè)面解析到 script 標(biāo)簽時(shí)開(kāi)始下載，但不會(huì)執(zhí)行，直到 DOM 加載完成，即onload事件觸發(fā)前才會(huì)被執(zhí)行。但是，defer 屬性只被 IE 4 和 Firefox 3.5 更高版本的瀏覽器所支持，所以它不是一個(gè)理想的跨瀏覽器解決方案。
Script async 屬性：HTML 5 為 script 標(biāo)簽定義了一個(gè)新的擴(kuò)展屬性：async。它的作用和 defer 一樣，能夠異步地加載和執(zhí)行腳本，不因?yàn)榧虞d腳本而阻塞頁(yè)面的加載。但是有一點(diǎn)需要注意，在有 async 的情況下，JavaScript 腳本一旦下載好了就會(huì)執(zhí)行，所以很有可能不是按照原本的順序來(lái)執(zhí)行的。如果 JavaScript 腳本前后有依賴(lài)性，使用 async 就很有可能出現(xiàn)錯(cuò)誤。
五、 布置行內(nèi)腳本
在樣式表后面的行內(nèi)腳本會(huì)阻塞所有后續(xù)資源的下載，解決該問(wèn)題的方法是調(diào)整行內(nèi)腳本的位置，使其不出現(xiàn)在樣式表和任何其他資源之間。
六、 編寫(xiě)高效的 javascript
盡量避免使用會(huì)增長(zhǎng)作用域鏈的結(jié)構(gòu)，比如使用 with 語(yǔ)句和 try-catch 語(yǔ)句中的 catch 從句。如果非局部變量的使用超過(guò)一次，那么為了降低性能損耗，應(yīng)該把它存儲(chǔ)到一個(gè)局部變量中。例如，如果函數(shù)中多次訪問(wèn)處于作用域鏈底層的document，可以把 document 賦值給一個(gè)局部變量，從而減少降低在作用域鏈中搜索變量的時(shí)間。
存儲(chǔ)和讀取數(shù)據(jù)的方式對(duì)腳本的性能影響很大。局部變量和字面量總是最快的，存取數(shù)組元素和對(duì)象屬性會(huì)引起性能損耗。如果數(shù)組元素或?qū)ο蟮膶傩允褂贸^(guò)一次，那么為了提高存取速度，應(yīng)該把它存儲(chǔ)到一個(gè)局部變量中。
在 javascript 中，循環(huán)經(jīng)常成為性能瓶頸，為了使循環(huán)高效，可以使用倒序的方式來(lái)處理元素，即在控制條件中，將迭代變量和 0 作比較。
流控制也是影響腳本執(zhí)行速度的一個(gè)重要因素。if 語(yǔ)句適用于少量離散值或一段區(qū)間值的判斷；switch 語(yǔ)句最好用于 3~10 個(gè)離散值的判斷。
謹(jǐn)慎的使用 DOM 中的 HTML nodelist 對(duì)象，每次存取這類(lèi)對(duì)象的屬性，都會(huì)重新查詢(xún) DOM 中的匹配節(jié)點(diǎn)。為了避免這種高昂的開(kāi)銷(xiāo)，只有必要時(shí)才存取 nodelist 對(duì)象，并將經(jīng)常存取的值存儲(chǔ)在局部變量中。例如，當(dāng)用 for 遍歷通過(guò) getElementsByTagName 得到的 nodelist 對(duì)象時(shí)，應(yīng)該把 nodelist 的 length 賦值給一個(gè)局部變量。
如果 javascript 代碼運(yùn)行時(shí)間過(guò)長(zhǎng)，可以使用定時(shí)器把任務(wù)拆分執(zhí)行。
七、 超越Gzip壓縮
所有的瀏覽器都支持 Gzip壓縮，并可以通過(guò)添加 Accept-Encoding 的 http 頭來(lái)向 web 服務(wù)器聲明支持壓縮：
Accept-Encoding: gzip, deflate
當(dāng)請(qǐng)求中包含這個(gè)頭時(shí)， web 服務(wù)器就會(huì)開(kāi)啟 Gzip 壓縮功能。
八、 圖像優(yōu)化
各種圖片格式介紹
GIF：
1.只支持二進(jìn)制透明（要么完全透明，要么完全不透明）
2.支持動(dòng)畫(huà)
3.是無(wú)損格式
4.gif 有 256 色的限制，不適合顯示照片
JPEG：
1.不支持透明
2.不支持動(dòng)畫(huà)
3.是有損格式，壓縮比很高，適合顯示照片
PNG：
1.支持 alpha 透明
2.不支持動(dòng)畫(huà)
3.是無(wú)損格式
4.不是動(dòng)畫(huà)時(shí)，應(yīng)該盡可能 使用 png8（調(diào)色板png） 代替 gif。
圖像優(yōu)化建議
1.首先要選擇合適的格式：用 jpeg 保存照片，用 gif 保存動(dòng)畫(huà)，其他所有圖像用 png 保存，并且盡量使用 png8
2.不要在 html 中對(duì)圖像進(jìn)行縮放
3.不要忘了 favicons
4.使用并優(yōu)化 css sprite
九、 劃分主域
IE6、7等老瀏覽器把從同一個(gè)服務(wù)器并行下載的資源數(shù)限制為2個(gè)，IE8、firefox和chrome增加到了6個(gè)。
瀏覽器執(zhí)行 “每個(gè)服務(wù)器端最大連接數(shù)” 的限制是根據(jù) URL 上的主機(jī)名，而不是解析出來(lái)的 IP 地址。
可以把網(wǎng)頁(yè)中的資源放在不同的服務(wù)器上，加速資源的下載。
十、 少用 iframe
使用 iframe 會(huì)帶來(lái)的問(wèn)題：
iframe 是開(kāi)銷(xiāo)最高的 DOM 元素，創(chuàng)建 iframe 的開(kāi)銷(xiāo)比創(chuàng)建其他類(lèi)型的 DOM 元素要高 1~2 個(gè)數(shù)量級(jí)。
使用 iframe 會(huì)阻塞頁(yè)面的 onload 事件，延長(zhǎng)了瀏覽器的忙指示。
雖然 iframe 是一個(gè)完全獨(dú)立的文檔，瀏覽器也會(huì)共享對(duì)每個(gè)瀏覽器的受限連接數(shù)（IE8、chrome為6個(gè)）
十一、 簡(jiǎn)化 CSS 選擇符
CSS 的選擇符類(lèi)型（從開(kāi)銷(xiāo)最小到最大排序）：
1.ID 選擇符#
2.類(lèi)選擇符.
3.類(lèi)型選擇符
4.相鄰兄弟選擇符 +
5.子選擇符
6.后代選擇符
7.通配符選擇符
8.屬性選擇符
9.偽類(lèi)
公考類(lèi)
招聘類(lèi)
各類(lèi)考試
公眾號(hào)
事業(yè)單位
當(dāng)前位置：