網頁內容的組成
- doctype: 提供瀏覽器的html版本資訊
-
head : html頭部
-
meta: 元資料資訊
- charset: 宣告當前檔案所實用的字符編碼
- http-equiv: 客戶端行為，如渲染模式，快取等
- name[keywords]: 搜索引擎關鍵字
- name[description]: 搜索引擎描述
- name[viewport]: 瀏覽器視口設定
- link
- script: 需要在body前完成加載或運行的腳本
-
-
body: html物體
- script: 需要在body決議時加載或運行的腳本
渲染需要做的作業
通過上面的圖可以知道，網頁內容首先會被html決議器決議成一個DOM樹，實際上html是我們最先會通過網址向服務器請求回來的，請求回來的html從位元組流轉成字符流，我們的瀏覽器實際拿到的就是一個字符流，然后瀏覽器通過詞法分析對輸入位元組流進行逐字掃描，根據構詞規則識別單詞和符號，分詞，生成相應的token，之后會將這些token通過nextToken()添加到dom樹中去，所以html決議是從上到下對檔案進行一個此法分析，所以它首先遇到html標簽的時候會對html生成一個token，這個token會被標記成一個startTag的型別，對于header的花也會被標記成startTag，但是它會聲稱為headerToken，就是說對于不同型別的html標簽格式，在詞法分析的程序中，會決議成一個相應的物件，然后token型別會被瀏覽器決議，最后會將token型別append到dom樹上去，
在這個程序中，html中可能會通過link去引入其他相應的資源，比如css的資源，這個時候瀏覽器可能就會兵法的向服務器去請求這個相關的靜態資源，請求回來后通過css決議器對其進行決議，從而生成一個css樹，去和dom樹進行結合生成一個render Tree，進一步的進行一個布局，最終進行繪制，
加載中的注意事項
- css的加載不會阻塞dom決議，但是會阻塞頁面渲染，所以一般把css加載放在頭部
- css會去阻塞js的執行，就是說css資源在加載完之前，js的執行會被阻塞，但是css不會阻塞js腳本的加載
- js會去阻塞頁面dom的決議
- js不阻塞資源的加載
- js順序執行，阻塞后續js邏輯的執行
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/413067.html
標籤：Html/Css
上一篇：深入淺出 CSS 影片