你好，我是李兵，現在是一名創業者，也是一名工程師。<br> 我是 2005 年開始工作的，基于對新技術的興趣與敏感性，2008 年 Chromium 項目一開源，我便第一時間下載體驗。隨后，在創業階段的我基于 Chromium 和 IE 發布了一款雙核瀏覽器：太陽花。<br> 這是國內第一款雙核瀏覽器，使用它，除了能享受到 Chrome 的快捷之外，還能兼容只支持 IE 的站點。開發過程中最大的挑戰是如何在 Chromium 中集成 IE 模塊，為此我花了大量時間來研究 Chromium 的進程架構以及渲染流程，好在功夫不負有心人，最終發布的產品也很對得起我的努力，在沒有任何宣傳的情況下，日活達到了 20 多萬。<br> 在 2011 年，我就去了盛大創新院，參與研發 WebOS 項目。WebOS 的愿景是基于 WebKit 內核打造一個能和安卓并存的操作系統。我在團隊中負責 HTML5 特性的實現，比如實現 Web Workers、Application Cache、LocalStorage、IndexedDB、CSS3 部分動畫效果等。這些工作經歷讓我對瀏覽器的整個渲染流程，以及 HTML5 的發展趨勢有了更加深入的認知。不過遺憾的是，這個項目沒能最終上線。<br> 再之后，我去了順網科技。順網科技是一家網吧服務提供商，在順網我和團隊打造了一款給全國網吧使用的“F1 瀏覽器”，日啟量達到 2000 萬。由于網吧的電腦環境異常復雜，頁面劫持經常發生，所以對頁面安全提出來更高的要求；再加上每天千萬級別的啟動量，所以頁面的加載速度和流暢度也至關重要，它們直接決定了用戶的流失程度。這段工作經歷，讓我對瀏覽器安全有了全新的理解，同時又對頁面性能的優化有了系統性的認知。<br> 算下來，我已經處在這個領域從業十余年，這過程中我踩過不少坑，也積累了不少經驗，成長很多。從今天起，我會借此機會將我的工作經驗分享給你，希望能對你的工作或生活有所幫助，讓你學有所得、學有所用。<br><br> ## 對于應用，瀏覽器的地位一直很重要 1995 年，美國網景公司因“網景瀏覽器”的發布而快速崛起，之后網景試圖開發一個依靠瀏覽器的網絡操作系統。這引起了微軟的注意和警惕，于是同年微軟發布 Windows 95，并捆綁了 IE，大獲成功，到 2002 年，微軟就已經占據了瀏覽器市場 80% 的份額。<br> 直到 2008 年 Chrome 瀏覽器橫空出世，這種壟斷局面才算被打破。Chrome 瀏覽器完全顛覆了之前瀏覽器的架構設計，在速度和安全性上占據了絕對優勢，市場份額占比劇增（據 StatCounter 2019 年的統計數據顯示，Chrome 占據了 63% 市場份額）。在 2010 年底，Google 還推出了一款網絡操作系統——ChromeOS。<br> 可以看到，瀏覽器自誕生之日起，其地位就一直很重要，而且這種重要性還在不斷加強。我從瀏覽器的發展歷程中梳理出了**三個大的進化路線，希望能讓你了解目前的 Web 應用到底能做什么，以及未來能適用于那些新領域**。<br> **第一個是應用程序 Web 化**。隨著云計算的普及和 HTML5 技術的快速發展，越來越多的應用轉向了瀏覽器 / 服務器（B/S）架構，這種改變讓瀏覽器的重要性與日俱增，視頻、音頻、游戲幾大核心場景也都在往 Web 的使用場景切換。<br> **第二個是 Web 應用移動化**。對于移動設備應用，Web 天生具有開放的基因，雖然在技術層面還有問題尚待解決（比如，渲染流程過于復雜且性能不及原生應用、離線時用戶無法使用、無法接收消息推送、移動端沒有一級入口），但 Google 推出了 PWA 方案來整合 Web 和本地程序各自的優勢。順便說一句，PWA 也是我個人非常期待的方案。<br> **第三個是 Web 操作系統化**。在我看來，Web 操作系統有兩層含義：一是利用 Web 技術構建一個純粹的操作系統，如 ChromeOS；二是瀏覽器的底層結構往操作系統架構方向發展，在整個架構演化的大背景下會牽涉諸多改變，下面列舉一些我認為相對重要的改變。<br> * Chrome 朝著 SOA 的方向演化，未來很多模塊都會以服務的形式提供給上層應用使用； * 在瀏覽器中引入多種編程語言的支持，比如新支持的 WebAssembly； * 簡化渲染流程，使得渲染過程更加直接高效； * 加大對系統設備特性的支持； * 提供對復雜 Web 項目開發的支持。 也就是說，**瀏覽器已經逐步演化成了操作系統之上的“操作系統”**。<br><br> ## 為什么需要學習瀏覽器工作原理？ 前面我站在大廠的視角，帶你回顧了瀏覽器的發展歷程，梳理了瀏覽器的進化路線，分析了瀏覽器發展的大趨勢。那接下來，我們再一起看看，開發者為什么需要了解瀏覽器的工作原理。 ### 1. 準確評估 Web 開發項目的可行性 隨著 Web 特性的極大豐富和瀏覽器性能的提升，越來越多的項目可以用 Web 來開發。所以，了解瀏覽器是如何工作的，能夠讓你更加準確地決策是否可以采用 Web 來開發項目。<br> 舉個例子，去年我做了一個健身房虛擬教練項目，時間緊，任務重，其中有大量的高速渲染動畫和快速交互的場景需求。如果采用傳統的 C++ 來開發界面，那基本上不可能按時交付，而且后期的維護也會非常麻煩。于是我決定采用 Web 方案來開發界面，因為采用 Web 方案可以降低開發成本，縮短交付周期。最終利用這個方案，我實現了這個項目的提前交付，并且效果也很喜人，大家對實現的效果非常滿意。<br> 對于這個例子，我認為我所做的最正確的事就是**選對了方案**，但反過來想，如果我對瀏覽器和 HTML5 的內容不了解，那可能我很容易就放棄了這個最優方案。 ### 2. 從更高維度審視頁面 作為一名合格的開發者，你還要具備一項重要的技能，那就是：**要能站在用戶體驗角度來考慮頁面性能**。我們看下面幾個常見的用戶體驗指標。<br> * 當用戶請求一個網站時，如果在 1 秒內看不到關鍵內容，用戶會產生任務被中斷的感覺。 * 當用戶點擊某些按鈕時，如果 100ms 內無法響應，用戶會感受到延遲。 * 如果 Web 中的動畫沒有達到 60fps，用戶會感受到動畫的卡頓。 這里的頁面加載時長、用戶交互反饋時長、Web 動畫中的幀數都決定了用戶體驗的流暢度，并最終決定了用戶體驗的效果。在用戶體驗尤其重要的今天，我們必須能夠有效地解決這些體驗問題，以免給產品造成不可挽回的傷害。<br> 但通常，這些指標是由一系列的復雜因素導致的。如果你要開發流暢的頁面，或者診斷 Web 頁面中的性能問題，那你就需要了解 URL 是怎么變成頁面的，只有弄懂這些之后，你才可以站在全局的角度定位問題或者寫出高效的代碼。<br> 你當然可以把瀏覽器看成一個黑盒，左邊輸入一個 URL，經過黑盒處理之后，右邊返回你預期的效果。如果你對黑盒一無所知，你倒依然可以寫前端代碼，也可以使用很多最佳實踐的策略來優化代碼，這就如同不了解操作系統的工作原理同樣可以在操作系統上寫應用一樣。<br> 但如果你理解了這個黑盒子是如何工作的，那情況就不同了。你可以站在更高的維度審視你的項目，通過全視野快速定位項目中不合理的地方。比如，首屏的顯示就涉及了 DNS、HTTP、DOM 解析、CSS 阻塞、JavaScript 阻塞等技術因素，其中一項沒處理好就可能導致整個頁面的延時。<br> 而如果你了解了瀏覽器的工作原理，更加可以把這些知識點串成線，連成網，最終形成自己的知識體系，練就像專家一樣思考問題、解決問題的能力。 ### 3. 在快節奏的技術迭代中把握本質 從 2011 年到現在，前端技術出現了大爆炸式增長，各種新技術層出不窮。我認為 **Node.js 是前端發展的一個核心推動力**。Node.js 是基于 Chrome 的 JavaScript 引擎 V8 來實現的，它的特點是可以脫離瀏覽器環境來執行 JavaScript，于是大家驚訝地發現，原來也可以使用 JavaScript 寫服務器程序呀！<br> 盡管 Node.js 的誕生時間不長，但其周邊已經形成了一個龐大的生態系統。與此同時，各種新標準、新技術紛至沓來，前端生態空前繁榮。<br> 為什么 Node.js 能如此快速地發展？根本原因還是瀏覽器功能以及整個前端的開發環境，不足以支撐日益增長的需求，所以“變化”是這段時期的主旋律。這種變化直接擴大了前端工程師的知識半徑，**這也導致很多前端開發工程師變成了爆棧工程師**。<br> 雖然前端技術變化快，不過我覺得這里有更大的機遇，誰能快速抓住變化，誰就能收獲這波變化帶來的紅利。<br> 我相信，隨著腳本執行效率的提高、頁面渲染性能的提升和開發工具鏈的完善，接下來的前端會進入一個相對平穩的階段。通俗地理解就是：**等到核心技術足以支撐核心需求，那么前端生態會進入一個相對穩定的狀態**。<br> 如果了解了瀏覽器的工作機制，那么你可以梳理出來前端技術的發展脈絡，更加深刻地理解當前的技術，同時你也會清楚其不足之處，以及演化方向。那么接下來，我們看看前端技術是如何針對這些核心訴求做演進的？<br> **首先是腳本執行速度問題**。比如針對 JavaScript 設計缺陷和執行效率的問題，可以從以下兩個途徑去解決： * 不斷修訂和更新語言本身，這樣你就應該知道 ES6、ES7、ES8，或者 TypeScript 出現的必要性。這種修訂對目前生態環境的改動是最小的，所以推行起來會比較容易。 * 顛覆性地使用新的語言，這就是 WebAssembly 出現的原因。WebAssembly 需要經過編譯器編譯，所以體積小、執行速度快，使用它能大幅提升語言的執行效率，但是語言本身的完善，和生態的構建都是需要花很長時間來打造的。 **其次是前端模塊化開發**。比如，隨著 Web 應用在各個領域的深入，Web 工程的復雜程度也越來越高，這就產生了模塊化開發的需求，于是相應出現了 WebComponents 標準。我們所熟悉的 React 和 Vue 都在漸進地適應 WebComponents 標準，同時各種前端框架的最佳實踐也會反過來影響 WebComponents 標準的制定。<br> 如果理解了瀏覽器工作原理，那么你會對 WebComponents 中涉及的 Shadow DOM、HTML Templates 等技術有更深刻的理解。<br> **最后是渲染效率問題**。同樣，如果理解瀏覽器的渲染流程，那么你應該知道目前頁面的渲染依然存在很大缺陷，然后你就清楚如何避開這些問題，從而開發出更加高效的 Web 應用。與此同時，Chrome 團隊也在著手改善這些缺陷，比如正在開發的下一代布局方案 LayoutNG，還有渲染瘦身方案 Slim Paint，其目的都是讓渲染變得更加簡單和高效。<br> 綜上可以看出，觸發這些改變的背后因素是當前技術制約了現實的需求，所以**了解瀏覽器是如何工作的，能讓你站在更高維度去理解前端**。 ## 專欄內容 所以，我希望通過這個專欄的學習，能讓你系統地掌握瀏覽器工作原理，并把理論應用到前端實踐。 下面就是這個專欄的目錄，通過它你可以快速了解下這個專欄的知識體系結構。  ## 總結 我希望通過這個專欄的學習，能讓你重新認識瀏覽器，并把網絡、頁面渲染、JavaScript、瀏覽器安全等知識串聯起來，從而讓你對整個前端體系有全新的認識。同時，我會保證用最簡單通俗的語言把復雜的問題講清楚，這也意味著我會在本專欄上花更多時間，所以也希望你能和我一起加油，高質量學完本專欄。<br> 最后我給你留個思考題吧：**你認為現代的前端工程師需要具備哪些核心的基礎技能呢？**<br> 歡迎你把你的想法寫到留言區，我們一起來交流和探討，共同進步。