1.網頁執行順序
網頁執行以後,瀏覽器首先,會先把你的全部的程式碼都給取得,那取得是要做什麼事情,當然是要去做解析咯,
,如果偵測到是 html 檔案,瀏覽器會自動把這段程式碼 ,譬如說 h1,把他解析成 h1 呈現的格式,
那如果他裡面有預設有 css 他也會把他帶入到裡面去。
2.什麼是DOM?
這東西又有一個新的觀念叫做 DOM,DOM 就代表說 首先呢 你可以看到,網頁的話 他就會幫你把他變成一個 document
變成一個文件,然後在幫你去做解析 他裡面會變成 html 標籤
解讀裡面內容, 解讀 head 裡面的內容 ,然後你今天這裡面有沒有哪些元素
元素裡面有沒有其他屬性,譬如裡面 A連結裡面有 href
那 A 連結裡面有相關的文字內容,他都會把他解析成這個樣子
那解析完以後,他就會陸續顯示出你的畫面出來
參考文章
https://www.w3schools.com/xml/dom_intro.asp
https://openhome.cc/Gossip/JavaScript/W3CDOM.html
3.那如果是JavaScript 的話到底如何去解析我這一段 JavaScript 的呢?
有一個 all.js 檔案 如果我今天是瀏覽器 ,我今天收集到你全部的網頁資料了
我就開始從上面讀下來,所以我今天從上面讀下來的話,他就會一直讀 讀到 ul 然後 h1 然後陸續的去做解析
然後在渲染到網頁裡面去,一直渲染一直渲染一直渲染
那渲染到後面的時候,就發現到後面有一支 script,他有一支 js/all.js
當他讀到這個資料的時候,就會這網頁渲染就會先暫停
為什麼會暫停?
因為他必須先把這個 script 的 js 檔案裡面的內容 都執行好
他確認這裡面的東西都執行完了 跑過一次了
在繼續跑後面的 那個渲染的區域