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

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

相關(guān)推薦

　　1.盡量減少 HTTP 請求

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

　　2.使用 CDN

　　3.添加 Expires 頭

　　4.采用 Gzip 壓縮組件

　　5.將樣式表放在頂部

　　6.將腳本放在底部

　　7.避免 CSS 表達式

　　8.使用外部的 javascript 和 CSS

　　9.減少 DNS 查詢(xún)

　　10.精簡(jiǎn) javascript

　　11.避免重定向

　　12.刪除重復的腳本

　　13.配置 ETag

　　14.使 Ajax 可緩存

　　下面是一些基本總結：

　　一、理解 Ajax 性能

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

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

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

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

　　如何定義快速呢？

　　javascript 代碼執行時(shí)間超過(guò) 0.1 秒，頁(yè)面會(huì )給人不夠平滑快捷的感覺(jué)；執行時(shí)間超過(guò) 1秒，則會(huì )感到應用程序緩慢；超過(guò) 10 秒，用戶(hù)會(huì )非常沮喪。

　　javascript 是單線(xiàn)程的！

　　在頁(yè)面上任何開(kāi)銷(xiāo)很大的（例如，長(cháng)時(shí)間運行）javascript 操作都應該委托給 Web Worker。

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

　　內存對響應時(shí)間的影響：

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

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

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

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

　　2.從 DOM 樹(shù)中移除不再是必須的節點(diǎn)

　　三、拆分初始化負載

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

　　四、無(wú)阻塞加載腳本

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

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

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

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

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

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

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

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

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

　　五、布置行內腳本

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

　　六、編寫(xiě)高效的 javascript

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

　　存儲和讀取數據的方式對腳本的性能影響很大。局部變量和字面量總是最快的，存取數組元素和對象屬性會(huì )引起性能損耗。如果數組元素或對象的屬性使用超過(guò)一次，那么為了提高存取速度，應該把它存儲到一個(gè)局部變量中。

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

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

　　謹慎的使用 DOM 中的 HTML nodelist 對象，每次存取這類(lèi)對象的屬性，都會(huì )重新查詢(xún) DOM 中的匹配節點(diǎn)。為了避免這種高昂的開(kāi)銷(xiāo)，只有必要時(shí)才存取 nodelist 對象，并將經(jīng)常存取的值存儲在局部變量中。例如，當用 for 遍歷通過(guò) getElementsByTagName 得到的 nodelist 對象時(shí)，應該把 nodelist 的 length 賦值給一個(gè)局部變量。

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

　　七、超越Gzip壓縮

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

　　Accept-Encoding: gzip, deflate

　　當請求中包含這個(gè)頭時(shí)， web 服務(wù)器就會(huì )開(kāi)啟 Gzip 壓縮功能。

　　八、圖像優(yōu)化

　　各種圖片格式介紹

　　GIF：

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

　　2.支持動(dòng)畫(huà)

　　3.是無(wú)損格式

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