極客時間出品的《瀏覽器工作原理與實踐》由李兵所作，李兵是前盛大創新院高階研究員。本專欄透過瀏覽器看懂前端本質。
訂閱價格：
原價¥99 ，限時¥68 2344 人已學習 · 共36講 · 每週二 / 四 / 六更新， 本課程為音訊+圖文。可在極客時間APP/小程式/網站上永久觀看。
用我的邀請購買，返現24元。購買成功之後，請加我微訊號 dismissmewp ，備註：返現。
《瀏覽器工作原理與實踐》課程介紹
瀏覽器是上網的入口，是網際網路的“咽喉”。我們每天的工作、學習和娛樂等都離不開瀏覽器，各行各業、越來越多的應用也都依賴於此，特別是隨著雲端計算的普及和HTML5技術的快速發展，它的重要性更是與日俱增。
為了能準確評估Web開發專案的可行性，站在更高維度審視頁面，以及在快節奏的前端技術迭代中把握住問題的本質，完成前端技能進階，學習瀏覽器的工作原理就勢在必行了。
特別是前端技術出現了大爆炸式增長，各種新技術層出不窮，為了避免疲於應付，你可以通過學習瀏覽器的工作原理，掌握前端知識的本源，以不變應萬變。
《瀏覽器工作原理與實踐》講師介紹
李兵，前盛大創新院高階研究員。2008年，基於Chromium和IE釋出了第一款雙核瀏覽器（太陽花瀏覽器），在沒有任何宣傳的情況下，日活躍使用者數達到20多萬；而後進入盛大創新院，參與WebOS專案，在團隊中負責HTML5特性的實現；再之後，在順網科技和團隊打造了一款給全國網咖使用的“F1瀏覽器”，日啟量達2000萬。
算下來，李兵已經深耕瀏覽器和前端領域十餘年，有著豐富的理論和實踐經驗。為便於你快速對瀏覽器有個巨集觀的把控，李兵和極客時間團隊專門做了一個小視訊“工程師視角下的瀏覽器是怎樣的”：
在這門講解瀏覽器工作原理的課程中，李兵會用深入淺出的講解方式、圖文並茂的展現形式，把網路、頁面渲染、JavaScript、瀏覽器安全等知識串聯起來，從而讓你高質量、高效率地學習這門課程，系統掌握瀏覽器工作原理，並同時把理論應用到前端實踐中去。
《瀏覽器工作原理與實踐》課程模組
課程共36講，分為7大模組。
1. 巨集觀視角下的瀏覽器
本模組通過Chrome的多程式架構來介紹HTTP請求流程、導航流程和頁面的渲染流程，帶你從巨集觀視角建立瀏覽器的知識體系。
2. 瀏覽器中的JavaScript執行機制
雖然語法上和C語言很像，但是JavaScript背後的機制卻又完全不同，很多人學習JavaScript時經常處於似懂非懂的狀態。本模組則是站在瀏覽器的視角，來分析JavaScript程式碼的執行過程。如果你能掌握這些執行過程，那麼很多諸如閉包、變數提升等疑難問題就會迎刃而解。
3. V8工作原理
繼續深入探討來自Google的JavaScript引擎V8，分析其執行流程，細化講解JavaScript中資料是如何儲存和回收的。通過本模組的學習，你離打造高效能且節約記憶體的Web應用就更近一步了。
4. 瀏覽器中的頁面事件迴圈系統
要讓不同型別的任務在主執行緒中有條不紊地執行，這就需要有一個事件迴圈系統，用來負責接收、排程這些不同的事件。本模組會深入探討Web頁面中的事件迴圈系統，講解頁面中的微任務和巨集任務的實現機制，最後還會介紹一些WebAPI是如何與頁面的事件迴圈系統結合\b使用的。理解事件迴圈，能讓你從更高維度理解頁面是如何執行的，並加深你對頁面中非同步事件的理解。<
5. 瀏覽器中的頁面
頁面是瀏覽器的核心，瀏覽器中的所有功能點都是服務於頁面的。本模組會對頁面做全面的介紹，包括構建頁面的核心流程、頁面效能的分析過程。最後還會介紹一些應用場景，比如流行的前端框架為什麼要有虛擬DOM，最近比較火的PWA的工作原理，以及WebComponent。
6. 瀏覽器中的網路
網路的重要性毋庸置疑，但是很多前端工程師卻\b往往忽視它的存在。本模組通過HTTP/1、HTTP/2和HTTP/3的介紹，讓你全面瞭解瀏覽器中的網路，並最終讓你能向下理解其底層原理、向上理解其應用方向。
7. 瀏覽器安全
和瀏覽器打交道的內容都是通過網路進行的，但通常通過網路傳輸的內容是不被瀏覽器信任的，所以對於可能存在危險的地方都要重點防護。本模組會通過例項，向你介紹為何會出現各種安全問題，以及如何避免這些安全攻擊。
《瀏覽器工作原理與實踐》課程目錄
開篇詞丨參透了瀏覽器的工作原理，你就能解決80%的 前端難題
巨集觀視角下的瀏覽器
Chrome架構：僅僅開啟了 1個頁面，為什麼有4個程式？
TCP協議：如何保證頁面檔案能被完整送達瀏覽器？
HTTP請求流程：為什麼很多站點第二次開啟速度會很快？
導航流程：從輸入URL到頁面展示，這中間發生了什麼？
渲染流程（上)：HTML、CSS和JavaScript檔案，是如何 變成頁面的？
渲染流程（下)：HTML、CSS和JavaScript檔案，是如何 變成頁面的？
瀏覽器中的JavaScript執行機制
變數提升：JavaScript程式碼是按順序執行的嗎？
呼叫棧：為什麼JavaScript程式碼會出現棧溢位？
塊級作用域：var缺陷以及為什麼要引入let和const?
詞法環境和閉包：程式碼中出現相同的變數，JavaScript引 擎是如何選擇的？
this:從JavaScript執行上下文的視角講清楚this
V8工作原理
棧空間和堆空間：資料是如何儲存的？
垃圾回收：垃圾資料是如何自動回收的？
編譯器和直譯器：V8是如何執行一段JavaScript程式碼的？
瀏覽器中的頁面迴圈系統
訊息佇列和事件迴圈：頁面是怎麼“活”起來的？
WebAPI: setTimeout 是怎麼實現的？
WebAPI: XMLHttpRequest 是怎麼實現的？
巨集任務和微任務：不是所有任務都是一個待遇
Promise:使用Promise,告別回撥函式
async/await:使用同步的方式去寫非同步程式碼
瀏覽器中的頁面
頁面效能分析：利用Chrome做Web效能分析
d〇M樹：JavaScript是如何影響DOM樹構建的？
樣式選擇：渲染引擎是如丨可為DOM節點選擇樣式屬性的？
分層和合成機制：為什麼CSS動畫比JavaScript高效？
頁面效能：如何系統地優化頁面？
虛擬DOM:虛擬DOM和實際的DOM有何不同？
漸進式網頁應用（PWA):它究竟解決了 Web應用的哪些 問題？
WebComponent:像搭積木一樣構建Web應用
瀏覽器中的網路
HTTP/1: HTTP效能優化
HTTP/2:如何提升網路速度？
HTTP/3:甩掉TCP、TLS的包揪，構建高效網路
瀏覽器安全
同源策略：為什麼XMLHttpRequest不能跨域請求資源？
跨站指令碼攻擊（XSS):為什麼Cookie中有HttpOnly屬性？
跨站點請求偽造（CSRF): Chrome力什麼要讓iframe運 行在單獨的渲染程式中？
沙盒：頁面和系統之間的隔離牆
HTTPS:讓資料傳輸更安全
我的公眾號：猿人學 Python 上會分享更多心得體會，敬請關注。
***版權申明:若沒有特殊說明，文章皆是猿人學 yuanrenxue.com 原創，沒有猿人學授權，請勿以任何形式轉載。***