大家好，我是微微笑的蝸牛??烟阐。
最近搬俊，看了一個(gè)「動(dòng)手寫瀏覽器渲染引擎」的系列文章，看下來覺得頗有價(jià)值蜒茄。
它實(shí)現(xiàn)了一個(gè)小型的渲染引擎唉擂，并給出了具體的實(shí)現(xiàn)代碼，清晰的講述了工作流程檀葛。從我的感受來看玩祟，這對(duì)我們理解現(xiàn)代瀏覽器渲染引擎的工作原理還是相當(dāng)有幫助的。
當(dāng)然屿聋，現(xiàn)有的渲染引擎非常復(fù)雜空扎，要想實(shí)現(xiàn)這樣的一個(gè)龐大系統(tǒng)很有難度。
但是試想胜臊，如果我們通過一個(gè)小型的引擎勺卢，來梳理它的主體工作流程，以小窺大象对，弄清底層原理黑忱，對(duì)于前端基礎(chǔ)知識(shí)體系的搭建也是大有裨益。
于是勒魔，我就邊看邊敲甫煞，用 rust 語言跟著實(shí)現(xiàn)了一遍。至于為什么用 rust冠绢，原因很簡單抚吠，因?yàn)槲恼轮杏玫氖?rust 語言。
但之前我也沒接觸過 rust弟胀，看不懂怎么辦楷力？為了理解的更加透徹，索性學(xué)了點(diǎn) rust 的基礎(chǔ)語法孵户，就開始對(duì)照著源碼一個(gè)個(gè)字符的敲萧朝。
這是一種最笨的方式，但可能對(duì)于我來說夏哭，也是一種最有效的方式检柬。從一行行代碼中，理解到其設(shè)計(jì)思路竖配、實(shí)現(xiàn)方式何址、工作流程里逆。
雖然會(huì)碰到不懂的語法，但查查了解其意思就好用爪，不必太過深入原押。因?yàn)槲业闹饕康氖抢斫獯a邏輯，搞清楚整個(gè)原理项钮，而不是研究 rust 的語法班眯。
考慮到大部分移動(dòng)端開發(fā)者對(duì) rust 語言不太熟悉。因此烁巫，我打算用 swift 再重新實(shí)現(xiàn)一遍。同時(shí)宠能，這也是我動(dòng)手實(shí)踐 swift 的過程亚隙，也算是一種技能練習(xí)吧。畢竟平常工作中用的不多违崇，只是會(huì)關(guān)注一下阿弃。
主體流程
我們先簡單了解下渲染引擎的工作流程斩例，有個(gè)大體印象臭增。如下圖所示：
總的來說，分為這幾個(gè)階段：html 解析 → css 解析 → 節(jié)點(diǎn)樣式處理 → 布局 → 繪制肥印。每個(gè)階段都有自己的產(chǎn)物伴箩。
文章規(guī)劃
在接下來的幾篇文章中入愧，將會(huì)圍繞上邊的流程來講述，并帶大家實(shí)現(xiàn)一個(gè)小型的引擎嗤谚，包括如下幾部分：
- 聽說你想寫個(gè)渲染引擎 - html 解析
- css 解析
- 生成樣式樹
- 生成布局樹
- 繪制
敬請(qǐng)期待吧~
