說一說 HTML 中的 script 標籤

09-07

1 人贊了文章

我們在《Javascript簡史》這遍文章中說過，「Javascript」這門語言是由 Netscape開發而來，當初開發的時候為了能讓「Javascript」這門語言能與 HTML 頁面共存，而且不影響頁面的其他內容，為此增加了一個統一的腳本支持（ script 腳本元素）。

script 元素

在 HTML 頁面中使用「Javascript」語言主要的方法就是使用 script 元素，script 元素內部的代碼從上而下依次執行。

在引入多個 script 元素的時候，瀏覽器會按照 script 元素在頁面的中的先後順序進行解析，當上一個解析完成時，才會進行下一個 script 元素中的內容

在 HTML 中使用 Javascript 的兩種方法

//第一種方法：直接在標籤內使用 javascript 即可<script> console.log(第一種使用方法);</script>//第二種方法：引用外部文件<script src="example.js"></script>

script 元素的屬性

script 元素比較常用的幾個屬性

src：可選，用於引用外部 javascript 文件
type：可選，編寫代碼使用的腳本語言的類型（也成MIME類型），默認值為 text/javascript
async：可選，非同步載入腳本，只對外部腳本文件有效
defer：可選，延遲腳本載入，在文檔完全被解析後在執行，只對外部腳本文件有效

script 元素在 HTML 中的位置

由於「Javascript」語言是一門單線程語言，在同一時間內，只能執行一個任務，所以只有當上一個任務完成之後才能進行下一個任務，因此會導致 script 元素在 HTML 中的位置不同，會表現出不同效果。

所有 script 元素都放在元素中

這種做法意味著，我們必須等待所有的 Javascript 代碼必須執行完成之後才能開始展示頁面的內容，如果頁面的 Javascript 代碼非常多，這種方法就會導致我們看到頁面的載入會非常慢，用戶體驗非常差，那麼這麼樣去優化呢？其實很簡單。

<!DOCTYPE html><html> <head> <title></title> <script src="example1.js"></script> <script src="example2.js"></script> </head> <body> <div>頁面的內容區域</div> </body></html>

所有 script 元素都放在頁面內容的後面

優化上面所說的頁面載入慢的問題，只需要把我們使用的 Javascript 代碼放到頁面的內容之後即可，這樣頁面會首先載入內容然後現實出來，再去執行 Javascript 代碼，這樣用戶就不會等待很久頁面才會顯示內容。

<!DOCTYPE html><html> <head> <title></title> </head> <body> <div>頁面的內容區域</div> <script src="example1.js"></script> <script src="example2.js"></script> </body></html>

腳本的延時載入

腳本如何進行延時載入，這個就要利用 script 元素的 defer 屬性，在元素使用 defer 屬性時，腳本會被延遲到整個頁面解析完成後在執行。

//example1.js 中的代碼//console.log(example1);//console.log(document.getElementById(content));//example2.js 中的代碼//console.log(example2);//console.log(document.getElementById(content));<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script defer src="example1.js"></script> <script defer src="example2.js"></script></head><body> <div id="content">這裡頁面的內容</div></body></html>

你會發在沒有加入 defer 屬性時控制台會列印出如下結果

example1nullexample2null

當給元素加上 defer 屬性時，結果會發生變化，可以發現在 div 元素的內容載入完成之後 Javascript 代碼才會執行。

example1<div id="content">這裡頁面的內容</div>example2<div id="content">這裡頁面的內容</div>

腳本的非同步載入

腳本的非同步載入，要用到 script 元素到 async 屬性，它與 defer 屬性類似，都是修改 script 元素的載入行為，不過 async 屬性不會影響頁面的其他載入，不會阻塞文檔呈現，而且帶有 async 屬性的腳本不能保證它們執行的前後順序，這一點與 defer 屬性有著不同之處。

換句話說 example2.js 的代碼可能會先於 example1.js 中的代碼執行，所以在使用 async 屬性時，要避免兩個 js 相互依賴。

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script async src="example1.js"></script> <script async src="example2.js"></script></head><body> <div id="content">這裡頁面的內容</div></body></html>

noscript 元素

早期的瀏覽器都會又一個問題，那就是當瀏覽器不支持 Javascript 語言時如何顯示頁面內容，為此的解決方案就是創建了一個 noscript 元素，它可以在不支持 Javascript 的瀏覽器中顯示內容，而且只會在不支持 Javascript 的瀏覽器中才會顯示其中的內容。

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script async src="example1.js"></script> <script async src="example2.js"></script></head><body> <noscript> 當前瀏覽器不支持 Javascript 請更換瀏覽器 </noscript></body></html>