最近在技術(shù)社區(qū)里L(fēng)adybirdBrowser 的熱度明顯漲了一波。很多人把它稱作“真正從零開始寫的瀏覽器”也有不少人誤以為它只是一個玩具項目。實際上Ladybird 已經(jīng)發(fā)展成一個獨立于 SerenityOS 的瀏覽器工程在 HTML/CSS/JS 解析、渲染、布局、安全模型等方面都有非常完整的代碼實現(xiàn)。這篇文章會從底層視角切入講解 Ladybird 的定位、倉庫結(jié)構(gòu)、核心技術(shù)架構(gòu)、源碼編譯步驟、閱讀路線、常見問題和參與方式。目標(biāo)是讓關(guān)注瀏覽器內(nèi)核方向的同學(xué)能獨立把 Ladybird 拉下來跑起來并且能看懂它的主干流程。文章適合三類讀者對瀏覽器內(nèi)核感興趣的 C 開發(fā)者、想?yún)⑴c開源項目的初學(xué)者、以及想了解“非 Chromium 系瀏覽器”如何工作的前端/后端工程師。1. Ladybird 是什么一個“真正獨立”的瀏覽器引擎1.1 從 SerenityOS 中走出來的瀏覽器Ladybird 原本是 SerenityOS 操作系統(tǒng)項目內(nèi)置的瀏覽器。SerenityOS 是一個從零開始、類 Unix 風(fēng)格的教學(xué)型操作系統(tǒng)由 Andreas Kling 發(fā)起。這個項目有一個很特別的原則盡量不依賴現(xiàn)有的大型第三方代碼很多組件都自己實現(xiàn)。瀏覽器作為系統(tǒng)里最復(fù)雜的一塊自然也被寫了出來。早期它只是 SerenityOS 的附屬應(yīng)用但隨著代碼量增長、功能變多開發(fā)者們發(fā)現(xiàn)它完全可以作為獨立跨平臺瀏覽器發(fā)展。于是 Ladybird 從 SerenityOS 倉庫中剝離成為單獨的 GitHub 項目LadybirdBrowser/ladybird。這里有一個核心信息需要記住Ladybird 不是 Chromium 套殼不是 Firefox 換皮也不是 WebKit 分支。它的 HTML 解析器、CSS 解析器、JavaScript 引擎、WebAssembly 支持、布局與繪制邏輯都是基于開源標(biāo)準(zhǔn)一點點實現(xiàn)的。1.2 Ladybird 解決什么問題現(xiàn)在世界上的主流瀏覽器底層引擎集中在三個Chromium / Blink V8Firefox / Gecko SpiderMonkeyWebKit / WebCore JavaScriptCore當(dāng)瀏覽器市場被少數(shù)引擎主導(dǎo)時Web 標(biāo)準(zhǔn)容易被“實際上怎么實現(xiàn)”反過來綁架。Ladybird 項目的意義在于做一個獨立于這些實現(xiàn)之外的瀏覽器引擎用代碼去驗證標(biāo)準(zhǔn)、推動標(biāo)準(zhǔn)而不是單純地“再做一個瀏覽器”。同時Ladybird 的設(shè)計理念里很強調(diào)隱私。它不打算內(nèi)置遙測、不收集用戶行為、沒有廣告業(yè)務(wù)綁定。這也讓它在隱私敏感型用戶和研究者群體中獲得了不少關(guān)注。1.3 當(dāng)前項目狀態(tài)Ladybird 目前仍然處于快速迭代階段。它已經(jīng)能打開不少現(xiàn)代網(wǎng)站基本的 CSS 布局、JavaScript 交互、Canvas、WebAssembly 等都在持續(xù)完善。但也要理性看待它的兼容性、穩(wěn)定性和性能暫時無法和 Chrome、Safari 這些商業(yè)級瀏覽器相比。對普通用戶來說它可能還不是日常主力瀏覽器對開發(fā)者來說它卻是一份極好的“瀏覽器內(nèi)核學(xué)習(xí)資料”。2. 與主流瀏覽器相比Ladybird 的定位與優(yōu)勢2.1 不復(fù)制 Chromium 代碼意味著什么很多開源瀏覽器項目本質(zhì)上是在 Chromium 外面包了一層殼比如曾經(jīng)的 Edge、現(xiàn)在的各種國產(chǎn)瀏覽器、一些極簡瀏覽器。這類項目主要工作集中在 UI、同步、賬號系統(tǒng)、安全策略和插件生態(tài)內(nèi)核能力都來自 Chromium。Ladybird 不同。它的渲染引擎叫 LibWebJavaScript 引擎叫 LibJSWebAssembly 運行時叫 LibWasm。這些代碼不依賴 V8、不依賴 Blink、不依賴 SpiderMonkey是完全另一條技術(shù)路線。這意味著 Ladybird 的源碼里你可以看到HTML 解析器如何把字符流變成 DOM 樹。CSS 引擎如何做選擇器匹配和樣式計算。JavaScript 引擎如何實現(xiàn)字節(jié)碼解釋執(zhí)行。布局模塊如何處理正常流、Flex、Grid、絕對定位。這些內(nèi)容在 Chromium 源碼里被大量封裝和優(yōu)化之后已經(jīng)非常難讀。而 Ladybird 的代碼結(jié)構(gòu)相對小命名也直白很多非常適合學(xué)習(xí)。2.2 隱私優(yōu)先的設(shè)計理念Ladybird 沒有商業(yè)壓力所以它的瀏覽器架構(gòu)里少了很多“商業(yè)化功能”。項目更關(guān)注默認(rèn)不啟用遙測。沒有廣告注入點。盡量把網(wǎng)絡(luò)請求和用戶身份隔離。對于研究人員來說這種項目更容易分析“瀏覽器到底在請求什么、渲染什么”。對于普通用戶來說如果你能接受功能殘缺Ladybird 也可以作為隱私要求較高的輔助瀏覽器使用。2.3 主流瀏覽器引擎對比瀏覽器/項目渲染引擎JavaScript 引擎代碼基礎(chǔ)主要定位ChromiumBlinkV8Google 主導(dǎo)商業(yè)瀏覽器、WebView、Electron 基礎(chǔ)FirefoxGeckoSpiderMonkeyMozilla 主導(dǎo)開源瀏覽器、隱私保護SafariWebCoreJavaScriptCoreApple 主導(dǎo)蘋果生態(tài)內(nèi)置瀏覽器LadybirdLibWebLibJSLadybird 社區(qū)獨立瀏覽器、標(biāo)準(zhǔn)驗證、學(xué)習(xí)研究從表格可以看出Ladybird 在技術(shù)棧上是完全獨樹一幟的。這也是它在開發(fā)者社區(qū)受到關(guān)注的根本原因。2.4 誰適合使用或研究 Ladybird我建議這幾類人重點看看 LadybirdC 開發(fā)者想找一個大型但可讀性較高的 C 項目。前端工程師想理解瀏覽器從 URL 到像素的完整鏈路。安全研究員想研究瀏覽器多進程隔離、網(wǎng)絡(luò)策略、解析器漏洞。開源新人想找一個有活躍社區(qū)、有清晰貢獻路徑的項目。3. 倉庫結(jié)構(gòu)拆解一個大型 C 項目的組織方式3.1 頂層目錄說明拉取代碼后第一件事是看目錄結(jié)構(gòu)。Ladybird 的倉庫組織延續(xù)了 SerenityOS 的風(fēng)格頂層目錄大致如下目錄作用Ladybird/瀏覽器宿主層代碼包括窗口、菜單、地址欄、WebContent 進程入口Userland/用戶態(tài)程序與庫核心內(nèi)容在Libraries子目錄Meta/構(gòu)建腳本、輔助工具、代碼生成工具Tests/單元測試和集成測試Base/內(nèi)置資源、默認(rèn)首頁、字體等Documentation/項目文檔和貢獻指南其中最重要的就是Userland/Libraries。這里面的每一個Lib*目錄都可以理解成一個相對獨立的組件庫。3.2 核心庫組件在Userland/Libraries下你會看到大量以Lib開頭的目錄常見的有LibWeb負責(zé) HTML 解析、DOM、CSS、布局、繪制指令生成。LibJSJavaScript 引擎包括解析器、字節(jié)碼、解釋器、內(nèi)置對象。LibWasmWebAssembly 字節(jié)碼解析與執(zhí)行。LibGfx圖形、字體、圖片編解碼基礎(chǔ)能力。LibUnicodeUnicode 數(shù)據(jù)和字符處理。LibTextCodec字符編碼轉(zhuǎn)換。LibCore基礎(chǔ)事件循環(huán)、文件、進程、網(wǎng)絡(luò)抽象。LibHTTPHTTP 客戶端實現(xiàn)。這種組織方式的優(yōu)點非常明顯每個庫都有清晰邊界測試可以單獨編譯、單獨執(zhí)行。對閱讀者來說你不用為了看一個 CSS 解析邏輯被迫翻遍整個瀏覽器。3.3 “庫”的思維與工程意義Ladybird 把瀏覽器引擎拆成庫而不是一個巨大的可執(zhí)行程序這在工程上是一種很好的解耦策略。比如你只關(guān)心 JavaScript 引擎那你可以只研究 LibJS不需要陷入網(wǎng)頁渲染細節(jié)。又比如你想給 LibWeb 增加一個 CSS 屬性支持你通常只需要在 LibWeb 內(nèi)部改代碼不會牽連到 UI 層。正是這種模塊化設(shè)計讓 Ladybird 對開源貢獻者非常友好。你可以像“做填空題”一樣在某個子庫里實現(xiàn)一個規(guī)范點然后跑對應(yīng)測試驗證。4. 核心技術(shù)架構(gòu)解析4.1 LibWeb從 HTML 到 DOM 再到布局LibWeb 是 Ladybird 的靈魂負責(zé)整個網(wǎng)頁內(nèi)容管線。它包含一條完整的處理鏈路網(wǎng)絡(luò)層拿到 HTML 文本。HTML 解析器把字符流拆成 Token再組裝成 DOM 樹。CSS 解析器解析style標(biāo)簽和內(nèi)聯(lián)樣式生成樣式表。樣式引擎計算每個 DOM 節(jié)點的最終樣式。布局模塊根據(jù)視口尺寸、樣式信息和內(nèi)容生成布局樹。繪制階段把布局結(jié)果轉(zhuǎn)換成繪制指令交給宿主窗口渲染。這個過程和 Chromium 的 Blink、Firefox 的 Gecko 在宏觀流程上是一致的但實現(xiàn)細節(jié)和代碼組織有很大差異。LibWeb 的注釋里經(jīng)常能看到 WHATWG 規(guī)范鏈接和相關(guān)說明閱讀時配合規(guī)范看效率會高很多。4.2 LibJS 與 LibWasm自研腳本運行時LibJS 是 Ladybird 的 JavaScript 引擎。它實現(xiàn)了 ECMAScript 規(guī)范中的語法解析、作用域分析、字節(jié)碼生成、解釋執(zhí)行和垃圾回收。與 V8 相比LibJS 的整體代碼量小很多優(yōu)化的深度也淺一些。但它的結(jié)構(gòu)相對清晰理解門檻低很多。如果你想搞明白“JavaScript 引擎到底怎么運行”LibJS 是一個比 V8 友好得多的入口。LibWasm 則負責(zé) WebAssembly。它讀取.wasm二進制格式校驗?zāi)K結(jié)構(gòu)執(zhí)行函數(shù)體。對前端開發(fā)者來說WebAssembly 可能只是一個接口在 Ladybird 里你可以看到它底層真正的字節(jié)碼結(jié)構(gòu)。4.3 多進程與事件循環(huán)現(xiàn)代瀏覽器為了安全普遍使用多進程架構(gòu)。協(xié)議、渲染、GPU 進程各自隔離防止一個網(wǎng)頁崩潰拖垮整個瀏覽器。Ladybird 也采用了類似思路瀏覽器 UI 進程與 WebContent 內(nèi)容進程分離兩者之間通過進程間通信傳遞頁面內(nèi)容、輸入事件和繪制結(jié)果。這種設(shè)計不是為了炫技而是安全模型的基石。一個惡意網(wǎng)頁即使攻破了渲染進程也很難直接訪問操作系統(tǒng)用戶數(shù)據(jù)。進程內(nèi)部則靠事件循環(huán)驅(qū)動。JavaScript 的異步回調(diào)、網(wǎng)絡(luò)請求、定時器、用戶輸入最終都會變成事件循環(huán)里的任務(wù)。LibCore 提供了一個跨平臺的事件循環(huán)抽象LibWeb 和 LibJS 的事件處理都建立在它之上。為了便于理解下面給出一段簡化的事件循環(huán)示意代碼。它并不是 Ladybird 倉庫中的真實源碼而是用來說明“事件驅(qū)動”和“統(tǒng)一重繪”的核心思路。// 簡化示意展示瀏覽器事件循環(huán)如何驅(qū)動解析、輸入與重繪 #include deque #include functional #include iostream enum class EventType { Input, Timer, NetworkTask, Repaint }; struct Event { EventType type; std::functionvoid() handler; }; class EventLoop { public: void postEvent(Event ev) { queue_.push_back(std::move(ev)); } void run() { while (!stop_) { // 處理當(dāng)前事件隊列中的所有任務(wù) while (!queue_.empty()) { auto ev std::move(queue_.front()); queue_.pop_front(); ev.handler(); } // 所有任務(wù)處理完成后如果頁面標(biāo)記為需要重繪則統(tǒng)一繪制 if (dirty_ onRepaint_) { std::cout [EventLoop] repaint page\n; onRepaint_(); dirty_ false; } // 等待下一輪事件Linux/Unix 下通常是 poll/epoll/select waitForNextEvent(); } } void setDirty(bool dirty) { dirty_ dirty; } void setRepaintCallback(std::functionvoid() callback) { onRepaint_ std::move(callback); } void stop() { stop_ true; } private: void waitForNextEvent() { // 這里在真實瀏覽器中會等待 socket、定時器、窗口消息等事件 } std::dequeEvent queue_; bool dirty_ false; bool stop_ false; std::functionvoid() onRepaint_; };真實 LibCore 的實現(xiàn)會比這個復(fù)雜很多它要處理跨平臺 socket、定時器、信號、子進程等。但核心思想一樣瀏覽器不是無腦while(true)循環(huán)畫幀而是“有事件就處理事件沒有事件就等待空閑時統(tǒng)一重繪”。4.4 宿主層與繪制后端Ladybird 的 UI 層通過宿主抽象來調(diào)用底層圖形庫。目前主流的宿主是基于 Qt6 的Qt 負責(zé)創(chuàng)建窗口、接收鼠標(biāo)鍵盤事件、繪制位圖。此外還有 Headless 模式可以在沒有窗口的環(huán)境下加載頁面并截圖這對自動化測試和調(diào)試很有幫助。這種“宿主與引擎分離”的設(shè)計讓 Ladybird 以后可以接不同的 GUI 框架而不需要改動解析和布局核心邏輯。5. 從源碼構(gòu)建 Ladybird環(huán)境準(zhǔn)備與編譯5.1 推薦環(huán)境Ladybird 是一個大型 C 項目建議在 Linux 或 macOS 上構(gòu)建Windows 原生支持較差可以借助 WSL2。硬件方面編譯過程比較吃內(nèi)存建議至少 8GB 內(nèi)存16GB 會更舒服。首次構(gòu)建需要編譯大量代碼耗時可能較長請保證磁盤空間和耐心。5.2 Linux 環(huán)境安裝依賴不同發(fā)行版包名略有差異這里以 Debian/Ubuntu 為例sudo apt update sudo apt install build-essential cmake ninja-build ccache \ qt6-base-dev qt6-wayland如果構(gòu)建過程中提示缺少某些庫比如libssl-dev、libxkbcommon-dev、libgl1-mesa-dev按錯誤提示安裝對應(yīng) dev 包即可。Ladybird 依賴的庫會隨著版本演進有所變化不要死記上面的列表要以官方 README 和構(gòu)建報錯為準(zhǔn)。5.3 macOS 環(huán)境安裝依賴macOS 上建議通過 Homebrew 安裝依賴xcode-select --install brew install cmake ninja ccache qt安裝完成后同樣可以進入源碼編譯流程。5.4 獲取源碼并執(zhí)行構(gòu)建腳本拉取源碼git clone https://github.com/LadybirdBrowser/ladybird.git cd ladybird項目提供了統(tǒng)一構(gòu)建腳本Meta/ladybird.sh通常這樣用# 構(gòu)建項目 ./Meta/ladybird.sh build # 運行瀏覽器 ./Meta/ladybird.sh run腳本會創(chuàng)建Build目錄并在首次構(gòu)建時配置 CMake 和 Ninja 環(huán)境。如果你對腳本支持的命令不清楚可以執(zhí)行./Meta/ladybird.sh --help需要注意的是Ladybird 處于快速開發(fā)階段main 分支變動很快。建議在閱讀或開發(fā)前確認(rèn)當(dāng)前 commit避免和別人寫文章時的代碼對不上。5.5 運行驗證構(gòu)建成功后運行 Ladybird正常情況下會彈出一個瀏覽器窗口。你可以在地址欄輸入https://example.com或本地 HTML 文件路徑觀察頁面渲染效果。如果網(wǎng)絡(luò)環(huán)境受限也可以先在地址欄加載簡單的data:text/html,h1Hello驗證最基礎(chǔ)的 HTML 解析鏈路是否正常。這個小技巧在后續(xù)調(diào)試引擎時也會經(jīng)常用到。6. 初識 Ladybird 源碼從啟動到渲染一條線6.1 從入口函數(shù)開始Ladybird 的代碼量雖然比 Chromium 小但直接亂翻依然會迷失方向。建議先找入口。如果你是閱讀源碼可以在Ladybird/目錄下尋找可執(zhí)行程序的main函數(shù)。入口邏輯通常是這樣的初始化宿主環(huán)境比如 Qt 應(yīng)用對象。創(chuàng)建瀏覽器窗口注冊地址欄和頁面視圖。創(chuàng)建 WebContent 進程或連接到已有內(nèi)容進程。用戶輸入 URL 后調(diào)用頁面加載接口。頁面加載完成后監(jiān)聽渲染事件并更新窗口內(nèi)容。6.2 渲染一條線我們可以用一條 ASCII 簡圖來表示一個頁面從輸入到顯示的主鏈路輸入 URL ↓ 網(wǎng)絡(luò)請求LibHTTP / 系統(tǒng)網(wǎng)絡(luò)棧 ↓ HTML 文本 ↓ LibWebHTML 解析器 → DOM 樹 ↓ LibWebCSS 解析 → 樣式計算 ↓ LibWebLayout 布局樹 ↓ LibWebPaint 繪制指令 ↓ 宿主窗口顯示Qt / Headless 截圖建議按這條鏈路逐段閱讀而不是從中間某個類開始。6.3 閱讀順序建議我給初學(xué)者的源碼閱讀順序是先讀LibWeb的 HTML 解析器觀察 Token 到 DOM 的轉(zhuǎn)換過程。再讀 CSS 解析和樣式計算理解display、width、color等屬性如何影響渲染。然后讀布局模塊理解普通流和 Flex 布局的基本邏輯。最后回到LibJS先跑通一個簡單表達式再看它如何與 DOM 綁定。這樣從“網(wǎng)頁顯示”切入再進入“腳本執(zhí)行”比一上來就啃 JS 引擎更平滑。7. 常見問題與排查思路構(gòu)建和運行 Ladybird 時我整理了幾個高頻問題問題現(xiàn)象常見原因解決思路編譯進程被 OOM kill并行編譯任務(wù)太多內(nèi)存不足降低-j參數(shù)增加 swap關(guān)閉其他大內(nèi)存應(yīng)用找不到 Qt6 頭文件系統(tǒng)源沒有 Qt6 或安裝的不是 dev 包安裝qt6-base-dev確認(rèn) CMake 能找到 Qt6運行時黑屏或無法彈窗Wayland/X11 相關(guān)依賴缺失安裝qt6-wayland或設(shè)置QT_QPA_PLATFORMxcb首次編譯非常慢沒有使用 ccache 或編譯器優(yōu)化級別高安裝 ccache之后增量構(gòu)建會明顯加快Windows 下構(gòu)建失敗項目以類 Unix 系統(tǒng)為主要開發(fā)環(huán)境使用 WSL2 或 Docker 容器某些網(wǎng)站 JS 運行異常LibJS 仍在完善兼容性不夠先用標(biāo)準(zhǔn)測試用例定位再決定是否提 issue這里展開說幾個OOM 問題Ladybird 的 C 模板和頭文件依賴很多如果并發(fā)編譯任務(wù)開得太大內(nèi)存很容易被打滿。遇到std::bad_alloc或進程被 kill 時不要慌降低并行度重新編譯即可。黑屏問題Linux 下運行 GUI 程序經(jīng)常遇到圖形棧問題。一般優(yōu)先嘗試讓 Qt 使用 xcb 模式QT_QPA_PLATFORMxcb ./Meta/ladybird.sh run如果當(dāng)前環(huán)境是純 Wayland也有對應(yīng)模式但需要安裝 Wayland 插件。頁面顯示異常如果你加載一個頁面后布局錯亂先不要直接判定“引擎壞了”。建議先用簡單的data:text/html或本地文件排除網(wǎng)絡(luò)問題再用headless模式截圖對比方便定位是解析問題還是繪制問題。8. 如何參與 Ladybird 開源貢獻8.1 從 Issue 和測試失敗項入手Ladybird 社區(qū)對新人比較友好。比較好的切入點有兩類標(biāo)有g(shù)ood first issue的 GitHub Issue。Web 平臺測試WPT中的失敗用例。你不需要一開始就實現(xiàn)一個巨大功能可以先挑一個很小的失敗點比如某個 CSS 屬性沒有生效、某個 JS 內(nèi)置函數(shù)返回結(jié)果不對把它修好。8.2 提交 PR 前的注意事項在提 PR 之前建議先看倉庫里的CONTRIBUTING文檔并遵守以下幾點保持 commit 粒度小一個 PR 盡量只解決一個問題。代碼格式遵循項目的 clang-format 配置。新增或修改代碼時盡量帶上對應(yīng)測試。提交前運行相關(guān)庫的測試避免影響其他模塊。8.3 社區(qū)協(xié)作方式項目的討論主要圍繞 GitHub 展開同時也有社區(qū)聊天頻道用于同步開發(fā)進展。參與前不要直接“認(rèn)領(lǐng) Issue”先看是否已經(jīng)有人在做避免重復(fù)勞動。如果你只是學(xué)習(xí)不打算貢獻也沒關(guān)系。把倉庫 clone 下來改一改日志輸出、加幾個斷點也是一種非常有效的學(xué)習(xí)方式。9. 工程建議學(xué)習(xí) Ladybird 的幾個正確姿勢9.1 把它當(dāng)作“大型 C 可讀樣本”Ladybird 代碼量比 Chromium 小一到兩個數(shù)量級但它覆蓋了瀏覽器引擎的完整主鏈路。對 C 工程能力提升來說它是一個很好的“大型項目閱讀樣本”。閱讀時不要試圖把每個類都搞清楚先抓住主線再橫向擴展。9.2 先用 WPT 定位問題再讀代碼Web Platform Tests 是瀏覽器兼容性的標(biāo)準(zhǔn)測試集。Ladybird 很多代碼的目標(biāo)是讓更多 WPT 用例通過。你可以先跑一個失敗用例觀察失敗輸出再回到源碼里查對應(yīng)實現(xiàn)。這種“問題驅(qū)動閱讀”比通讀源碼更高效。9.3 關(guān)注安全模型瀏覽器安全模型包括多進程隔離、跨域策略、CSP、權(quán)限管理等。Ladybird 雖然早期但已經(jīng)在往現(xiàn)代瀏覽器安全架構(gòu)靠攏。學(xué)習(xí)它的安全設(shè)計對后端安全、桌面應(yīng)用安全都有借鑒意義。9.4 不要在 main 分支上固化印象Ladybird 迭代很快今天的代碼可能下周就重構(gòu)了。寫文章、做筆記時盡量記錄當(dāng)前 commit hash。復(fù)現(xiàn)問題和提交 Issue 時也要寫清楚版本號或 commit否則維護者很難判斷問題是否已經(jīng)修復(fù)。9.5 結(jié)合標(biāo)準(zhǔn)文本閱讀Ladybird 的代碼注釋經(jīng)常引用 WHATWG、ECMA-262 等規(guī)范。閱讀時打開標(biāo)準(zhǔn)原文對照代碼逐條理解能比單純看代碼更深入。這也是瀏覽器內(nèi)核開發(fā)者的基本功。10. 總結(jié)Ladybird 是近幾年瀏覽器內(nèi)核領(lǐng)域里少見的、完全獨立的新引擎項目。它不依賴 Chromium、Firefox 或 WebKit覆蓋了解析、布局、腳本執(zhí)行、繪制等完整鏈路。對研究瀏覽器工作原理、學(xué)習(xí)大型 C 工程、參與開源共建來說它都是非常合適的對象。本文主要分享了它的背景、核心庫結(jié)構(gòu)、技術(shù)架構(gòu)、源碼編譯方法、閱讀主線和常見問題處理方式。你可以先按照第 5 部分的步驟把項目跑起來再順著第 6 部分的鏈路閱讀源碼。如果你在構(gòu)建過程中遇到其他問題優(yōu)先查看官方 README、GitHub Issues 和項目的Documentation目錄。動手實踐比收藏一堆資料更有價值下一步不妨從 clone 項目并跑通一個簡單的 WPT 用例開始。