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