前端學習須知

首先在學習前我們要了解下預備的知識！

從輸入**到頁面呈現都發生了什麼？

第一步：

1、當我們在位址列輸完網域名稱進行伺服器訪問時，首先會先查詢本地的hosts檔案裡面是否會有此網域名稱的ip對映關係，如果沒有則繼續查詢本地dns快取中是否還有這個對映關係，經過幾個快取的查詢，如果均沒有找到，那麼dns伺服器就會從根網域名稱、頂級網域名稱進行遞迴的查詢最後找到對應的ip位址。

2、http傳送請求報文

請求報文包括：報文行、空行、報文主體（一般是傳送的資料），第一步和第二步都屬於應用層

第二步：

1、傳輸層（tcp協議）

首先tcp會將請求的報文進行分割並且打上標記，通過tcp的三次握手，建立和伺服器的連線

2、網路層（ip協議）

把tcp分割好的各種資料報傳送給接收方。

**tcp和ip的關係**：ip提供基本的資料傳送，而tcp對這些資料報做進一步加工，制定規則和約定，如提供了埠號等

tcp/ip協議是乙個大的集合，包含了tcp、ip、udp、ftp等

第三步：

將請求報文傳送給伺服器，然後伺服器接收到報文，將響應報文原路返回式的傳給客戶端

二、頁面渲染

1、dom構造

通過瀏覽器的解析器來解析html檔案構建dom樹，然後將接收到的css**，通過css解析器構建出樣式表規則，將這些規則分別放到對應的don樹節點上得到一顆帶有樣式屬性的dom樹

2、布局

瀏覽器按照從上到下從左到右的順序讀取dom樹的文件節點，這些節點按順序存放到一條虛擬的傳送帶上，這條流動的傳送帶就是文件流，如果其中的a節點還有子節點，那麼子節點也要按照順序存放到a節點盒子內部，文件流排完之後開始獲取css屬性作為盒子的包裝說明，然後把盒子在倉庫裡一一擺放如圖：

3、繪製頁面

布局完成之後在頁面上是看不到任何內容的，瀏覽器只是計算出了每乙個節點物件應該被放到頁面的哪個位置上，但並沒有視覺化，因此最後一步就是將所有的內容繪製出來完成頁面的渲染。

輸入的**在通過dns解析後得到伺服器位址，瀏覽器向伺服器傳送http請求，經過tcp三次握手確認鏈結後，伺服器將需要的**發回瀏覽器，瀏覽器接收到**後進行解析，經過三大步驟：dom構造、布局、繪製頁面，最終展現為我們看到的網頁。