瀏覽器跟伺服器要資料發生的事情

發表於 | 更新於 | 分類於 | 評論數：

瀏覽器的內部運作機制

網路請求流程

  • 搭配 Wireshark

網路連線

  • 是 single thread 的，一個請求即使用一個 network thread
  • 程序(process)、執行緒(thread)
    • 一個程序會有一個專屬編號 (PID)
    • 一個程序裡面會有很多的執行緒，等待被執行
      • 開啟 Chrome 瀏覽器：開啟一個程序(process)
      • 打開很多網頁：產生許多執行緒(thread)以滿足 Chrome 應用需求

title

DNS 解析

title

  • 建立 TCP/IP
    • TCP/IP（Transmission Control Protocol/Internet Protocol）是網路上的一種通訊協定，用於在不同設備或環境間傳送訊息
  • GET vs POST
    • HTTP 請求方法有 GET、POST、PUT、DELETE 等

OSI 架構

  • 是一種制定網路標準都會參考的概念性架構，依據網路運作方式，OSI模型共切分成7個不同的層級，每級按照網路傳輸的模式，定義所屬的規範及標準

title

TCP/IP 架構

  • 當瀏覽器發送網路請求時，會從應用層到實體層傳送出去，對方收到後，再反向經由實體層到應用層解讀訊息
  • 應用層（Application Layer）
    • 應用程式間溝通的協定，如簡易電子郵件傳送（SMTP, Simple Mail Transfer Protocol）、檔案傳輸協定（FTP, File Transfer Protocol）、網路終端機模擬協定（TELNET）等
  • 傳輸層（Transport Layer）
    • 提供端點間的資料傳送服務，負責傳送資料並且確定資料已被送達並接收
    • 如傳輸控制協定（TCP, Transmission Control Protocol）
    • 使用者資料協定（UDP, User Datagram Protocol）
  • 網際層（Internet Layer）
    • 負責提供基本的封包傳送功能，讓每一塊資料封包都能夠到達目的端主機（但不檢查是否被正確接收），如網際協定（IP, Internet Protocol）
  • 網路連接層（Network Access Layer）
    • 實質網路媒體的管理協定，定義如何使用實際網路（如Ethernet, Serial Line等）來傳送資料

HTTPS （Hyper Text Transfer Protocol over Secure Socket Layer）

  • SSL 加密無法觀看傳送內容
  • TLS 1.2（SSL 3.3）
  • HTTP 是 80 port、HTTPS 是 443 port
  • HTTP 是 應用層、HTTPS 是傳輸層
  • 主要差異
    • HTTPS 在應用層和傳輸層之間有 SSL 加密憑證，封包不會被看到的相對於 HTTP 安全

title

發出 request ，中間過程會經過哪些傳輸協定？

  • 在瀏覽器中輸入資料的時候會經過 TCP/IP，並將封包傳送出去

title

  • 利用 Wireshark 觀察 TCP 三項交握四次揮手

title

  • TCP 雙向溝通( HTTP <-> 伺服器 )
    • SYN (Synchronize sequence numbers)
      • 如果有設置，才發出連線請求，用來同步序列號
    • SYN, ACK
    • ACK (Acknowledgment field significant)
      • 如果有設置，使確認號欄位有效

title

  • 檔案、圖片的傳送
    • TCP 會分割成幾個封包傳送
    • 下面 CSS 檔案分割成 7 個封包傳送

title

  • TCP & UDP 差異
    • TCP
      • TCP 封包結構
      • TCP 表頭 20 Bytes - 每個 TCP 封包 data 可夾帶 40~1500 Bytes Data 資料
    • UDP
      • 速度快，有可能會掉封包，一直傳資料

TCP/IP 對應 Wireshark

title

  • 實體層
    • 概覽，這個封包總共收到幾個 Frame (資訊框)
  • 網路連接
    • 收到的 Frame(資訊框)，可以看到我們用 Ethernet 協定傳送，裡面記錄著最後傳和目標傳到的 Mac 位址….等等
  • 網路層
    • TCP/IP 中的 IP 協定(Internet Protocol Version)，紀錄著來源和目標的 IP 等等資訊
  • 傳輸層
    • Transmission Control Protocol 縮寫就是 TCP 協定，HTTP 連線也是基於 TCP 協定的，可以看到來源和目的的 port(連接埠)號
  • TCP Segments
    • 封包傳送
  • 應用層
    • HTTP 協定(Hypertext Transfer Protocol)

HTTP 協定(Hypertext Transfer Protocol) 伺服器處理請求

  • 客戶端發送請求後，伺服器收到請求會進行處理並回應
  • HTTP 請求或回應訊息的結構是
    • method
    • 通用標頭 (General Headers)
    • 請求標頭 (Request Headers)
    • 回應標頭 (Response Headers)
    • 請求或回應身體

通用標頭(General Headers)

  • Request URL：請求位置
  • Request Method：請求方式，例如：GET、POST、OPTIONS、PUT、HEAD、DELETE、CONNECT、TRACE 等
  • Status Code：狀態碼，例如：200 成功
  • Remote Address：請求遠端伺服器位址，會轉為 IP

title

狀態碼

  • 1XX：參考資訊
    • POST headers 後得到 100（繼續）
    • 101（切換通訊協定）
  • 2XX：成功
    • 200 客戶端要求成功
    • 204 請求被受理但沒有資源可以返回
    • 206 客戶端只是請求資源的一部分，服務器只對請求的部分資源執行 GET 方法，相應報文中通過 Content-Range 指定範圍的資源
  • 3XX：重新導向
    • 301 永久導向
    • 302 暫時導向
    • 304 發送附帶條件的請求時，條件不滿足時返回，與重新導向無關
    • 307 暫時導向，與 302 類似，只是強制要求使用 POST 方法
  • 4XX：用戶端錯誤
    • 400 請求報文語法有誤無法識別
    • 401 拒絕存取
    • 403 禁止使用
    • 404 找不到
  • 5XX：伺服器錯誤
    • 500 伺服器錯誤
    • 503 伺服器忙碌

GET HTTP / 1.1 請求標頭(Request Headers)

  • :authority：要連接的遠端主機和接口訊息
  • :method：連接方法
  • :path：請求網址的檔案路徑和查詢字串
  • :scheme：請求網址的協議規範，例如：htps
  • accept：能夠接受的回應內容類型（content-types），例如：accept: text/plain
  • accept-encoding：能夠接受的編碼方式列表，這裡是指 HTTP 縮壓，例如：gzip、deflate 等
  • accept-language：能夠接受的回應內容的自然語言列表，例如：de（德語）、en（英語）
  • cache-control：用來指定在這次的請求或回應中的所有快取機制都必須遵守的指令，例如：cache-control: no-cache
  • cookie：由伺服器透過 set-cookie 所代入的文字串
  • upgrade-insecure-requests：指示伺服器若遇到 http 時要改為 https
  • user-agent：瀏覽器的瀏覽器身分標識字串，例如：瀏覽器產品名
  • Connection (減少三項交握 - 三次訊息的交換)：
    • 可以設定 Keep-Alive 保持連線時間，減少重新連接 TCP 連線次數，提高傳輸效率
  • Host：
    • 瀏覽器存取的Host名稱，因為一個 IP 可以綁訂多個不同 Domain，此時就需要 Host 知道要對應到哪個伺服器

title

HTTP / 1.1 200 ok 回應標頭 (Response Headers)

  • cache-control：定義快取策略，例如：no-cache, no-store（決定是否要求更新檔案）、public, private, must-revalidate（可快取回應的使用者）、max-age（快取時限）
  • content-encoding：在資料上使用的編碼類型
  • content-type：當前內容的 MIME（檔案性質與格式）類型
  • date：伺服器發送資料的時間
  • etag：資源的版號，用於識別檔案是否有更新
  • expires：指定日期或時間，超過這個時間的資源就判定為過期
  • last-modified：回傳檔案最後修改的時間，下一次瀏覽器可以傳送 If-Modified-Since 給伺服器判斷是否有修改過檔案，沒有則回傳304並且不會包含 content
  • server：伺服器名稱
  • status：伺服器的回應狀態碼，例如：200 OK
  • vary：
    • 告知下游的代理伺服器，應當如何對未來的請求協定頭進行符合，以決定是否可使用已快取的回應內容而不是重新從原始伺服器請求新的內容
  • Access-Control-Allow-Origin (AJAX 失敗有關)
    • 因為同源政策關係 不允許 A 網站存取 B 網站
    • 要存取兩種方式
      • 請後端開 Access-Control-Allow-Origin Header
      • 利用 JSONP 將資料用 JSON 包裝成 JavaScript (某function 將資料注入這) 傳送
      • JSONP 繞過政策 (偷用資料)
    • 准許跨網域存取的Domain，全部網域使用 * 字號表示script和link標籤不再此限
  • X-Frame-Options
    • 是否能夠在 <iframe> 以及 <object> 載入，網站可以利用 X-Frame-Options 來確保本身內容不會遭惡意嵌入道其他網站、避免 clickjacking 攻擊
  • If-Modified-Since (檔案快取)
    • 瀏覽器cache檔案，下一次request則會發送此header，伺服器使用這個時間來判斷是否修改過檔案，沒有則會回傳304
  • If-Modified-Since (時間)
    • 伺服器判斷有無更改內容 有就更新 沒有回傳 304
  • If-None-Match (Hash Code)

title

瀏覽器解析與渲染頁面

title

渲染引擎

  • HTML 經過 HTML parser 產生 HTML DOM tree

title

  • CSS 經過 CSS parser 產生 CSS rules

title

  • 進入 style 將 rules 賦予 DOM tree 產生 style tree 的元素
  • 進入 layout 將 style tree 元素進行排版產生 layout tree

title

  • 進入渲染顯示在應用程式上

JS 引擎

  • JavaScript 來實現網頁動態效果的解析和執行
  • 每解析和執行渲染引擎會重新渲染
  • 每個動作最好在 16 ms 內更新，因為多數裝置會以 每秒 60 次 重新整理螢幕

總結

當在瀏覽器輸入一個網址，中間會發生什麼事？

  • 瀏覽器發出一個 get 請求，會先進行 DNS 解析看 IP 在哪裡， 在由 TCP / IP 三項交握進行雙向溝通，發出 request，response TCP 封包獲得 200 ok，如果有其他 request 需要會在發送請求給伺服器後再回傳 200 ok，最後再渲染，在渲染過程中如果是 HTML 會先 parser，CSS 會 parser 為 style tree 在合在一起變成 layout 在 pain 上去合成，完成後四次揮手結束連線

HTTPS & HTTP 差異

  • HTTPS
    • 在應用層和傳輸層之間有 SSL 加密憑證，封包不會被看到
  • HTTP
    • 則是在應用層沒有加密憑證

TCP & UDP 差異

  • TCP
    • 有三次揮手較嚴謹
  • UDP
    • 速度快，有可能會掉封包，一直傳資料
0%