Web前端性能

時間 2019-11-08

標籤 web 前端性能欄目 HTML 简体版

原文原文鏈接

6.1前端性能示例

性能測試工具：前端

Apache Benchmark（ab）獲得的響應時間僅爲從請求發出開始到接收到HTML的最後一個字節所消耗的所有時間。ab命令行以下：web

ab -c 【併發用戶數】 -n 【發出請求數量】【被測試頁面的URL】瀏覽器

FireBug：緩存

DOMContentLoaded事件：當初始的 HTML 文檔被徹底加載和解析完成以後，DOMContentLoaded 事件被觸發，而無需等待樣式表、圖像和子框架的完成加載。服務器

onload事件：在頁面和圖片加載完成後加載。網絡

對Web應用前端性能的研究不是爲了準確地獲得一個響應時間數據，實際上，Web性能一部分取決於Web服務器和應用服務器（創建鏈接/下載資源文件），另外一部分取決於瀏覽器的實際機制/Web頁面上的JS文件執行等。取決於web服務和應用服務器的響應時間與服務器的負載和壓力相關；而取決於瀏覽器實現機制與JS文件執行所須要的時間則幾乎與服務器負載和壓力無關。對於後者的研究正是本章所探討的內容要逃的目的不是獲得這部分響應時間的準確數據，而是拖動更好的web應用的前端性能，減小總響應時間。併發

6.2HTTP概要

HTTP用於傳輸WWW方式的數據，該協議採用了請求/響應模型。HTTP協議自己是一種非面向鏈接的協議，每一個HTTP請求之間都是獨立的。框架

6.2.1HTTP協議結構

1.請求報文格式前端性能

請求報文格式以下：函數

請求行爲的格式：

Method 【分隔符】Request -URI 【分隔符】HTTP-VersionCRLF

http報文主體包含了HTTP請求的內容。對於GET等方法來講，報文主體爲空；對於POST方法來講，報文主體則包含須要發送給服務器的數據。

2.響應報文的格式

響應報文的格式以下：

響應報文狀態碼：

1XX：信息響應類，表示接受到請求而且繼續處理。

2XX：處理成功響應類，表示動做被成功接收、理解和接受。

3XX：重定向響應，表示完成指定的動做，必須接受進一步處理。

4XX：客戶端錯誤，表示客戶請求包含語法錯誤或不能正確執行。

5XX：服務端錯誤，表示服務器不能正確執行一個正確的請求。

響應頭則給出了服務器自己的一些信息，返回HTML或其餘數據內容包含在報文主體中。

6.2.3與前端性能相關的頭信息

1.Accept-Encoding

Accept-Encoding是瀏覽器發出的請求頭中包含的頭信息域之一，用於告訴服務器所接受的頁面文件的編輯方式，如Accept-Encoding：gzip，deflate就是告訴服務器，瀏覽器可以接受不壓縮和使用gzip兩種方式的頁面內容。頁面壓縮和不壓縮到底可以帶來多大的性能差距？壓縮可以大大提升瀏覽器性能。

⚠️：目前主流瀏覽器都是支持對頁面的gzip壓縮方式的，所以在服務端須要確保返回的頁面在這種狀況下已經進行gzip壓縮。

2.Connection

HTTP協議是一種非面向鏈接的、無狀態的協議。當Connection的值設定爲keep-alive時，瀏覽器與服務器之間約定使用持久鏈接。

3.Expires

HTTP響應數據頭中包含一個Expires域，該域的值用於指示返回數據到期時間。⚠️瀏覽器緩存機制：Expires頭給出的信息就是依據：噹噹前時間小於Expires指定的時間時，瀏覽器從緩存中直接獲取相應的資源文件或HTML文檔；而噹噹前時間大於Expires指定時間時，瀏覽器向服務器發送請求獲取該資源。