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

這篇文章帶給大家的內容是關於詳談HTML中script標籤（附程式碼），有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

script 元素

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

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

在HTML 中使用Javascript 的兩種方法

//第一种方法：直接在标签内使用 javascript 即可
<script>
    console.log(&#39;第一种使用方法&#39;);
</script>

//第二种方法：引用外部文件
<script></script>

script 元素的屬性

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

• #src：可選，用於引用外部javascript 檔案

• type：可選，編寫程式碼使用的腳本語言的類型（也成MIME類型），預設值為text/javascript

• async：可選，非同步載入腳本，只對外部腳本檔案有效

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

#script 元素在HTML 中的位置

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

所有script 元素都放在 元素中

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

nbsp;html>

    
        <title></title>
        <script></script>
        <script></script>
    
    
        <div>页面的内容区域</div>
    

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

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

nbsp;html>

    
        <title></title>
    
    
        <div>页面的内容区域</div>
        <script></script>
        <script></script>
    

腳本的延時加載

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

//example1.js 中的代码
//console.log('example1');
//console.log(document.getElementById('content'));

//example2.js 中的代码
//console.log('example2');
//console.log(document.getElementById('content'));

nbsp;html>


    <meta>
    <title>Title</title>
    <script></script>
    <script></script>


    <div>这里页面的内容</div>

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

example1
null
example2
null

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

example1
<div>这里页面的内容</div>
example2
<div>这里页面的内容</div>

腳本的非同步載入

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

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

nbsp;html>


    <meta>
    <title>Title</title>
    <script></script>
    <script></script>


    <div>这里页面的内容</div>

noscript 元素

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

nbsp;html>


    <meta>
    <title>Title</title>
    <script></script>
    <script></script>


    <noscript>
        当前浏览器不支持 Javascript 请更换浏览器
    </noscript>

相關推薦：

script標籤在HTML中的作用是什麼？ script標籤中type屬性的用法是什麼？

HTML中的script標籤研究_html/css_WEB-ITnose

html中的<script>標籤還能連結非js檔啊_html/css_WEB-ITnose</script>

#

以上是詳談HTML中script標籤（附程式碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！