?作者 | Andreas Kling

策劃 | 徐杰承

審校 | 云昭

51CTO讀者成長(zhǎng)計(jì)劃社群招募，咨詢小助手（微信號(hào)：TTalkxiaozhuli）

從頭構(gòu)建一個(gè)新瀏覽器？這如果是不是個(gè)天大的“偽需求”，便是一場(chǎng)開(kāi)發(fā)者的噩夢(mèng)！

要知道，如果沒(méi)有上百億的資金和數(shù)百名研發(fā)工程師的投入，從頭開(kāi)始構(gòu)建一個(gè)新的瀏覽器引擎，幾乎是不可能的。

然而SerenityOS系統(tǒng)的作者Andreas Kling卻帶領(lǐng)著一支僅有數(shù)十人且?guī)缀鯖](méi)有資金支持的開(kāi)源項(xiàng)目小隊(duì)僅花兩個(gè)月便完成了這項(xiàng)任務(wù)——從0到1構(gòu)建了一款跨平臺(tái)Web瀏覽器Ladybird（瓢蟲(chóng)）。截至目前，瓢蟲(chóng)已實(shí)現(xiàn)了在Linux、macOS、Windows（WSL）和Android等系統(tǒng)上運(yùn)行。

本文就帶領(lǐng)大家一探此事的究竟。

一、“輪子之王”兩個(gè)月實(shí)現(xiàn)小目標(biāo)

起初，Andreas希望將瓢蟲(chóng)作為 SerenityOS 系統(tǒng)的“LibWeb”瀏覽器引擎，隨后Andreas Kling為其構(gòu)建了一個(gè)簡(jiǎn)單的GUI。隨著瓢蟲(chóng)項(xiàng)目的不斷完善，在啟動(dòng)僅兩個(gè)月后，它已經(jīng)成為一個(gè)跨平臺(tái)的Web瀏覽器。

在此之前，Andreas Kling曾有過(guò)Qt和WebKit項(xiàng)目的開(kāi)發(fā)經(jīng)驗(yàn)，而除了Qt，整個(gè)Ladybird瀏覽器的組件（包括LibWeb和LibJS等渲染組件）幾乎全是Andreas Kling一手打造的，這也使其在圈內(nèi)擁有了“輪子之王”的綽號(hào)。

在完成這項(xiàng)難以置信的壯舉后，Andreas Kling收到了不少來(lái)自圈內(nèi)朋友的贊譽(yù)和提問(wèn)，而其中重復(fù)度最高的一個(gè)問(wèn)題便是：“你的團(tuán)隊(duì)為何能在構(gòu)建瓢蟲(chóng)瀏覽器方面取得如此快速的進(jìn)展，這從表明看起來(lái)是完全不可能的?！?/p>

二、也許不能復(fù)制的五個(gè)秘訣

近期，Andreas Kling也正式通過(guò)一篇博客回應(yīng)了這個(gè)問(wèn)題，并將這次成功歸結(jié)為了五個(gè)方面。

1.更強(qiáng)的網(wǎng)頁(yè)規(guī)范

在啟動(dòng)Ladybird項(xiàng)目前，我們已經(jīng)在HTML4和CSS2.1的模糊時(shí)代走了很長(zhǎng)一段路。今天的ECMAScript、HTML和CSS規(guī)范(在大多數(shù)情況下)都擁有一流的技術(shù)文檔，與過(guò)去相比，它們的算法可以用更少的工作和測(cè)試來(lái)實(shí)現(xiàn)。

瓢蟲(chóng)在體系結(jié)構(gòu)層面會(huì)盡可能地匹配在各種網(wǎng)絡(luò)規(guī)范中所描述的體系結(jié)構(gòu)。這使得新加入項(xiàng)目的開(kāi)發(fā)人員更容易適應(yīng)，因?yàn)樗麄冊(cè)趨⑴c開(kāi)發(fā)前只需要學(xué)習(xí)一種架構(gòu)而不是幾種。

然而盡管如此，這與理想情況仍然存在差距，一些較為獨(dú)特且不常見(jiàn)的特性給研發(fā)工作帶來(lái)了一定困難。但值得慶幸的是，W3C有一個(gè)活躍的編輯社區(qū)致力于改善這些問(wèn)題。我們?cè)贚adybird上所做的大量工作包括使我們的代碼庫(kù)都能夠適應(yīng)這些規(guī)范編輯器所進(jìn)行的更新。

我們也在努力改進(jìn)規(guī)范：瓢蟲(chóng)的開(kāi)發(fā)人員經(jīng)常會(huì)報(bào)告規(guī)范錯(cuò)誤，有時(shí)甚至還會(huì)提交pr來(lái)直接改進(jìn)規(guī)范。但歸根結(jié)底，在一個(gè)全新的瀏覽器引擎中實(shí)現(xiàn)一個(gè)規(guī)范，可以很好地驗(yàn)證該規(guī)范的完整性及可靠性。

2.專注于垂直領(lǐng)域

雖然今天的網(wǎng)頁(yè)規(guī)范確實(shí)比以往任何時(shí)候都好，但許多特性仍然跨越多個(gè)規(guī)范，通常在子系統(tǒng)之間有細(xì)微的交互，實(shí)現(xiàn)者必須理解這些交互。如果開(kāi)發(fā)人員試圖一次只構(gòu)建一個(gè)規(guī)范的瀏覽器，甚至一次只構(gòu)建一個(gè)特性，那么其很可能會(huì)失去動(dòng)力并因繁雜的工作而失去興趣。

因此，我們傾向于專注于構(gòu)建功能的“垂直切片”。這意味著需要設(shè)定實(shí)際的、交叉的目標(biāo)，比如“讓我們加載twitter.com/awesomekling”，“讓我們登錄discord.com”，以及其他類似的目標(biāo)。在垂直切片上工作有助于保持開(kāi)發(fā)者的動(dòng)力，隨著網(wǎng)站的進(jìn)步，每一位參與者都能看到實(shí)際的變化，這會(huì)給大家?guī)?lái)極大的動(dòng)力。

這種方法在一定程度上是可行的，因?yàn)閣eb本身是圍繞優(yōu)雅降級(jí)設(shè)計(jì)的，這意味著瀏覽器可以呈現(xiàn)web內(nèi)容，同時(shí)只支持站點(diǎn)使用的一些功能。你可能認(rèn)為這種方法會(huì)產(chǎn)生一個(gè)“兼容網(wǎng)站”的小集合和一大堆無(wú)法運(yùn)作的代碼，但實(shí)際情況是水漲船高的，當(dāng)我們專注于改進(jìn)一個(gè)網(wǎng)站時(shí)，成千上萬(wàn)的其他網(wǎng)站也會(huì)得到改進(jìn)。

3.后置性能優(yōu)化

我們目前并沒(méi)有花太多精力優(yōu)化瓢蟲(chóng)的性能。相反，我們的主要關(guān)注點(diǎn)是解決與正確性和兼容性相關(guān)的問(wèn)題。這種方法能幫助我們?cè)谏钊雰?yōu)化之前專注于確保瀏覽器按預(yù)期工作。當(dāng)然這并不是說(shuō)我們不關(guān)心瀏覽器性能。我們希望瓢蟲(chóng)瀏覽器最終能夠?qū)崿F(xiàn)快速響應(yīng)。

這是一個(gè)遵循一定規(guī)律的選擇，不要花太多時(shí)間優(yōu)化一個(gè)還不能正常工作的產(chǎn)品。例如，雖然我們幾乎可以確定將會(huì)優(yōu)化JavaScript執(zhí)行或渲染速度的區(qū)域，但我們會(huì)有意識(shí)地選擇優(yōu)先修復(fù)渲染錯(cuò)誤或與流行網(wǎng)站的兼容性問(wèn)題。

但有時(shí)我們也確實(shí)會(huì)為慢得難以忍受的事情破例。畢竟對(duì)于一個(gè)開(kāi)源項(xiàng)目而言，我們不想讓開(kāi)發(fā)者的貢獻(xiàn)過(guò)程變得不愉快。在遇到這種情況時(shí)，我們會(huì)花一定時(shí)間解決最重要的性能瓶頸，以保持相對(duì)良好的開(kāi)發(fā)體驗(yàn)。但在這個(gè)階段，我們并沒(méi)有跟蹤基準(zhǔn)分?jǐn)?shù)之類的東西。不過(guò)，一旦我們?cè)谡_性和兼容性方面取得了堅(jiān)實(shí)的基礎(chǔ)，那么下一步要做的便是優(yōu)化性能。

4.強(qiáng)大的團(tuán)隊(duì)文化

在Ladybird開(kāi)發(fā)團(tuán)隊(duì)一起工作的時(shí)間里，我們形成了強(qiáng)大的團(tuán)隊(duì)文化。這里的文化是高度樂(lè)觀的，每個(gè)人都抱有“我能行”的態(tài)度。雖然由于采取開(kāi)源協(xié)作的工作模式，Ladybird團(tuán)隊(duì)分布在世界各地，但我們都會(huì)在Discord上見(jiàn)面聊天，互相激勵(lì)。團(tuán)隊(duì)中的開(kāi)發(fā)人員也經(jīng)常合作，參與彼此的項(xiàng)目。

每個(gè)在Ladybird團(tuán)隊(duì)中工作的人都被鼓勵(lì)在項(xiàng)目中探索自己的個(gè)人興趣而不是被指定任務(wù)。團(tuán)隊(duì)中的大多數(shù)人在加入我們之前都從未接觸過(guò)瀏覽器代碼，但在加入項(xiàng)目后，他們會(huì)迅速成為世界級(jí)的瀏覽器開(kāi)發(fā)人員，這也使得每一個(gè)項(xiàng)目的參與者能夠收獲足夠的獲得感。

此外，由于瓢蟲(chóng)是SerenityOS項(xiàng)目的一個(gè)分支，它具有與SerenityOS同樣的責(zé)任感和自力更生的文化。我們?cè)陂_(kāi)發(fā)瓢蟲(chóng)瀏覽器時(shí)幾乎避免了所有的第三方依賴，由開(kāi)發(fā)人員自己構(gòu)建一切。這樣做的一部分原因是由于從0開(kāi)始是一件很有趣的事情，此外也正因如此，這種開(kāi)發(fā)模式為我們的軟件創(chuàng)建了全面的責(zé)任制，每個(gè)人都會(huì)盡力對(duì)自己所寫(xiě)的代碼負(fù)責(zé)，在出現(xiàn)問(wèn)題時(shí)也能更快的進(jìn)行響應(yīng)，而無(wú)需等待第三方的反饋。

5.擁有一位經(jīng)驗(yàn)豐富的領(lǐng)導(dǎo)

在比較復(fù)雜的項(xiàng)目中，一位經(jīng)驗(yàn)豐富的領(lǐng)導(dǎo)可以發(fā)揮重要作用。我曾有機(jī)會(huì)在產(chǎn)品瀏覽器領(lǐng)域工作多年(在蘋(píng)果和諾基亞)，這讓我對(duì)瀏覽器的構(gòu)建以及各組件的組成方面有著比較深刻的理解。

當(dāng)沒(méi)有這方面經(jīng)驗(yàn)的開(kāi)發(fā)者看到需要組合一個(gè)瀏覽器的大量技術(shù)和規(guī)范時(shí)，可能會(huì)感到不知所措，但我能夠清楚地知道如何將它們合理的組合在一起并使其工作。

在瓢蟲(chóng)瀏覽器的開(kāi)發(fā)過(guò)程中，參與其中的開(kāi)發(fā)者不需要過(guò)多考慮自己的想法或所寫(xiě)的代碼是否可行，而是可以直接在與團(tuán)隊(duì)進(jìn)行簡(jiǎn)單溝通后便開(kāi)始工作，這會(huì)為整個(gè)項(xiàng)目省了大量時(shí)間，參與者也不會(huì)因?yàn)檫^(guò)多的意見(jiàn)分歧而產(chǎn)生不良情緒。

在更實(shí)際的情況下，我真正負(fù)責(zé)的工作通常是在各組件的鏈接與交互之間-瀏覽器的部分沒(méi)有嚴(yán)格指定(例如布局和渲染)。對(duì)于缺乏經(jīng)驗(yàn)的瀏覽器開(kāi)發(fā)人員來(lái)說(shuō)，他們可以更專注自己所擅長(zhǎng)的領(lǐng)域而不必過(guò)多擔(dān)心其他問(wèn)題。

三、關(guān)于再造瀏覽器：杠精之間的討論

既然有了Chrome、Firefox瀏覽器，為什么還要再造一個(gè)呢？這當(dāng)然不是個(gè)好主意。

一位Reddit用戶對(duì)于之所以會(huì)出現(xiàn)“再造瀏覽器”的情況，是因?yàn)闅v史上所有的瀏覽器都構(gòu)建了自己的“怪癖”庫(kù)，或者超出了標(biāo)準(zhǔn)范圍的功能，或者干脆不符合標(biāo)準(zhǔn)。他還舉例說(shuō)：IE、Chromium、Safari一直都是“越界”來(lái)滿足用戶的需求，并期待自己的實(shí)現(xiàn)版本能成為標(biāo)準(zhǔn)。這位用戶還吐槽：Safari是唯一一個(gè)給我?guī)?lái)真正麻煩的瀏覽器。

簡(jiǎn)言之，用戶所期望的域?yàn)g覽器的標(biāo)準(zhǔn)本身就存在差距。

即便再造一個(gè)，也可能只會(huì)是制造適用于某些站點(diǎn)的瀏覽器。因?yàn)橛械木W(wǎng)站只支持Chrome。很多用戶在遇到類似的情況下只能選擇它，而放棄Firefox。

其實(shí)不管重寫(xiě)一個(gè)瀏覽器是不是個(gè)偽需求，但一位Reddit用戶仍然對(duì)此表示了贊許：“Kling的努力遠(yuǎn)超過(guò)了它的體量。”同時(shí)對(duì)于該瀏覽器的向后兼容性以跟上網(wǎng)絡(luò)標(biāo)準(zhǔn)并提供可行的替代平臺(tái)表示擔(dān)憂。

有網(wǎng)友進(jìn)一步分析，這個(gè)瀏覽器跟Chrome相比，是不需要完美的像素渲染的。并指出“如果排名前100的網(wǎng)站能在其上正常運(yùn)行，那這個(gè)項(xiàng)目才是成功的”。

有網(wǎng)友反駁道：這個(gè)瀏覽器是為開(kāi)發(fā)人員自己準(zhǔn)備的，不應(yīng)吹毛求疵。

四、寫(xiě)在最后

雖然時(shí)至今日，Ladybird瀏覽器中的部分功能依然存在一些錯(cuò)誤，甚至一些功能還需要很長(zhǎng)時(shí)間才能真正投入日常使用。但目前這只小瓢蟲(chóng)已經(jīng)震動(dòng)雙翅飛向了天空。Ladybird 的出現(xiàn)，增加了瀏覽器和瀏覽器引擎的多樣性，不少開(kāi)發(fā)者也表示了對(duì)項(xiàng)目的贊許：“這是一項(xiàng)令人難以置信的艱巨任務(wù)，雖然一個(gè)小型的非商業(yè)項(xiàng)目不太可提供一個(gè)可行的替代瀏覽器平臺(tái)。但這只小瓢蟲(chóng)成功擊碎了‘不可能’的標(biāo)簽?！?/p>

對(duì)此，Andreas Kling也表示：我們依然在努力讓Ladybird變得更好、更快，我們會(huì)持續(xù)關(guān)注關(guān)注Ladybird各類功能的正確性和功能支持，并對(duì)整體新能進(jìn)行優(yōu)化。

在博客末尾，Andreas Kling提到：盡管我不確定我們的工作方式可以直接轉(zhuǎn)移到其他軟件項(xiàng)目上(除非它們也是瀏覽器)并給其他團(tuán)隊(duì)帶來(lái)幫助，但是通過(guò)一個(gè)由聰明、專注的個(gè)人組成的小團(tuán)隊(duì)和一個(gè)知識(shí)淵博的領(lǐng)導(dǎo)者來(lái)指導(dǎo)他們，你可以嘗試構(gòu)建任何你想要的軟件。你當(dāng)然可以做到，即使沒(méi)有數(shù)十億美元和數(shù)百名員工，沒(méi)必要聽(tīng)取那些從未開(kāi)發(fā)過(guò)瀏覽器的失敗主義者的紙上談兵。