流程概要
看了《重學前端》總結了一下，從用戶輸入網址發起請求到頁面渲染顯示的過程：
通過url請求獲得字符流，把字符流變成詞（token）流，把詞（token）流構造成DOM樹，把不含樣式信息的DOM樹應用CSS規則，變成包含樣式信息的DOM樹，並且根據樣式信息，計算了每個元素的位置和大小。最後根據這些樣式信息和大小信息，爲每個元素在內存中渲染它的圖形，並且把它繪製到頁面對應的位置。
1. http請求
- 接受HTTP請求後，就產生了流式的數據，後續的DOM樹構建、CSS計算、渲染、合成、繪製，都是儘可能地流式處理前一步的產出：即不需要等到上一步驟完全結束，就開始處理上一步的輸出，這樣我們在瀏覽網頁時，纔會看到逐步出現的頁面。
- 301和302兩個狀態表示當前資源已經被轉移，只不過一個是永久性轉移，一個是臨時性轉移。實際上301更接近於一種報錯，提示客戶端下次別來了。
- 503：服務端暫時性錯誤，可以一會再試。
- 常見的HTTP頭，這些頭是我認爲前端工程師應該做到不需要查閱，看到就可以知道意思
- 客戶端發送一個HTTP請求到服務器的請求消息包括以下格式：請求行（request line）、請求頭部（header）、空行和請求數據四個部分組成； HTTP響應也由四個部分組成，分別是：狀態行、消息報頭、空行和響應正文。
- HTTPS有兩個作用，一是確定請求的目標服務端身份，二是保證傳輸的數據不會被網絡中間節點竊聽或者篡改。
- TLS加密通道，TLS構建於TCP協議之上，它實際上是對傳輸的內容做一次加密，所以從傳輸內容上看，HTTPS跟HTTP沒有任何區別
- 在HTTP 1.0中，客戶端的每一個HTTP請求都必須通過獨立的TCP連接進行處理，2.0可以支持TCP連接複用和服務端推送
2. 解析與構建
- 標籤（body字符流）拆分成詞（token）的過程
1 <p“標籤開始”的開始；
2 class=“a” 屬性；
3 > “標籤開始”的結束；
4 text text text 文本；
5 </p>標籤結束
- 使用棧來構建DOM樹
3. CSS規則應用
- DOM構建過程中，每拿到一個新構建好的元素就去檢查，它匹配到了哪些規則，再根據規則的優先級，做覆蓋和調整。是一個流式的過程
- 選擇器的出現順序，必定跟構建DOM樹的順序一致（父元素–>子元素）
- 選擇器連在一起寫
4. 頁面排版
- “排版”這個概念最初來自活字印刷，是指我們把一個一個的鉛字根據文章順序，放入板框當中的步驟，排版的意思是確定每一個字的位置。
- 瀏覽器支持元素和文字的混排，元素被定義爲佔據長方形的區域，還允許邊框、邊距和留白，這個就是所謂的盒模型。
- 正常流、絕對定位元素、浮動定位元素
- 瀏覽器支持改變排版方向，不一定是從左到右從上到下，所以我們把文字依次書寫的延伸方向稱爲主軸，換行延伸的方向，跟主軸垂直交叉，稱爲交叉軸。
- 表格相關排版、flex排版和grid排版，它們有一個顯著的特點，那就是子元素之間具有關聯性
5. 渲染
- “渲染”，是個非常有意思的翻譯，中文裏“渲染”這個詞是一種繪畫技法，是指沾清水把墨塗開的意思。
- 它在圖形學的意義，也就是把模型變成位圖（柵格）的過程。瀏覽器中渲染這個過程，就是把每一個元素對應的盒變成位圖。