目錄

瀏覽器概述

主流瀏覽器：IE、Chrome、Firefox、Safari

Chrome

Firefox

IE

Safari

瀏覽器內核

核心職責

主流瀏覽器內核

JavaScript引擎

主流的JavaScript引擎

瀏覽器兼容性

瀏覽器渲染

渲染引擎的基本流程

DOM和render樹構建

html解析

DOM

渲染樹與DOM樹的關系

布局

繪制

瀏覽器緩存

靜態資源緩存-相關概念

靜態資源緩存-影響因素

控制靜態緩存

方式1：html中的緩存配置

方式2：容器緩存配置

緩存規劃

LocalStorage

LocalStorageAPI

SessionStorage

比較LocalStorage和SessionStorage

Cookies

---

瀏覽器概述

瀏覽器是指可以顯示網頁服務器或者文件系統的HTML文件內容，并且讓用戶與這些文件交互的軟件。

主流瀏覽器：IE、Chrome、Firefox、Safari

Chrome

Chrome是一款由Google公司開發的網頁瀏覽器，該瀏覽器基于其他開源軟件撰寫，目標是提升穩定性、速度和安全性，并創造出簡單且有效率的使用者界面。

Firefox

Mozilla Firefox，中文俗稱“火狐”（正式縮寫為Fx或fx，非正式縮寫為MF），是一個自由及開放源代碼的網頁瀏覽器，使用Gecko排版引擎，支持多種操作系統，如Windows、Mac OS X及GNU/Linux等。

IE

微軟公司推出的一款網頁瀏覽器。原稱IE(6版本以前)和IE(7、8、9、10、11版本)，簡稱IE。

Safari

Safari是蘋果計算機的操作系統Mac OS中的瀏覽器，使用了KDE的KHTML作為瀏覽器的運算核心。

瀏覽器內核

瀏覽器內核（排版引擎、渲染引擎）是瀏覽器的核心模塊，負責將網頁代碼轉換成用戶可見的頁面。

核心職責

1. 解析HTML/CSS ——構建DOM樹和CSSOM樹——合并成渲染樹
2. 布局——計算每個元素的位置和大小
3. 繪制——將元素繪制到屏幕
4. 處理JavaScript（部分內核包含獨立 JS引擎）

主流瀏覽器內核

內核	是否開源?	插件支持	應用瀏覽器	支持操作系統
Trident	否，提供接口調用	ActiveX	IE	windows
Gecko	是，多種協議授權發行，包括：MPL、GPL、LGPL	NPAPI	Firefox	windows，Mac，Linux/BSD
Blink	是	NPAPI	Chrome、Opera	windows，Mac，Linux/BSD
Webkit	是，遵循LGPL協議	NPAPI	Chrome、Safari	windows，Mac，Linux/BSD

JavaScript引擎

JavaScript引擎就是用來執行JS代碼的。

主流的JavaScript引擎

V8引擎是一個JavaScript引擎。JavaScript程序在V8引擎運行速度媲美二進制程序。

V8引擎支持眾多操作系統，如windows、Linux、Android等。

瀏覽器兼容性

瀏覽器兼容性問題又被稱為網頁兼容性或網站兼容性問題，指網頁在各種瀏覽器上顯示效果可能不一致而產生瀏覽器和網頁間兼容問題。

產生原因：

網頁瀏覽標準只規定了接口，并沒有接口實現的詳細規范，是的各瀏覽器對相同的功能使用了不同的實現方法。

瀏覽器版本實現上的差異，老版本瀏覽器不支持新的技術。

瀏覽器渲染

渲染引擎的基本流程

1. 解析生成DOM樹
2. 渲染
3. 布局
4. 繪制

DOM和render樹構建

html解析

詞法解析：將輸入內容分割成大量標記的過程。可以理解為講一段話分割成一個個的單詞。

語法分析：是應用語言的語法規則的過程。

DOM

解析器的輸出“解析樹”是由DOM元素和屬性節點構成的樹結構。

DOM是HTML文檔的對象表示，同時也是外部內容與HTML元素之間的接口。解析樹的根節點是“Document”對象。

DOM與標記之間幾乎是一一對應的關系。

渲染樹與DOM樹的關系

在WebKit中，解析樣式和創建呈現器的過程稱為“附加”，每個DOM節點都有一個attach方法，附加是同步進行的，將節點插入DOM樹需要調用新的節點attach方法。

處理html和body標記就會構建呈現樹根節點。這個根節點呈現對象對應于css規范中所說的容器block，這是最上層的block，包含了其他所有block。它的尺寸就是視口，即瀏覽器窗口顯示區域的尺寸。Firefox稱之為ViewportFrame，而WebKit稱之為RenderView，這就是文檔所指向的呈現對象。呈現樹的其余部分以DOM樹節點插入的形式來構建。

布局

呈現器在創建完成并添加到呈現樹時，并不包含位置和大小信息。計算這些值的過程稱為布局或重排。

布局是一個遞歸的過程。他從根呈現器開始，然后遞歸遍歷部分或所有的框架層次結構，為每一個需要計算的呈現器計算幾何信息。

繪制

在繪制階段，系統會遍歷呈現樹，并調用呈現器的paint方法，將呈現器的內容顯示在屏幕上。繪制工作使用用戶界面基礎組件完成的。

和布局一樣，繪制也分為全局和增量兩種。在增量繪制中，部分呈現器發生了更改，但是不會影響整個樹。

瀏覽器緩存

緩存：把數據或者內容，放到能夠更快訪問的位置。

靜態資源緩存-相關概念

概念：瀏覽器把靜態文件保留在本地的一種行為

內容：包括html、JS、css、圖片等文件

作用：實現對靜態資源更快的訪問

靜態資源緩存-影響因素

Expires：用于設置靜態資源的過期時間

Last-Modified/If-Modified-Since：標示這個相應資源的最后修改時間

Etag/If-None-Match：web服務器響應請求時，告訴瀏覽器當前資源在服務器的唯一標識

控制靜態緩存

方式1：html中的緩存配置

<meta http-equiv="expires" content="Mon,16  July 2025 00:00:00 GMT" />

用于這頂網頁的到期時間，一但過期則必須到服務器上重新調用。需要注意的是必須使用GMT時間格式。

<meta http-equiv="Pragma" content="no-cache" />

用于設定禁止瀏覽器從本地機的緩存中調閱頁面內容，設定后一但離開網頁就無法重新從Cache中調出。

方式2：容器緩存配置

以nginx為例進行配置，配置文件地址：nginx\conf\nginx.conf

緩存規劃

資源類型	是否緩存	緩存時間
html	是	協商緩存
自研js	是	30天
自研css	是	30天
圖片	是	30天
第三方js、css	是	180天

HTML做成協商緩存，即每次都去服務端咨詢是否有更新。

所有外聯的JS、css都增加文件hash戳，當文件內容變化時，此文件后綴也變化，變化后的文件總是從服務端重新讀取。

LocalStorage

LocalStorage時HTML5的一種本地緩存方案。主要用于儲存一些體積較大的數據。

LocalStorage有大小限制，各個瀏覽器限制不同，子啊2-5M之間

LocalStorageAPI

• 增加/修改：LocalStorage.setItem（key，value）
• 獲取：LocalStorage.getItem（key）
• 刪除：LocalStorage.removeItem（key）
• 清空：LocalStorage.clear（）

SessionStorage

SessionStorage是HTML5的一種本地緩存方案。

與LocalStorage相似，唯一的區別在于只對當前Session生效。

API與LocalStorage相同。

比較LocalStorage和SessionStorage

Web Storage	生命周期	作用域	儲存大小	數據同步	適用場景
LocalStorage	永久存儲	同源跨標簽頁共享	通常在5MB-10MB	同源窗口實時同步	1.長期存儲用戶的偏好 2.登錄狀態等
SessionStorage	會話級存儲	僅限當前標簽頁	通常在5MB-10MB	不共享	1.臨時儲存表單數據 2.單頁應用狀態等

Cookies

Cookies式網站為了辨別用戶身份或Session跟蹤而儲存在用戶瀏覽器端的數據。Cookies信息一般會通過HTTP請求發送到服務器端。

一條Cookies記錄主要有鍵、值、域、過期時間、大小組成。一般用于保存用戶的網站認證信息。

Cookies的最大長度為4KB

屬性	作用域	說明
name	必需	Cookie 的鍵名（區分大小寫）
value	必需	Cookie 的值（需 URL 編碼）
expires	可選	絕對過期時間
Max-Age	可選	相對過期時間，優先級高于expires
domain	可選	控制 Cookie 的作用域名
path	可選	限制 Cookie 的路徑范圍