瀏覽器做的事情就是把乙個url變成乙個顯示在螢幕上的網頁。了解它的工作原理，有助於我們做效能優化和debug。**
大概過程：
瀏覽器向服務端發起http(s)網路請求，獲取html檔案。
對html檔案進行解析，構建，得到dom樹。
計算dom樹上的css屬性。
根據css屬性對元素逐個進行渲染，得到記憶體中的位圖。
將位圖繪製到介面。
為什麼在網路差的情況下，會看到頁面是逐步載入出來的？瀏覽器載入頁面是乙個流式處理的過程。
從獲得http響應開始，就產生了流式的資料，後續的 解析構建dom樹、計算css屬性、渲染元素、繪製，都是盡可能地快處理上一步的產出，而不需要等到上一步驟完全結束了，才開始處理上一步的產出，所以我們在瀏覽網頁時，才會看到逐步出現的頁面。
瀏覽器和服務端之間的通訊使用的是http協議。
http 協議是一種建立在** tcp 傳輸層協議上的應用層協議，它規定了通訊雙方使用request-response模式和文字格式**進行通訊。
// 請求報文
// 1.請求行
// 2.請求頭
host: time.geekbang.org
// 3.請求頭空兩行之後是 請求體，可能包含表單或檔案
// 響應報文
// 1.響應行
// 2.響應頭
date: fri, 25 jan 2019 13:28:12 gmt
content-type: text/html
content-length: 182
connection: keep-alive
location:
strict-transport-security: max-age=15768000
// 3.響應頭空兩行之後是 響應體，可能一段html**。
描述get
瀏覽器通過位址列訪問頁面都是 get 方法。
post
表單提交產生 post 方法
connect
http**使用的方法。可通過伺服器**訪問別的**。現在多用於 https 和 websocket。
狀態碼描述
1xx臨時響應，表示希望客戶端繼續傳送請求。(在http庫被處理)。
2xx請求成功。
3xx請求的目標有變化，希望客戶端進一步處理。
301永久重定向。
302臨時重定向。
304客戶端快取(頁面、)沒有更新。
4xx客戶端出錯。
403無訪問許可權。
404請求的資源(頁面、介面)不存在。
5xx服務端出錯。
500服務端錯誤。
503服務端暫時性錯誤，可以一會再試。
request header
描述host
訪問的目標位址。
cookie
存放cookie字串。
connection
指定是否復用tcp連線。http/1.1預設是長連線，http/1.0預設是短連線。
if-modified-since
資源更新時間。如果在該時間之後內容沒有更新，則響應304。
if-none-match
資源摘要資訊e-tag。如果e-tag沒有變，則響應304。反之，響應200和最新的e-tag。
accept
瀏覽器接受的資料型別。例如：text/html。
accept-encoding
瀏覽器接受的編碼格式。例如：gzip。
accept-language
瀏覽器接受的語言。
user-agent
客戶端標識(瀏覽器標識、作業系統標識、瀏覽器核心標識)。
response header
描述set-cookie
瀏覽器會把指定的cookie儲存到本地，下次請求時自動帶上cookie。
expires
本地快取資源的過期時間。決定了瀏覽器下次請求是否直接使用本地快取。
cache-control
用於標識各級快取儲存的時間。例如max-age=0，標識不要快取。
etag
資源的摘要資訊。搭配if-none-match使用。
last-modified
資源的更新時間(精確到秒)。搭配if-modified-since使用。
content-length
內容長度。有利於瀏覽器判斷內容是否已結束。
content-encoding
內容編碼方式。通常是gzip。
via服務端的請求鏈路。常用於除錯。
date
當前的伺服器日期。
server
服務端型別。例如：nginx、tomcat。
請求體一般用於提交表單的場景，一些常見的 body 格式是：
https使用tls加密通道來傳輸http內容。 有兩個作用，一是確定請求的目標服務端身份，二是保證傳輸的資料不會被網路中間節點竊聽或者篡改。
http 2.0 最大的改進有兩點，一是支援服務端推送，二是支援 tcp 連線復用。
服務端推送能夠在客戶端傳送第乙個請求到服務端時，提前把一部分內容推送給客戶端，放入快取當中，這可以避免客戶端請求順序帶來的並行度不高，從而導致的效能問題。
tcp 連線復用，則使用同乙個 tcp 連線來傳輸多個 http 請求，避免了 tcp 連線建立時的三次握手開銷，和初建 tcp 連線時傳輸視窗小的問題。
乙個瀏覽器是如何工作的？
瀏覽器首先使用 http 協議 或者 https 協議，向服務端請求頁面。把請求回來的 html 經過解析，構建成 dom 樹。計算 dom 上的屬性。最後根據 css 屬性對元素逐個進行渲染，得到記憶體中的點陣圖。乙個可選的步驟是對位圖進行合成，這會極大地增加後續繪製的速度。合成之後，再繪製到介面...
推薦乙個瀏覽器 搜狗
上邊顯示自己的登陸的賬戶，有各種工具，在最下邊一行中的各種工具很強大，可以新增各種工具，搜狗瀏覽器本身提供了各種常用的瀏覽器，使用起來十分方便，我用的較多的有訊息盒子 在訊息盒子中可以繫結自己的各種賬號，各種通知都可以進行瀏覽 收藏夾也十分有用，個人比較喜歡 還有上邊的京東 了解購物資訊很方便的 本...
2020前端面試（一） 瀏覽器渲染機制篇
點這裡，歡迎關注 外鏈轉存失敗,源站可能有防盜煉機制,建議將儲存下來直接上傳 img oa3fsg6i 1601978311602 在生成dom樹和cssom樹之後，會遍歷dom樹的每乙個可見的節點，對於每個可見的節點，找到cssom樹中對應的規則，然後組合在一起，最終生成一棵渲染樹。注意 渲染樹只...