明輝手游網(wǎng)中心:是一個免費提供流行視頻軟件教程、在線學(xué)習(xí)分享的學(xué)習(xí)平臺!

詳談HTML中script標(biāo)簽(附代碼)

[摘要]本篇文章給大家?guī)淼膬?nèi)容是關(guān)于詳談HTML中script標(biāo)簽(附代碼),有一定的參考價值,有需要的朋友可以參考一下,希望對你有所幫助。script 元素在 HTML 頁面中使用「Javascript」語言主要的方法就是使用 script 元素,script 元素內(nèi)部的代碼從上而下依次執(zhí)行。在引入多...
本篇文章給大家?guī)淼膬?nèi)容是關(guān)于詳談HTML中script標(biāo)簽(附代碼),有一定的參考價值,有需要的朋友可以參考一下,希望對你有所幫助。

script 元素

在 HTML 頁面中使用「Javascript」語言主要的方法就是使用 script 元素,script 元素內(nèi)部的代碼從上而下依次執(zhí)行。

在引入多個 script 元素的時候,瀏覽器會按照 script 元素在頁面的中的先后順序進(jìn)行解析,當(dāng)上一個解析完成時,才會進(jìn)行下一個 script 元素中的內(nèi)容

在 HTML 中使用 Javascript 的兩種方法

//第一種方法:直接在標(biāo)簽內(nèi)使用 javascript 即可
<script>
    console.log('第一種使用方法');
</script>

//第二種方法:引用外部文件
<script src="example.js"></script>

script 元素的屬性

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

  • src:可選,用于引用外部 javascript 文件

  • type:可選,編寫代碼使用的腳本語言的類型(也成MIME類型),默認(rèn)值為 text/javascript

  • async:可選,異步加載腳本,只對外部腳本文件有效

  • defer:可選,延遲腳本加載,在文檔完全被解析后在執(zhí)行,只對外部腳本文件有效

script 元素在 HTML 中的位置

由于「Javascript」語言是一門單線程語言,在同一時間內(nèi),只能執(zhí)行一個任務(wù),所以只有當(dāng)上一個任務(wù)完成之后才能進(jìn)行下一個任務(wù),因此會導(dǎo)致 script 元素在 HTML 中的位置不同,會表現(xiàn)出不同效果。

所有 script 元素都放在 <head> 元素中

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

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <script src="example1.js"></script>
        <script src="example2.js"></script>
    </head>
    <body>
        <div>頁面的內(nèi)容區(qū)域</div>
    </body>
</html>

所有 script 元素都放在頁面內(nèi)容的后面

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

<!DOCTYPE html>
<html>
    <head>
        <title></title>
    </head>
    <body>
        <div>頁面的內(nèi)容區(qū)域</div>
        <script src="example1.js"></script>
        <script src="example2.js"></script>
    </body>
</html>

腳本的延時加載

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

//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">這里頁面的內(nèi)容</div>
</body>
</html>

你會發(fā)在沒有加入 defer 屬性時控制臺會打印出如下結(jié)果

example1
null
example2
null

當(dāng)給元素加上 defer 屬性時,結(jié)果會發(fā)生變化,可以發(fā)現(xiàn)在 p 元素的內(nèi)容加載完成之后 Javascript 代碼才會執(zhí)行。

example1
<div id="content">這里頁面的內(nèi)容</div>
example2
<div id="content">這里頁面的內(nèi)容</div>

腳本的異步加載

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

換句話說 example2.js 的代碼可能會先于 example1.js 中的代碼執(zhí)行,所以在使用 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">這里頁面的內(nèi)容</div>
</body>
</html>

noscript 元素

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

<!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>
        當(dāng)前瀏覽器不支持 Javascript 請更換瀏覽器
    </noscript>
</body>
</html>

相關(guān)推薦:

script標(biāo)簽在HTML中的作用是什么?script標(biāo)簽中type屬性的用法是什么?

HTML中的script標(biāo)簽研究_html/css_WEB-ITnose

html中的<script>標(biāo)簽還能鏈接非js文件啊_html/css_WEB-ITnose

以上就是詳談HTML中script標(biāo)簽(附代碼)的詳細(xì)內(nèi)容,更多請關(guān)注php中文網(wǎng)其它相關(guān)文章!


網(wǎng)站建設(shè)是一個廣義的術(shù)語,涵蓋了許多不同的技能和學(xué)科中所使用的生產(chǎn)和維護(hù)的網(wǎng)站。