GDG Xi'an DevFest 2019 閃電演講 -《假如我是一個瀏覽器》PPT（經典多圖，建議收藏）

• 2019 年 11 月 29 日
• 筆記

GDG Xi'an DevFest2019演講PPT鏈接： http://tmp.link/f/5dd9e6bf461b6

閃電演講《假如我是一個瀏覽器》PPT鏈接： https://github.com/dashnowords/blogs/tree/master/Demo/DevFest2019

關於我的一篇雞湯文，獻給所有努力中的野生前端： 仰望星空的人，不應該被嘲笑–DevFest閃電演講嘉賓–史文強

摘要

內容講述了HTML，CSS和JavaScript文件從程式碼到瀏覽器中圖形的基本過程，實際上每個階段正好代表了高級前端工程師可以選擇的三大細分方向——架構師，工程化，圖形學。PPT基本上全是圖，引用了一些知名的前端神圖，大部分都是自己一點點做的，畢竟圖的表現力比文字要生動直觀一些，原稿幾乎每一頁都加了備註！！！，有需要的可以在我的部落格或者GDG西安官方公眾號獲取到。

作者簡介

請求階段

請求階段從解析DNS開始，它是一個遞歸的過程，可以在Linux系統中使用dig+trace工具進行追蹤查看；查詢到地址後就需要開始建立連接（三次握手建立連接），然後從伺服器獲取第一個文件，通常是index.html，獲取到文件後就需要根據響應頭裡的資訊進行一些處理，對這塊不太熟悉的同學可以閱讀《圖解Http》一書，強制快取和協商快取這一塊是很重要的考點，index.html在解析時可能還會碰到請求其他資源的情況，這時又會引出CDN等等其他話題，本次分享中並未涉及。如果對於前端可用性及資源部署方面感興趣，可以考慮向架構師的方向發展，也就是只將前端應用視為整個鏈路中的一環，嘗試去關注整個鏈路中各個環節，前端工程師切入時並不需要特別關注去解決細枝末節的技術問題，那畢竟需要時間和經驗的積累，請記住你是有夥伴的，我個人比較推薦前端工程師嘗試建設全鏈路的異常監控體系，去了解各個環節有哪些關鍵指標，如何去呈現，如何去判斷異常等等，以儘可能穩定有效的方式把關鍵資訊呈現給能解決問題的人。

解析階段

我在分享時已經提及過，解析階段的關鍵詞就是「編譯原理」，前端基礎的HTML，CSS，JS，以及常見的工程化工具例如Webpack，Babel，Eslint等等，全部都是基於編譯原理來運作的，如果從純學術的角度來看，它的確很晦澀，但是從應用的角度來理解，實際上無論是分詞，轉換還是遍歷AST以及最終的程式碼生成，實際上都是看得見摸得著的，並不算特別難理解，B站上有很多中國外的《編譯原理》課程錄像，你懂的（B站真的是學慣用的）。其中還涉及到了一些基本的數據結構和基礎演算法的知識，這裡的知識是對基本功的硬考驗，也就是「設計模式」「數據結構」和「基礎演算法」的三座大山，爬山很慢，但真的很值。這一塊的知識可以翻看朱永盛的《Webkit技術內幕》一書，慎重，沒有老司機帶的話這本書很容易看的人懷疑人生。

種樹階段

種樹階段只是戲稱，就是為了不同的目的構建了許許多多的樹和層。HTML解析後生成DOM樹，它表示文檔的結構，CSS在內部優化時也會生成樹，為了將用於渲染的資訊整合在一起，兩者被合併生成了RenderObject樹，為了解決層疊順序問題，又在此基礎上生成了RenderLayer層，為了利用硬體加速渲染，又為滿足另一些條件的層生成CompositingLayer合成層，合成層又使用GraphicsLayer來進行後端存儲。概念之多，相對複雜。為了排除干擾，本次分享中並沒有講述Chrome瀏覽器的多進程模型和多執行緒結構，它們只是為了更好更高效地處理好關鍵渲染步驟，一次性資訊量太大反而會影響吸收。

畫畫階段

畫畫階段實際上是指將對象資訊通過光柵化處理後得到點陣圖資訊並展示在顯示器上的過程，PPT中並沒有涉及，它涉及到很多圖形學相關的知識，基本的WebGL以及Chromium渲染管線方面的知識。對此感興趣的讀者可以掃描下面的二維碼關注我技術部落格中《Web高性能動畫及渲染原理》系列博文，比較詳細地描述了這部分相關知識。最後提一下，原稿最後一頁的資料在播放模式下都可以直接點擊跳轉，還有每一頁的備註資訊如果看不見可能需要手動把畫面向上拖拽縮小一點。