隨著云計(jì)算的普及和 HTML5 技術(shù)的快速發(fā)展，越來越多的應(yīng)用轉(zhuǎn)向了瀏覽器 / 服務(wù)器（B/S）架構(gòu)，這種改變讓瀏覽器的重要性與日俱增，視頻、音頻、游戲幾大核心場(chǎng)景也都在逐漸往 Web 使用場(chǎng)景切換。可以說，在 PC 端，瀏覽器已經(jīng)處于絕對(duì)的統(tǒng)治地位。

作為開發(fā)工程師，理解瀏覽器是如何工作的，對(duì)我們做業(yè)務(wù)的技術(shù)選型、架構(gòu)設(shè)計(jì)等都有非常重要的作用，讓我們可以準(zhǔn)確評(píng)估 Web 開發(fā)項(xiàng)目的可行性，站在更高維度審視頁面，以及在快節(jié)奏的技術(shù)迭代中把握住問題的本質(zhì)。

可是我發(fā)現(xiàn)，大部分前端工程師對(duì)瀏覽器的理解，其實(shí)并不深入透徹。

比如，面試時(shí)我通常會(huì)問候選者一個(gè)問題：“在瀏覽器里，從輸入 URL 到頁面展示中間發(fā)生了什么？”

這道題涉及到網(wǎng)絡(luò)、操作系統(tǒng)、Web 等一系列的知識(shí)，如果你要開發(fā)流暢的頁面，或者診斷 Web 頁面中的性能問題，那你就需要了解 URL 是怎么變成頁面的，只有弄懂這些之后，你才可以站在全局的角度定位問題或者寫出高效的代碼。

瀏覽器確實(shí)會(huì)涉及很多概念，不僅繁多而且瑣碎，包括網(wǎng)絡(luò)、渲染、安全，以及大前端相關(guān)的大量概念。比如，首屏的顯示就涉及了 DNS、HTTP、DOM 解析、CSS 阻塞、JavaScript 阻塞等技術(shù)因素，其中一項(xiàng)沒處理好就可能導(dǎo)致整個(gè)頁面的延時(shí)。如果沒有系統(tǒng)的學(xué)習(xí)，很容易出現(xiàn)遺漏和盲點(diǎn)。

所以，一開始你就需要建立起來瀏覽器的宏觀視角，通過宏觀視角搭建起“瀏覽器知識(shí)大廈”的腳手架，這樣就可以把這些知識(shí)點(diǎn)串成線，連成網(wǎng)，最終形成自己的知識(shí)體系，練就像專家一樣思考問題、解決問題的能力。

剛開始研究這東西時(shí)，沒少在網(wǎng)上找資料。新年期間自己也補(bǔ)了補(bǔ)功課，重新認(rèn)識(shí)瀏覽器，把網(wǎng)絡(luò)、頁面渲染、JavaScript、瀏覽器安全等知識(shí)串聯(lián)起來。能夠準(zhǔn)確快速的建立起此項(xiàng)技能樹，李兵推出的專欄《瀏覽器工作原理與實(shí)踐》給了我很大幫助，讓我對(duì)整個(gè)前端體系有了全新的認(rèn)識(shí)。

輸入口令「liulanqi8 」立省 30 元，

到手僅￥ 69，僅限「前 50 人」有效
作者李兵，現(xiàn)在是一名創(chuàng)業(yè)者，也是一名工程師。2008 年底，基于 Chromium 和 IE 發(fā)布了一款雙核瀏覽器：太陽花。這是國(guó)內(nèi)第一款雙核瀏覽器，使用它，除了能享受到 Chrome 的快捷之外，還能兼容只支持 IE 的站點(diǎn)。

開發(fā)過程中最大的挑戰(zhàn)是如何在 Chromium 中集成 IE 模塊，為此花了大量時(shí)間來研究 Chromium 的進(jìn)程架構(gòu)以及渲染流程。幸運(yùn)的是，最終發(fā)布的產(chǎn)品在沒有任何宣傳的情況下，日活達(dá)到了 20 多萬。

在 2011 年，老李去了盛大創(chuàng)新院，參與研發(fā) WebOS 項(xiàng)目。WebOS 的愿景是基于 WebKit 內(nèi)核打造一個(gè)能和安卓并存的操作系統(tǒng)。

李兵在團(tuán)隊(duì)中負(fù)責(zé) HTML5 特性的實(shí)現(xiàn)，比如實(shí)現(xiàn) Web Workers、Application Cache、LocalStorage、IndexedDB、CSS3 部分動(dòng)畫效果等。這些工作經(jīng)歷讓他對(duì)瀏覽器的整個(gè)渲染流程，以及 HTML5 的發(fā)展趨勢(shì)有了更加深入的認(rèn)知。

再之后，去了順網(wǎng)科技，和團(tuán)隊(duì)打造了一款給全國(guó)網(wǎng)吧使用的“F1 瀏覽器”，日啟量達(dá)到 2000 萬。

由于網(wǎng)吧的電腦環(huán)境異常復(fù)雜，頁面劫持經(jīng)常發(fā)生，所以對(duì)頁面安全提出來更高的要求。再加上每天千萬級(jí)別的啟動(dòng)量，所以頁面的加載速度和流暢度也至關(guān)重要，它們直接決定了用戶的流失程度。這段工作經(jīng)歷，讓李兵對(duì)瀏覽器安全有了全新的理解，同時(shí)又對(duì)頁面性能的優(yōu)化有了系統(tǒng)性的認(rèn)知。

你能獲得什么？

老李會(huì)用通俗易懂的語言，深入淺出的講解方式，圖文并茂的展現(xiàn)形式把網(wǎng)絡(luò)、頁面渲染、JavaScript、瀏覽器安全等知識(shí)串聯(lián)起來，從而讓你對(duì)整個(gè)前端體系、瀏覽器有個(gè)全新的認(rèn)識(shí)。

比如下面是“渲染流水線的總結(jié)圖”：