瀏覽器基礎知識

2022-07-13 10:33:06 字數 979 閱讀 5393

web瀏覽器的主要功能是展示網頁資源,即請求伺服器並將結果展示在視窗中。工作原理大概如下:

瀏覽器與對應web伺服器建立tcp連線,並傳送http請求,web伺服器接收到請求後進行一系列分析處理(關於http請求響應的詳細過程以後再進行剖析)並返回html檔案。

瀏覽器接收到伺服器返回的html檔案,解析標籤:

接著,瀏覽器開始解析裡的內容:

關於瀏覽器的渲染原理,這裡有篇流傳很廣很不錯的文章——《how browsers work》(英文版,中文翻譯版),就不細說了。簡要分析幾點:

1. 使用者介面——包括位址列、後退/前進按鈕、書籤目錄等,也就是你所看到的除了用來顯示你所請求頁面的主視窗之外的其他部分。

2. 瀏覽器引擎——用來查詢及操作渲染引擎的介面。

3. 渲染引擎——用來顯示請求的內容,例如,如果請求內容為html,它負責解析html及css,並將解析後的結果顯示出來。

4. 網路——用來完成網路呼叫,例如http請求,它具有平台無關的介面,可以在不同平台上工作。

5. ui後端——用來繪製類似組合選擇框及對話方塊等基本元件,具有不特定於某個平台的通用介面,底層使用作業系統的使用者介面。

6. js直譯器——用來解釋執行js**。

7. 資料儲存——屬於持久層,瀏覽器需要在硬碟中儲存類似cookie的各種資料,html5定義了web database技術,這是一種輕量級完整的客戶端儲存技術。

圖1:瀏覽器主要元件

chrome為每個tab分配了各自的渲染引擎例項,每個tab就是乙個獨立的程序。

瀏覽器渲染過程中經常伴隨著reflow和repaint,如果只是改變某個元素的背景色、文字顏色等不影響dom布局的屬性時會引起瀏覽器進行repaint,相對而言,如果改變影響dom布局的屬性時就會引起瀏覽器進行reflow,而reflow比repaint開銷要大很多,因此應盡量避免。

核心基礎知識 瀏覽器快取

想要加快瀏覽器載入網路資源的速度,可以通過減少響應內容大小,比如使用 gzip 演算法壓縮響應體內容和 http 2 的壓縮頭部功能 另一種更通用也更為重要的技術就是使用快取。web 快取按儲存位置來區分,包括資料庫快取 服務端快取 cdn 快取和瀏覽器快取。瀏覽器快取的實現方式主要有兩種 http...

瀏覽器渲染相關知識

1 瀏覽器渲染原理 2 瀏覽器渲染過程 1 渲染引擎解析html生成dom樹 讀取html,將位元組轉換成字元,確定標籤,再將標籤轉換成節點,以節點構建dom 2 解析css樣式成css規則樹 讀取css檔案,將位元組轉換成字元,確定標籤,將標籤轉換成節點,構建css規則樹 3 根據dom樹和css...

面試知識 瀏覽器(web)

1.https和http的區別主要如下 1 https協議需要到ca申請證書,一般免費證書較少,因而需要一定費用。2 http是超文字傳輸協議,資訊是明文傳輸,https則是具有安全性的ssl加密傳輸協議。3 http和https使用的是完全不同的連線方式,用的埠也不一樣,前者是80,後者是443。...