International - English

Cart Console

Topic Center

Contact Sales

首頁 > 開發者 > JavaScript

HTML裡的哪一部分Javascript 會在頁面載入的時候被執行？

最後更新：2018-05-25 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：OLE 部分 java his tle 答案依次標籤報錯

最近遇到一個問題：
HTML裡的哪一部分Javascript 會在頁面載入的時候被執行（）
A : 檔案頭部

B : 檔案尾

C : <head>標籤部分

D : <body>標籤部分

雖然大家都知道選D,但是關於答案的解析眾說紛紜，由此可見大家對於瀏覽器的載入解析渲染還是不夠瞭解。

瀏覽器是從上到下依次載入並解析的。

當瀏覽器載入html檔案並解析到<head>時,頁面也就是<body>並沒有被解析,瀏覽器會等到<head>中的js執行完再載入頁面。

這是為什麼呢？

原因：JS有可能會修改DOM，最為經典的document.write，這意味著，在JS執行完成前，後續所有資源的下載可能是沒有必要的，這是js阻塞後續資源下載的根本原因。

範例程式碼：

<!DOCTYPE html><html><head>    <title></title>    <script type="text/javascript">    console.log(‘this is head js ‘);        </script>    <script type="text/javascript" src=‘test.js‘></script>    <style type="text/css">    body{        color: red;    }    </style></head><body><script type="text/javascript">console.log(‘this is body js‘);window.onload=function(){    console.log(‘this is onload js‘);};</script><p >this is body</p></body></html>

輸出：

this is head js
this is test js
this is body js
this is onload js

由此可見head和頭部引進的script指令碼最先載入並執行，而onload是最後執行的，所以處於<body>和</body>中的元素是在頁面載入的時候被執行的。