一、前言：前端的工作離不開瀏覽器，那麼明白瀏覽器是如何工作的，也成為了面試官幾乎必問的問題了。
我們常見的問題有：
1.當我輸入乙個url之後瀏覽器是如何渲染介面的
2.瀏覽器快取靜態資源的規則
如果你對這些問題還有不清楚的地方，那我們一起共同學習吧
二、chrome瀏覽器簡介
chrome瀏覽器多程序架構
優點：多程序模型提公升了瀏覽器的穩定性、流暢性和安全性
缺點：更高的資源占用。因為每個程序都會包含公共基礎結構的副本，這就意味這瀏覽器會消耗跟多的記憶體資源
更複雜的體系架構。瀏覽器各模組之間耦合性高、拓展性差
三、理解一次完整的請求
使用者在位址列中輸入內容，瀏覽器器會做什麼
1.url解析判斷時搜尋內容還是url
2.url請求過程
首先，網路盡成灰查詢本地快取了該資源。如果有快取，那直接返回資源給瀏覽器程序，如果在快取中沒有查詢到資源那麼直接進入網路請求流程。這請求前的第一步是要進行dns解析，以獲取請求網域名稱的伺服器ip位址。如果請求協議是https，那麼還需要建立tls鏈結
瀏覽器渲染頁面過程
今天在某論壇上看到這麼乙個問題。現在頁面有個空div，我用js向裡面插入一段html,然後獲取div的高度，發現有時候得到的div的高度不準確，請問各位有什麼方法解決一下。那麼為了更好的理解這個問題，咱們今天來聊聊瀏覽器的渲染過程 解析html 解析css 構建render tree 布局 layo...
瀏覽器渲染頁面過程
一 瀏覽器載入和渲染html的順序 二 js的載入 3 因為瀏覽器的載入是從上到下一行一行的載入的，所以如果頁面同事定義了兩個相同命名的js函式，後面的函式會覆蓋前面的函式。三 html頁面載入和解析流程 四 domcontentloaded事件 domcontentloaded事件在許多webki...
瀏覽器渲染頁面過程
簡單點來說就是建立了dom以後，還未完全渲染，就去獲取dom的高度，顯然是會出問題的。如下，可找個自行體會 123456789 那麼為了更好的理解這個問題，咱們今天來聊聊瀏覽器的渲染過程 解析html 解析css 構建render tree 布局 layout 繪製 painting 1.解析htm...