- 15天學會JavaScript（視頻教學版）
- 王金柱
- 2629字
- 2019-12-06 14:00:30
1.3 JavaScript腳本運行機制
上一節介紹了HTML網頁中的JavaScript腳本語言，并通過實例演示了JavaScript腳本代碼在網頁中執行的結果。我們知道JavaScript腳本代碼可以放在HTML網頁中的任何位置，比如在頁面頭部<head>標簽內、頁面主體<body>標簽內、又或者是頁面<body>標簽之后。那么，這樣就會帶來一個問題，那就是JavaScript腳本代碼在頁面中的不同位置有沒有什么區別呢？
要想解答這個疑問，就要先理解HTML網頁的運行機制。HTML網頁是按照頁面代碼定義的先后順序，自上而下依次執行的。我們在瀏覽網頁時就會發現，頁面內容是自上而下顯示出來的。舉一個例子大家就明白了，早期在個人家庭中接入互聯網一般是使用調制解調器（Modem），當時的帶寬都是56Kb或128Kb的，因此網速很慢甚至很卡。經常會遇到瀏覽器k網頁的內容顯示到一半就卡住不動了，不過這恰恰解釋了HTML網頁的執行順序。只不過如今個人家庭中都是百兆、甚至千兆寬帶接入，網速非常快，大家在打開網頁時也就體會不到HTML頁面自上而下的執行順序。
理解了HTML網頁的運行機制，我們繼續講解JavaScript腳本代碼的運行機制。對于定義在頁面中的JavaScript腳本代碼，會隨著HTML網頁自上而下的順序執行。只不過，JavaScript腳本代碼是按照中斷機制執行的，也就是說HTML網頁遇到JS代碼時會中止執行，直到JS腳本解析完成后網頁才會繼續運行。那么問題就來了，JavaScript腳本代碼在HTML網頁中定義的位置會對瀏覽器頁面內容的顯示產生很大的影響。
下面，先看一個將JavaScript腳本代碼定義在頁面頭部<head>標簽中的實例（一般初學者的常規做法），具體代碼如下（詳見源代碼ch01目錄中ch01-js-run-in-head.html文件）。
【代碼1-4】
01 <!doctype html>
02 <html lang="en">
03 <head>
04 <!-- 添加文檔頭部內容 -->
05 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
06 <meta http-equiv="Content-Language" content="zh-cn" />
07 <link rel="stylesheet" type="text/css" href="css/style.css">
08 <script>
09 alert("JavaScript腳本代碼定義在頁面頭部head標簽元素內.");
10 </script>
11 <title>JavaScript in 15-days</title>
12 </head>
13 <body>
14 <!-- 添加文檔主體內容 -->
15 <header>
16 <nav>JavaScript 基礎 - js腳本代碼運行機制</nav>
17 </header>
18 <hr>
19 <!-- 添加文檔主體內容 -->
20 <h2>正文</h2>
21 <p>
22 JavaScript腳本代碼定義在頁面頭部head標簽元素內.
23 </p>
24 </body>
25 </html>
關于【代碼1-4】的分析如下：
第08～10行代碼通過<script>標簽定義一段嵌入式JavaScript腳本代碼，第09行的JS代碼通過“alert()”函數定義了一個彈出式警告提示框；
第13～24行代碼在<body>標簽內定義了一些頁面內容，具體包括標題和正文文本。
下面運行測試【代碼1-4】定義的HTML頁面，查看一下JavaScript腳本代碼的執行結果，具體如圖1.4所示。第08～10行代碼定義的警告提示框彈出來了，但頁面中定義的文本內容卻沒有顯示出來，瀏覽器窗口還是灰色的。這恰恰說明JavaScript腳本代碼的中斷執行機制，由于本例中JS腳本定義在<head>標簽內，因此頁面內容還沒有加載完成就被JS腳本中斷了。單擊警告提示框中的“確定”按鈕將JS代碼執行完成，具體結果如圖1.5所示。直到JavaScript腳本代碼執行完成后，頁面內容才會加載完成并顯示在瀏覽器中。
圖1.4 定義在頁面頭部的JavaScript腳本（1）
圖1.5 定義在頁面頭部中的JavaScript腳本（2）
接下來介紹將JavaScript腳本代碼定義在頁面主體<body>標簽中的實例（JS腳本是允許定義在HTML頁面中的任何位置），具體代碼如下（詳見源代碼ch01目錄中ch01-js-run-in-body.html文件）。
【代碼1-5】
01 <!doctype html>
02 <html lang="en">
03 <head>
04 <!-- 添加文檔頭部內容 -->
05 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
06 <meta http-equiv="Content-Language" content="zh-cn" />
07 <link rel="stylesheet" type="text/css" href="css/style.css">
08 <title>JavaScript in 15-days</title>
09 </head>
10 <body>
11 <!-- 添加文檔主體內容 -->
12 <header>
13 <nav>JavaScript 基礎 - js腳本代碼運行機制</nav>
14 </header>
15 <hr>
16 <!-- 添加文檔主體內容 -->
17 <script>
18 alert("JavaScript腳本代碼定義在頁面主體body標簽元素內.");
19 </script>
20 <h2>正文</h2>
21 <p>
22 JavaScript腳本代碼定義在頁面主體body標簽元素內.
23 </p>
24 </body>
25 </html>
關于【代碼1-5】的分析如下：
第17～19行代碼通過<script>標簽定義了一段嵌入式JavaScript腳本代碼，其定義位置是在頁面主體<body>標簽中。第18行的JS代碼通過“alert()”函數定義了一個彈出式警告提示框。
在第17～19行JS腳本代碼的前后，分別定義了一些頁面內容，具體包括標題和正文文本。
下面運行測試【代碼1-5】定義的HTML頁面，查看一下JavaScript腳本代碼的執行結果，具體如圖1.6所示。
圖1.6 定義在頁面主體中的JavaScript腳本（1）
如圖1.6所示，第17～19行代碼定義的警告提示框彈出來了。同時，大家注意圖中箭頭指向的內容，第12～14行代碼定義的頁面標題和第15行代碼水平分割線已經顯示出來了，但第20～23行代碼定義的頁面正文卻沒有顯示出來。
這同樣是因為JavaScript腳本代碼的中斷執行機制起的作用，由于本例中JS腳本定義在第17～19行，正好在頁面文本內容的中間。
單擊警告提示框中的“確定”按鈕將JS代碼執行完成，具體結果如圖1.7所示。
圖1.7 定義在頁面主體中的JavaScript腳本（2）
通過圖1.7可知直到JavaScript腳本代碼執行完成后，后面的頁面內容才加載完成顯示在瀏覽器中。
最后介紹將JavaScript腳本代碼定義在頁面主體<body>標簽后的實例（之后會有總結分析），具體代碼如下（詳見源代碼ch01目錄中ch01-js-run-in-end.html文件）。
【代碼1-6】
01 <!doctype html> 02 <html lang="en"> 03 <head> 04 <!-- 添加文檔頭部內容 --> 05 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 06 <meta http-equiv="Content-Language" content="zh-cn" /> 07 <link rel="stylesheet" type="text/css" href="css/style.css"> 08 <title>JavaScript in 15-days</title> 09 </head> 10 <body> 11 <!-- 添加文檔主體內容 --> 12 <header> 13 <nav>JavaScript 基礎 - js腳本代碼運行機制</nav> 14 </header> 15 <hr> 16 <!-- 添加文檔主體內容 --> 17 <h2>正文</h2> 18 <p> 19 JavaScript腳本代碼定義在頁面主體body標簽元素后. 20 </p> 21 </body> 22 <script type="text/javascript" src="js/ch01-js-run-in-end.js"></script> 23 </html>
關于【代碼1-6】的分析如下：
第10～21行代碼在頁面主體<body>標簽內定義了一些頁面內容，具體包括標題和正文文本；
第22行代碼通過<script>標簽定義了外鏈式JavaScript腳本，其中“src”屬性定義了外部腳本的相對路徑地址（"js/ch01-js-run-in-end.js"）。這里JavaScript腳本的位置是放在了<body>標簽后的，也就是HTML網頁的最后。
關于上面引入的外部腳本文件的具體代碼如下（詳見源代碼ch01目錄中js/ch01-js-run-in-end.js文件）。
【代碼1-7】
01 alert("JavaScript腳本代碼定義在頁面主體body標簽元素后.");
關于【代碼1-7】的分析如下：
第01行JS代碼通過“alert()”函數定義了一個彈出式警告提示框，與前面兩個實例的JS腳本功能類似。
下面運行測試【代碼1-6】定義的HTML頁面，查看一下JavaScript腳本代碼的執行結果，具體如圖1.8所示。
圖1.8 定義在頁面最后的JavaScript腳本（1）
從圖1.8看出，第17～19行代碼定義的警告提示框彈出來了。同時，大家注意圖中箭頭指向的內容（部分內容被彈出框遮蓋了），第10～21行代碼定義的頁面內容已經全部顯示出來了。
這就說明本例中在頁面主體<body>標簽后引用的JS腳本是在頁面內容全部加載完成后執行的，與JavaScript腳本定義的位置是一致的。單擊警告提示框中的“確定”按鈕將JS代碼執行完成，具體結果如圖1.9所示。
圖1.9 定義在頁面最后的JavaScript腳本（2）
通過以上三個實例，我們大致了解JavaScript腳本代碼在HTML網頁中定義的位置對頁面執行結果的影響。那么，簡單總結一下關于JavaScript腳本代碼的位置在HTML網頁中定義要遵循的幾個原則。
（1）盡可能地將JavaScript腳本代碼（包括嵌入式和外鏈式）放在<body>標簽之后，這樣在HTML網頁內容加載時就不會因為JavaScript腳本的中斷執行機制而延遲阻塞，自然就會提高頁面的顯示速度。
（2）如果要實現一些頁面特效，而需要預先動態加載一些JavaScript腳本代碼，那么這些JS腳本就應該放在<head>標簽內或<body>標簽的前面。因此，對于“全部JavaScript腳本代碼要放在頁面的最后便于提高加載速度”的說法并不可靠。可見上述的第一條原則并不是通用的，因情況而異。
（3）對于需要使用JavaScript腳本代碼動態訪問操作頁面DOM元素的情況，要將JS腳本放在DOM元素定義之后（當然依據第一條原則，最好統一放在<body>標簽之后）；如果放在DOM元素定義之前，由于DOM元素還沒有生成，必然會產生JS腳本訪問錯誤或無效操作的情況。
以上三條就是JavaScript腳本代碼定義位置需要遵循的大致原則，當然這不是硬性規定，而是根據經驗總結出來的比較不錯的方法。
- FreeSWITCH 1.8
- Java從入門到精通（第5版）
- Mastering Swift 2
- QGIS：Becoming a GIS Power User
- Learning Three.js：The JavaScript 3D Library for WebGL
- AppInventor實踐教程：Android智能應用開發前傳
- Java Web開發詳解
- Mastering Python Design Patterns
- SEO教程：搜索引擎優化入門與進階（第3版）
- SAP Web Dynpro for ABAP開發技術詳解：基礎應用
- Getting Started with JUCE
- Effective C++：改善程序與設計的55個具體做法（第三版）中文版（雙色）
- Scratch超人漫游記：創意程序設計：STEAM創新教育指南
- 微信公眾平臺服務號開發：揭秘九大高級接口
- FORTRAN程序設計權威指南