首頁 > 文章 > web前端 > 詳談HTML中script標籤（附程式碼）

詳談HTML中script標籤（附程式碼）

不言原創: 2018-09-06 17:32:158428瀏覽

這篇文章帶給大家的內容是關於詳談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>
<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 屬性時控制台會印出如下結果

example1
null
example2
null

當給元素加上defer 屬性時，結果會發生變化，可以發現在p 元素的內容載入完成之後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>
<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>