直譯器流程介紹

Posted on In

瀏覽器讀取 html, css, JS 的流程是什麼呢？

流程如下：

  1. 在瀏覽器打開 index.html
  2. 瀏覽器取得所有「在 index.html 裡面的程式碼」後，就開始做解析：
  • 瀏覽器會偵測到此檔案是 html 檔
  • 接著就開始把各個標籤，例如：將h1解析成「標題」的格式，並且帶入 css

JS 會使用「HTML DOM」來解析網頁：

The HTML DOM (Document Object Model)

🎃 藉由 HTML DOM，JS 就可以「讀取、操控」所有在 html 文件裡的元素。

🍋 當一個網頁被執行時，瀏覽器會為此網頁建立一個「Document Object Model」

🍋 HTML DOM 就是由各個物件所組成的樹狀結構（由上到下，依序去解析）如下圖：

  • Document：先把「網頁主體」變成一個「Document 文件」

  • Root element<html>：再把 Document 解析成各個 html 標籤

  • Element, Text, Attribute：接著，再去解讀每個 html 標籤裡的「內容（例如：文字內容）」、「屬性（例如href）」

教學網站：https://www.w3schools.com/js/js_htmldom.asp

  1. 解析完成後，就會顯示出畫面

JS 讀取 html 的流程

  • 網頁在執行時，會「由上而下」讀取 html 的內容來渲染到網頁上

  • 當讀取到這行「<script src="js/all.js"></script>」時，網頁渲染就會暫停，因為「要先執行完這支 js 檔案裡的內容」

🎃 為什麼「載入 JS 的<script>」一定要寫在「body的最後面」

這裡就來實驗看看，「載入 JS 的<script>」沒有寫在「body的最後面」會發生什麼事：

  • 在 html 中，在「載入 js」之後，我再加上「一個h1和一個p段落」

  • 在 all.js 中，寫一個 alert
1
alert('jujuju');
  • 打開網頁，就會「先執行 all.js 中的 alert」（後面插入的h1和p還沒出現）

  • 把 alert 關掉之後，接著才會出現「後面插入的h1和p」

interpreter 解譯器

🎃 每個瀏覽器，都有自己內建的「JS 引擎」，又稱為「interpreter 解譯器」

例如，chrome 內建的解譯器叫做「V8」

  • 「interpreter 解譯器」作用是：編譯 all.js 檔案裡的內容，並即時顯示出效果

直接在 chrome 編譯 JS

除了透過「執行 js 檔案來編譯 JS」，也可以「直接在 chrome 編譯 JS」

作法如下：

  • 開啟 chrome 開發者工具，進入 Console
  • 在 Console，可以直接寫 JS 程式碼，它就會馬上做執行

🎃 因此，會把 Console 當作在寫 JS 時的「除錯工具」，直接在 Console 做測試

例如：

我想要把「h1 標題1」的文字改成「在 Console 修改的標題」

  • 就在 Console 裡面打上這段程式碼：
1
document.getElementById('title1').textContent = '在 Console 修改的標題'
  • 按下 enter，馬上就會顯示編譯後的結果了