GDG Xi’an DevFest2019演講PPT鏈接：
閃電演講《假如我是一個瀏覽器》PPT鏈接：
關於我的一篇雞湯文，獻給所有努力中的野生前端：
摘要
內容講述了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渲染管線方面的知識。對此感興趣的讀者可以掃描下面的二維碼關注我技術博客中系列博文，比較詳細地描述了這部分相關知識。最後提一下，原稿最後一頁的資料在播放模式下都可以直接點擊跳轉，還有每一頁的備註信息如果看不見可能需要手動把畫面向上拖拽縮小一點。
硬廣時間
我的博文集《大史住在大前端》是關於前端基礎的文章，掃下面右邊的二維碼就可以看到，基本都是系列專題，沒有太多關於三大框架或是熱門技術的東西，都是基礎基礎基礎，或許會對你有幫助。最後再次感謝GDGXi’an提供的這次機會，讓我認識了好多好多優秀的大佬和開發者。
本站聲明:網站內容來源於博客園,如有侵權,請聯繫我們,我們將及時處理【其他文章推薦】
※台北網頁設計公司這麼多，該如何挑選?? 網頁設計報價省錢懶人包"嚨底家"
※網頁設計公司推薦更多不同的設計風格，搶佔消費者視覺第一線
※想知道購買電動車哪裡補助最多?台中電動車補助資訊懶人包彙整