說一說 HTML 中的 script 標簽

fox_soyoung 發布于2019-08-02 16:03 / 1017人閱讀

摘要：元素在頁面中使用語言主要的方法就是使用元素，元素內部的代碼從上而下依次執行。換句話說的代碼可能會先于中的代碼執行，所以在使用屬性時，要避免兩個相互依賴。

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

script 元素

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

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

在 HTML 中使用 Javascript 的兩種方法

//第一種方法：直接在標簽內使用 javascript 即可


//第二種方法：引用外部文件

script 元素的屬性

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

src：可選，用于引用外部 javascript 文件

type：可選，編寫代碼使用的腳本語言的類型（也成MIME類型），默認值為 text/javascript

async：可選，異步加載腳本，只對外部腳本文件有效

defer：可選，延遲腳本加載，在文檔完全被解析后在執行，只對外部腳本文件有效

script 元素在 HTML 中的位置

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

所有 script 元素都放在元素中

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

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

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

腳本的延時加載

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

//example1.js 中的代碼
//console.log("example1");
//console.log(document.getElementById("content"));

//example2.js 中的代碼
//console.log("example2");
//console.log(document.getElementById("content"));




    
    Title
    
    


    這里頁面的內容

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

example1
null
example2
null

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

example1
這里頁面的內容
example2
這里頁面的內容

腳本的異步加載

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

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




    
    Title
    
    


    這里頁面的內容

noscript 元素

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




    
    Title

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

GPU云服務器云服務器說一說 php中的map標簽 java中的標簽庫 jsp中的fn標簽

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/54579.html

說一說 HTML 中的 script 標簽

摘要：元素在頁面中使用語言主要的方法就是使用元素，元素內部的代碼從上而下依次執行。換句話說的代碼可能會先于中的代碼執行，所以在使用屬性時，要避免兩個相互依賴。我們在《Javascript簡史》這遍文章中說過，「Javascript」這門語言是由 Netscape開發而來，當初開發的時候為了能讓「Javascript」這門語言能與 HTML 頁面共存，而且不影響頁面的其他內容，為此增加了...

rubyshen 2019-08-23 11:43 評論0 收藏0
說一說“換行”踩的坑

摘要：雖然效果一樣，但是這兩種換行的方式使用起來卻不同。使用換行這種方式用起來比較坑，所以本文章的重點就是這一部分。因為之前知道彈框中要實現換行，只能通過的方式，而不能通過的方式。在元素上使用等方式，發現都是可以實現換行的。前言最近遇到這樣一個需求：需要在頁面中顯示一段第三方文本信息。這些文本完全由第三方自己定義，我們負責顯示在頁面即可，第三方要求這些文本需要換行顯示即可。我們都知道在...

objc94 2019-08-21 10:44 評論0 收藏0
每日前端進階第三題：說一說你對HTML5語義化的理解

摘要：作者陳大魚頭鏈接背景最近高級前端工程師劉小夕在上開了個每個工作日布一個前端相關題的，懷著學習的心態我也參與其中，以下為我的回答，如果有不對的地方，非常歡迎各位指出。如果你采用正宗川菜做法，最后只需加入花生米，炒拌幾下就可以起鍋了。作者：陳大魚頭 github： KRISACHAN 鏈接：github.com/YvetteLau/S… 背景：最近高級前端工程師劉小夕在 github 上...

番茄西紅柿 2019-05-23 15:55 評論0 收藏0