瀏覽器的主要功能

如果非要用一句話來概括瀏覽器的功能，那么瀏覽器就是一個請求資源，然后顯示資源的軟件。

創(chuàng)新互聯(lián)是一家專注于網(wǎng)站制作、做網(wǎng)站與策劃設(shè)計(jì),仁化網(wǎng)站建設(shè)哪家好?創(chuàng)新互聯(lián)做網(wǎng)站,專注于網(wǎng)站建設(shè)10余年,網(wǎng)設(shè)計(jì)領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:仁化等地區(qū)。仁化做網(wǎng)站價格咨詢:18980820575

這里的資源主要就是我們經(jīng)常提到的 html,css,js,還有圖片等。

瀏覽器共有的接口：

• 地址欄
• 前進(jìn)后退按鈕
• 刷新按鈕
• 主頁按鈕
• 收藏按鈕

通過這些接口我們就基本掌握了瀏覽器的基本操作。

瀏覽器的架構(gòu)

瀏覽器對外表現(xiàn)就是一個內(nèi)容展示的容器，但是內(nèi)部它卻由很多組件組成。

• 用戶接口（我們前面提到的那些公用操作接口）
• 瀏覽器引擎（UI 和渲染引擎的封裝）
• 渲染引擎（負(fù)責(zé)顯示請求的內(nèi)容，根據(jù) css 和 html 顯示內(nèi)容布局）
• 網(wǎng)絡(luò)引擎（負(fù)責(zé) http 請求，負(fù)責(zé)網(wǎng)絡(luò)管理）
• UI 引擎（負(fù)責(zé)繪制基本 html 元素，比如下拉框，輸入框等）
• js 解析引擎（解析和執(zhí)行 JavaScript 代碼）
• 數(shù)據(jù)存儲引擎（存儲 cookie，localStorage，IndexedDB，websql 等數(shù)據(jù)）

其中渲染引擎可以說是最重要的一部分，它一般決定著用戶看到網(wǎng)頁加載體驗(yàn)。

不同的瀏覽器使用不同的渲染引擎，之前的 IE 使用的是 Trident，F(xiàn)irefox 使用 Gecko，Chrome 使用 WebKit 等，目前現(xiàn)在基本都使用 Blink 引擎。

渲染引擎的工作流程大致是這樣的。

首選它獲取到請求到的內(nèi)容，然后開始解析 html 結(jié)構(gòu)，將它們轉(zhuǎn)換成 dom 樹，然后渲染引擎解析 css 樣式，生成一個 css 樹，最后，根據(jù)樣式信息和 html 結(jié)構(gòu)生成 render 樹，我們稱之為渲染樹。

渲染樹主要包含了顏色，尺寸等視覺信息。構(gòu)建渲染樹之后，渲染樹的每個節(jié)點(diǎn)將會經(jīng)歷布局，找到在屏幕上的坐標(biāo)。然后 UI 引擎會繪制各個節(jié)點(diǎn)。

渲染樹的構(gòu)建是漸進(jìn)的，它會根據(jù)結(jié)構(gòu)一點(diǎn)點(diǎn)處理，盡量在屏幕上快速顯示部分內(nèi)容。

對于解析它主要包括兩部分，一部分是詞法分析，一部分是語法分析。

詞法分析，主要是按照詞匯表進(jìn)行分析標(biāo)記，構(gòu)建塊的集合。

語法分析，主要是根據(jù)詞法規(guī)則構(gòu)建解析樹的解析器。

HTML 解析

html 的標(biāo)記和語法都是被定義好的，因此在解析的時候只要按照規(guī)則即可。

html 文檔格式是 DTD，它是一個上下文無關(guān)的文檔格式。它更加寬容，可以省略一些標(biāo)記，因此解析器處理起來會很復(fù)雜。

dom 樹是由 dom 元素和屬性構(gòu)成的樹形結(jié)構(gòu)。其中 dom 和 html 中的標(biāo)記是對應(yīng)的。

    
        
      Hello World    

        
 
          
      

    

html 結(jié)構(gòu)不能采用常規(guī)的自頂向下或者自底向上的解析器進(jìn)行解析，因此它需要采用自定義的解析器進(jìn)行解析，通過標(biāo)記法和樹構(gòu)造進(jìn)行解析。

例如，將初始狀態(tài)標(biāo)記為數(shù)據(jù)狀態(tài)，然后從<開始進(jìn)行標(biāo)記，遇到 a-z 創(chuàng)建令牌，標(biāo)記為 tag open 狀態(tài)，直到遇到>，狀態(tài)變回?cái)?shù)據(jù)狀態(tài)。

在創(chuàng)建解析器的時候，會創(chuàng)建文檔對象，在解析樹構(gòu)造的時候，會向 dom 樹添加元素。

標(biāo)記法標(biāo)記的節(jié)點(diǎn)會由解析樹的構(gòu)造函數(shù)進(jìn)行處理。當(dāng)元素被添加到 dom 樹的時候，也會被添加到堆棧中。

在解析 dom 樹的時候，js 引擎也會解析 js 腳本，dom 解析后，這些腳本會執(zhí)行。

解析樹是具有包容性的，當(dāng)遇到一些錯誤的時候，它只會內(nèi)部進(jìn)行標(biāo)記，并不會報(bào)錯給用戶。

css 解析

WebKit 引擎使用 Flex 和 Bison 解析器生成器從 CSS 語法文件自動創(chuàng)建解析器。Bison 創(chuàng)建了一個自底向上的 shift-reduce 解析器。每個 CSS 文件都被解析為一個樣式表對象。每個對象都包含 CSS 規(guī)則。CSS 規(guī)則對象包含選擇器和聲明對象以及與 CSS 語法相對應(yīng)的其他對象。

在之前的時候，web 模型是同步的，解析器需要獲取資源，然后才能繼續(xù)解析。目前是一個線程進(jìn)行解析，一個線程用來獲取文檔剩下需要加載的資源文件。

構(gòu)建渲染樹需要計(jì)算每個渲染對象的視覺特性。這是通過計(jì)算每個元素的樣式特性來完成的。該樣式包括各種來源的樣式表，內(nèi)聯(lián)樣式和 html 中的視覺屬性。

樣式計(jì)算是非常復(fù)雜的，如果設(shè)計(jì)不佳的話，就會導(dǎo)致占用過多內(nèi)存，因此很多瀏覽器采用通過添加規(guī)則樹和上下文樹來優(yōu)化樣式計(jì)算。

頁面布局

在創(chuàng)建渲染器的時候，它沒有位置和大小，然后我們需要計(jì)算它的位置和大小，這個過程被稱為頁面布局或者說叫做頁面回流。

布局是一個遞歸過程，它從根渲染器開始，根據(jù)層次結(jié)構(gòu)遞歸的遍歷每個渲染器，然后計(jì)算它們的集合信息，最后布局它們。

布局分為全量布局和增量布局。所謂全量布局指的就是會影響所有渲染器的全局樣式改變，比如字體改變。而增量布局指的是布局是異步完成的，渲染器通過觸發(fā)器進(jìn)行布局。

css 主要是通過盒子模型來布局。每個盒子都有一個內(nèi)容區(qū)域和可選的周圍區(qū)域，比如邊框，邊距。其中有些盒子是塊狀模型，有些是行內(nèi)模型。

css 布局分為絕對定位和相對定位，絕對定位根據(jù)指定位置進(jìn)行渲染，而相對定位則是根據(jù)其他元素的位置進(jìn)行布局。

分享文章：瀏覽器底層工作那些事兒
URL網(wǎng)址：http://uogjgqi.cn/article/cdpejsj.html