網(wǎng)站W(wǎng)eb端訪問性能的提升技巧總結(jié)

時間：2024-10-27 08:22:49 Web Services 我要投稿

相關(guān)推薦

　　1.盡量減少 HTTP 請求

網(wǎng)站W(wǎng)eb端訪問性能的提升技巧總結(jié)

　　2.使用 CDN

　　3.添加 Expires 頭

　　4.采用 Gzip 壓縮組件

　　5.將樣式表放在頂部

　　6.將腳本放在底部

　　7.避免 CSS 表達(dá)式

　　8.使用外部的 javascript 和 CSS

　　9.減少 DNS 查詢

　　10.精簡 javascript

　　11.避免重定向

　　12.刪除重復(fù)的腳本

　　13.配置 ETag

　　14.使 Ajax 可緩存

　　下面是一些基本總結(jié)：

　　一、理解 Ajax 性能

　　做性能優(yōu)化時，不要浪費時間去嘗試為那些不消耗大量時間的代碼提速。

　　通常瀏覽器在運行javascript上花費的時間很少，絕大部分時間消耗在 DOM 上。

　　Ajax 提供了取代頁面替換的有效方案，善加利用 Ajax 能使應(yīng)用程序運行的更快。

　　二、創(chuàng)建快速響應(yīng)的 WEB 應(yīng)用

　　如何定義快速呢？

　　javascript 代碼執(zhí)行時間超過 0.1 秒，頁面會給人不夠平滑快捷的感覺；執(zhí)行時間超過 1秒，則會感到應(yīng)用程序緩慢；超過 10 秒，用戶會非常沮喪。

　　javascript 是單線程的！

　　在頁面上任何開銷很大的（例如，長時間運行）javascript 操作都應(yīng)該委托給 Web Worker。

　　在 XMLHttpRequest 的異步模式中，XHR 實質(zhì)上就是一個擁有專用 API 的 Web Worker。

　　內(nèi)存對響應(yīng)時間的影響：

　　1.在 GC 執(zhí)行回收時，會凍結(jié)整個運行環(huán)境，直到遍歷完整個創(chuàng)建對象的“堆”。隨著應(yīng)用程序內(nèi)存占用的增加，遍歷整個堆去查找用戶不再使用的對象所需要的時間最終會引起用戶的注意。

　　2.網(wǎng)頁內(nèi)存需求增長到足夠大，迫使操作系統(tǒng)開始內(nèi)存分頁，系統(tǒng)把內(nèi)存頁從物理內(nèi)存轉(zhuǎn)移到虛擬內(nèi)存（例如從 RAM 到硬盤）。

　　如果確定內(nèi)存有問題，可以通過以下兩種方式清理內(nèi)存：

　　1.使用關(guān)鍵字從內(nèi)存中移除不再需要的 javascript 對象

　　2.從 DOM 樹中移除不再是必須的節(jié)點

　　三、拆分初始化負(fù)載

　　可以把 javascript 代碼拆分到不同的組，第一組包含初始化頁面所必須的函數(shù)，剩下的則在這些代碼需要執(zhí)行時按需加載它們，或者等到初始化的那些 javascript 代碼加載完畢時再加載。

　　四、無阻塞加載腳本

　　瀏覽器在下載和解析 javascript 腳本時，不僅會阻塞頁面中其他內(nèi)容的下載，還會阻塞腳本后面所有元素的渲染。

　　瀏覽器在下載和執(zhí)行腳本時出現(xiàn)阻塞的原因在于，腳本可能會改變頁面或 javascript 的命名空間。

　　很顯然 javascript 腳本沒有必要按順序下載，這方面 IE8 走在了前面，IE8 是第一個支持腳本并行下載的瀏覽器。

　　下面列出異步加載腳本的技術(shù)：

　　1.XHR eval：該技術(shù)用過 XHR 從服務(wù)器獲得腳本，然后通過 eval 執(zhí)行腳本內(nèi)容。

　　2.XHR 注入：類似于 XHR eval，但是與 eval 不同的是，該機(jī)制是通過創(chuàng)建一個 script 的 DOM 元素，然后把 XHR 的響應(yīng)注入到 script 中執(zhí)行 javascript。

　　3.Script DOM Element：該技術(shù)使用 javascript 動態(tài)創(chuàng)建 script DOM 元素并設(shè)置其 src 屬性。下載過程中用這種方式創(chuàng)建腳本不會阻塞其他組件。和前面的技術(shù)相比，該技術(shù)允許跨域獲取腳本。

　　4.Script defer 屬性：HTML 4 為 script 標(biāo)簽定義了一個擴(kuò)展屬性：defer。帶有 defer 屬性的 JavaScript 文件下載時，它不會阻塞瀏覽器的其他進(jìn)程，因此這類文件可以與其他資源文件一起并行下載。帶有 defer 屬性的 script 標(biāo)簽可以放置在文檔的任何位置。對應(yīng)的 JavaScript 文件將在頁面解析到 script 標(biāo)簽時開始下載，但不會執(zhí)行，直到 DOM 加載完成，即onload事件觸發(fā)前才會被執(zhí)行。但是，defer 屬性只被 IE 4 和 Firefox 3.5 更高版本的瀏覽器所支持，所以它不是一個理想的跨瀏覽器解決方案。

　　Script async 屬性：HTML 5 為 script 標(biāo)簽定義了一個新的擴(kuò)展屬性：async。它的作用和 defer 一樣，能夠異步地加載和執(zhí)行腳本，不因為加載腳本而阻塞頁面的加載。但是有一點需要注意，在有 async 的情況下，JavaScript 腳本一旦下載好了就會執(zhí)行，所以很有可能不是按照原本的順序來執(zhí)行的。如果 JavaScript 腳本前后有依賴性，使用 async 就很有可能出現(xiàn)錯誤。

　　五、布置行內(nèi)腳本

　　在樣式表后面的行內(nèi)腳本會阻塞所有后續(xù)資源的下載，解決該問題的方法是調(diào)整行內(nèi)腳本的位置，使其不出現(xiàn)在樣式表和任何其他資源之間。

　　六、編寫高效的 javascript

　　盡量避免使用會增長作用域鏈的結(jié)構(gòu)，比如使用 with 語句和 try-catch 語句中的 catch 從句。如果非局部變量的使用超過一次，那么為了降低性能損耗，應(yīng)該把它存儲到一個局部變量中。例如，如果函數(shù)中多次訪問處于作用域鏈底層的document，可以把 document 賦值給一個局部變量，從而減少降低在作用域鏈中搜索變量的時間。

　　存儲和讀取數(shù)據(jù)的方式對腳本的性能影響很大。局部變量和字面量總是最快的，存取數(shù)組元素和對象屬性會引起性能損耗。如果數(shù)組元素或?qū)ο蟮膶傩允褂贸^一次，那么為了提高存取速度，應(yīng)該把它存儲到一個局部變量中。

　　在 javascript 中，循環(huán)經(jīng)常成為性能瓶頸，為了使循環(huán)高效，可以使用倒序的方式來處理元素，即在控制條件中，將迭代變量和 0 作比較。

　　流控制也是影響腳本執(zhí)行速度的一個重要因素。if 語句適用于少量離散值或一段區(qū)間值的判斷；switch 語句最好用于 3~10 個離散值的判斷。

　　謹(jǐn)慎的使用 DOM 中的 HTML nodelist 對象，每次存取這類對象的屬性，都會重新查詢 DOM 中的匹配節(jié)點。為了避免這種高昂的開銷，只有必要時才存取 nodelist 對象，并將經(jīng)常存取的值存儲在局部變量中。例如，當(dāng)用 for 遍歷通過 getElementsByTagName 得到的 nodelist 對象時，應(yīng)該把 nodelist 的 length 賦值給一個局部變量。

　　如果 javascript 代碼運行時間過長，可以使用定時器把任務(wù)拆分執(zhí)行。

　　七、超越Gzip壓縮

　　所有的瀏覽器都支持 Gzip壓縮，并可以通過添加 Accept-Encoding 的 http 頭來向 web 服務(wù)器聲明支持壓縮：

　　Accept-Encoding: gzip, deflate

　　當(dāng)請求中包含這個頭時， web 服務(wù)器就會開啟 Gzip 壓縮功能。

　　八、圖像優(yōu)化

　　各種圖片格式介紹

　　GIF：

　　1.只支持二進(jìn)制透明（要么完全透明，要么完全不透明）

　　2.支持動畫

　　3.是無損格式

　　4.gif 有 256 色的限制，不適合顯示照片