瀏覽器應用基礎

從打開瀏覽器輸入一個網址到頁面展示網頁內容的這段時間,瀏覽器和服務器都發生了什麼?

1、在接收到用戶輸入網址後,瀏覽器會開啓一個線程來處理這個請求,對用戶輸入的URL地址進行分析判斷,如果是HTTP協議就按照HTTP方式來處理。
2、調用瀏覽器引擎的對應方法,比如WebView中的loadUrl方法,分析並加載URL地址
3、通過DNS解析獲取該網站地址對應的IP地址,查詢完成後連同瀏覽器的Cookie,userAgent等信息向網站目的IP發出GET請求。
4、進行HTTP協議會話,瀏覽器客戶端向Web服務器發送報文。
5、進入網站後臺上的Web服務器處理請求,如Apache、Tomcat、Node.js等服務器。
6、進入部署好的後端應用,如PHP、Java、Javascript、Python等後端程序,找到對應的請求處理邏輯,這期間可能會讀取服務器緩存或查詢數據庫。
7、服務器處理請求並返回響應報文,此時如果瀏覽器訪問過該頁面,緩存上有對應的資源,會與服務器最後修改記錄對比,一致則返回304,否則200和對應內容。
8、瀏覽器開始下載HTML文檔(響應報頭狀態碼爲200時)或者從本地緩存讀取文件內容(瀏覽器緩存有效或響應報頭狀態碼爲304)。
9、瀏覽器根據下載接收到的HTML文件解析結構建立DOM文檔樹,並根據HTML中的請求下載指定的MIME類型文件,同時設置緩存等內容。
10、頁面開始解析渲染DOM,CSS根據規則解析並結合DOM文檔樹進行網頁內容佈局和繪製渲染,javascript根據DOM API操作DOM,並讀取瀏覽器緩存、執行事件綁定等,頁面整個展示過程完成。


瀏覽器組成

用戶界面、網絡、Javascript引擎、渲染引擎、UI後端、Javascript解析器和持久化數據存儲。
用戶界面包括瀏覽器中可見的地址輸入框、瀏覽器前進返回按鈕、打開書籤、打開歷史記錄等用戶可操作的功能選項。
瀏覽器引擎可以在用戶界面和渲染引擎之間傳送指令或在客戶端本地緩存中讀寫數據等,是瀏覽器中各個部分之間相互通信的核心。
瀏覽器渲染引擎的功能是解析DOM文檔和CSS規則並將內容排版到瀏覽器中顯示有樣式的頁面,也有人稱之爲排版引擎,我們常說的瀏覽器內核主要指的就是渲染引擎。
網絡功能模塊是瀏覽器凱西網絡線程發送請求或下載資源文件的模塊,例如DOM樹解析過程中請求靜態資源首先是通過瀏覽器的網絡模塊發起的。
UI後端用於繪製基本的瀏覽器窗口內控件,比如組合選擇框、按鈕、輸入框等。
Javascript解釋器則是瀏覽器解釋和執行Javascript腳本的部分,例如V8引擎。
瀏覽器數據持久化涉及cookie、localStorage等一些客戶端存儲技術,可通過瀏覽器引擎提供的API進行調用。


主瀏覽器內核
Trident內核:Internet Explorer、360瀏覽器、搜狗瀏覽器
Gecko內核:Netscape6及以上版本,Firefox
Presto內核:Opera7及以上還在使用(Opera內核原來是Presto,現使用的是Blink內核)
Webkit內核:Safari、Chrome


渲染引擎的主要工作流程

渲染引擎在瀏覽器中主要用於解析HTML文檔和CSS文檔,然後將CSS規則應用到HTML標籤元素上,並將HTML渲染到瀏覽器窗口中以顯示具體的DOM內容。
解析HTML構建DOM樹,構建渲染樹、渲染樹佈局、繪製渲染樹。
解析HTML構建DOM樹時渲染引擎會先將HTML元素標籤解析成多個DOM元素對象節點組成的且具有節點父子關係的DOM樹結構,然後根據DOM樹結構的每個節點順序提取計算使用的CSS規則並重新計算DOM樹結構的樣式數據,生成一個帶樣式描述的DOM渲染對象。
DOM渲染樹生成結束後,進入渲染樹的佈局階段,即根據每個渲染樹節點在頁面中的大小和位置,將節點固定到頁面的對應位置上,這個階段主要是元素的佈局屬性生效,即在瀏覽其中繪製頁面上元素節點的位置。
繪製階段,將渲染樹節點的背景、顏色、文本等樣式信息應用到每個節點上,這個階段主要是元素的內部顯示樣式生效。最終完成整個DOM在頁面上的繪製顯示。

發佈了95 篇原創文章 · 獲贊 22 · 訪問量 11萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章