最近工作需要一直在和瀏覽器打交道。每天都為如何解決那些瀏覽器間的兼容性而困擾。時間長了自然而然對瀏覽器也產生了感情。準備學習學習，自己寫個瀏覽器。為此開始學習了 Rust，一門用于寫底層，但看上去又像高級語言的語言。希望 Rust 能有美好的明天，我也跟著受益。

想了想，要寫瀏覽器，首先應該了解一下瀏覽器內部機制。今天先放下代碼，帶大家一起走進瀏覽器，看看瀏覽器是如何將網頁呈現給您的。

綁定：使用系統級別的 API，將內存中位圖繪制到指定窗口(標簽對應的網頁視圖)上。

渲染：解析 html 和 css 生成渲染樹，將合并后，將渲染樹繪制到屏幕上呈現給用戶。

平臺：兼容(適配)到不同的操作系統

javascript VM ：以后單講，準備寫個demo

首先將 HTML 和 CSS 解析為一定的數據結構(渲染對象)，然后再將渲染對象按一定規則(就是將 style 樹 合并到 dom 樹上)形成渲染樹，接下來對生成渲染樹各個節點進行布局(也就是按 dom 節點的位置信息進行排版)，最后讀取渲染樹，繪制成圖片放到屏幕上。

HTML 的解析

首先瀏覽器是以超強糾錯形式來解析 html，即便 html 有錯誤，瀏覽器也相對智能地將 html 進行解析，所以說對 html 的解析不是一般簡單解析工作，html 解析要相對復雜。在解析過程是可以被 js 或其他原因所中斷的。例如網絡不暢通，link 和 style 標簽加載，相對高級的瀏覽器為提高效率，提供一定進程進行預解析，也可以加載圖這樣耗時的工作可以另一個進程中完成

Parser 和 Tokenizer 其實只是把無意義的字符流變得有某種意義而已。Parse 這個詞其實可以用在很多的地方，比如說只要你能在一個字符流中標識出所有的字符 a，你就在做 Tokenize 和 Parse。你可以看得出，Parse 和 Tokenize 有多難實際是針對編程的人的目的來說的。

一般解析完了這種形式

html|-----head-----body|--- p. wat|? ? ? ? #text---- div---- span---- #textHTMLHtmlElement|-----HTMLHeadElement-----HTMLBodyElement|--- HTMLParagraphElement|? ? ? ----Text? ? ? ? ---- HTMLDivElement? ? ? ? ? ? ? ? ---- HTMLSpanElement? ? ? ? ? ? ? ? ? ? ? ---- Text

下面例子只為說明瀏覽器解析 html 時的糾錯能力，html 中錯誤顯而易見，我就不一一指出了。

javascript 是可以介入 html 解析過程中，如下圖。

總結

以上是生活随笔為你收集整理的a++浏览器_走进浏览器内部—剖析浏览器是如何工作的（上）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。