瀏覽器工作原理整理

Dionysus_go 發布于2019-08-26 10:48 / 1632人閱讀

摘要：每種可被解析的格式必須具有由詞匯及語法規則組成的特定的文法，稱為上下文無關文法。解析解析器，每個標識都有特定的正則進行解析。開發者可以將腳本標識為，以使其不阻塞文檔解析，并在文檔解析結束后執行。

瀏覽器組成

用戶界面-地址欄、按鈕之類的

瀏覽器引擎-用來查詢及操作渲染引擎的接口

渲染引擎-顯示請求的內容

網絡-進行網絡請求

ui后端-用來滬指選擇框、對話框的基本組件

js解析器

數據存儲

需要注意的是，不同于大部分瀏覽器，Chrome為每個Tab分配了各自的渲染引擎實例，每個Tab就是一個獨立的進程

渲染引擎 主流程

解析html以構建dom樹->構建render樹->布局render樹->繪制render樹

渲染引擎開始解析html，并將標簽轉化胃內容樹中的dom節點,接著它解析外部css文件及style標簽中的樣式信息，這些樣式信息和html元素中的樣式信息將被用來構建另一顆樹---渲染樹

渲染樹是有一些包含有顏色和大小等屬性的矩形組成，它們將被按照正確的順序顯示到屏幕上。

渲染樹構建好了之后，將會執行布局過程，它將確定每個節點上在屏幕上的確切坐標，再下一步就是繪制渲染樹，使用ui后端層繪制每個節點

解析

解析一個文檔即將其轉換為具有一定意義的結構——編碼可以理解和使用的東西。解析的結果通常是表達文檔結構的節點樹，稱為解析樹或語法樹。

文法

解析基于文檔依據的語法規則——文檔的語言或格式。每種可被解析的格式必須具有由詞匯及語法規則組成的特定的文法，稱為上下文無關文法。人類語言不具有這一特性，因此不能被一般的解析技術所解析。

html解析器

html解析器將html標識解析成解析樹，解析書是有dom元素及屬性節點組成，dom是文檔對象模型的縮寫。解析算法 html并不是由頂向下或者自低向上的解析，
原因是：

這門語言本身的寬容特性

瀏覽器對一些常見的非法html有容錯機制

解析過程是往復的，通常源碼不會在解析過程中發生改變，但在html中，腳本標簽包含的“document.write ”可能添加標簽，這說明在解析過程中實際上修改了輸入

瀏覽器為html制定了專門的解析器。

CSS解析

css解析器，css 每個標識都有特定的正則進行解析。一個規則集合具有一個或者可選個數的多個選擇器

腳本解析

web的模式是同步的，開發者希望解析到一個script標簽時立即解析執行腳本，并阻塞文檔的解析直到腳本執行完。如果腳本是外引的，則網絡必須先請求到這個資源——這個過程也是同步的，會阻塞文檔的解析直到資源被請求到。這個模式保持了很多年，并且在html4及html5中都特別指定了。開發者可以將腳本標識為defer，以使其不阻塞文檔解析，并在文檔解析結束后執行。Html5增加了標記腳本為異步的選項，以使腳本的解析執行使用另一個線程。

渲染樹的構造

這個比較復雜，以后多帶帶來寫

云服務器 GPU云服務器工作原理網絡工作原理爬蟲工作原理 cdn工作原理

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/106786.html

根據瀏覽器的工作原理整理前端知識體系

摘要：在這里，我根據瀏覽器的工作原理整理了一套自己的知識體系，方便自己學習，有很多不足的地方，希望大家多多交流。圖片可以點擊查看原圖進行觀看做前端的同學都知道，前端技術目前需要學習的知識太多了，各種框架，技術層出不窮，但只要我們自己有自己的一套知識體系，打好基礎，再學習新東西就會很容易。在這里，我根據瀏覽器的工作原理整理了一套自己的知識體系，方便自己學習，有很多不足的地方，希望大家多多交流...

Riddler 2019-08-23 13:42 評論0 收藏0
根據瀏覽器的工作原理整理前端知識體系

摘要：在這里，我根據瀏覽器的工作原理整理了一套自己的知識體系，方便自己學習，有很多不足的地方，希望大家多多交流。圖片可以點擊查看原圖進行觀看做前端的同學都知道，前端技術目前需要學習的知識太多了，各種框架，技術層出不窮，但只要我們自己有自己的一套知識體系，打好基礎，再學習新東西就會很容易。在這里，我根據瀏覽器的工作原理整理了一套自己的知識體系，方便自己學習，有很多不足的地方，希望大家多多交流...

xiaotianyi 2019-08-02 12:06 評論0 收藏0
根據瀏覽器的工作原理整理前端知識體系

摘要：在這里，我根據瀏覽器的工作原理整理了一套自己的知識體系，方便自己學習，有很多不足的地方，希望大家多多交流。圖片可以點擊查看原圖進行觀看做前端的同學都知道，前端技術目前需要學習的知識太多了，各種框架，技術層出不窮，但只要我們自己有自己的一套知識體系，打好基礎，再學習新東西就會很容易。在這里，我根據瀏覽器的工作原理整理了一套自己的知識體系，方便自己學習，有很多不足的地方，希望大家多多交流...

JasonZhang 2019-08-29 17:24 評論0 收藏0
瀏覽器工作原理整理

摘要：每種可被解析的格式必須具有由詞匯及語法規則組成的特定的文法，稱為上下文無關文法。解析解析器，每個標識都有特定的正則進行解析。開發者可以將腳本標識為，以使其不阻塞文檔解析，并在文檔解析結束后執行。瀏覽器組成用戶界面-地址欄、按鈕之類的瀏覽器引擎-用來查詢及操作渲染引擎的接口渲染引擎-顯示請求的內容網絡-進行網絡請求 ui后端-用來滬指選擇框、對話框的基本組件 js解析器數據...

hqman 2019-08-30 15:44 評論0 收藏0
瀏覽器的工作原理整理

摘要：渲染引擎渲染引擎也稱為瀏覽器內核，主要時在瀏覽器窗口中顯示所請求的內容，這是每個瀏覽器的核心部分。瀏覽器的結構瀏覽器的主要組件包括：用戶界面——包括地址欄、前進/后退按鈕、書簽菜單等。除了瀏覽器主窗口顯示用戶請求的頁面外，其他顯示的各個部分都屬于用戶界面。用戶界面后端——用于繪制基本的窗口小部件，比如組合框和窗口。其公開了與web應用無關的通用接口，而在底層使用操作系統的用戶...

jzman 2019-08-02 12:00 評論0 收藏0