說一說 HTML 中的 script 標籤

時間 2019-12-09

標籤一說 html script 標籤欄目 HTML 简体版

原文原文鏈接

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

script 元素

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

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

在 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 元素都放在 <head> 元素中async

這種作法意味着，咱們必須等待全部的 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 屬性時控制檯會打印出以下結果

example1
null
example2
null

當給元素加上 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>

關注微信公衆號：六小登登。領取全套學習資源

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。