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高效能動畫及渲染原理》系列博文，比較詳細地描述了這部分相關知識。最後提一下，原稿最後一頁的資料在播放模式下都可以直接點選跳轉，還有每一頁的備註資訊如果看不見可能需要手動把畫面向上拖拽縮小一點。

硬廣時間

我的博文集《大史住在大前端》是關於前端基礎的文章，掃下面右邊的二維碼就可以看到，基本都是系列專題，沒有太多關於三大框架或是熱門技術的東西，都是基礎基礎基礎，或許會對你有幫助。最後再次感謝GDGXi'an提供的這次機會，讓我認識了好多好多優秀的大佬和開發者。

相關推薦