說一說 HTML 中的 script 標(biāo)簽

rubyshen 發(fā)布于2019-08-23 11:43 / 433人閱讀

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

我們?cè)?《Javascript簡(jiǎn)史》這遍文章中說過，「Javascript」這門語言是由 Netscape開發(fā)而來，當(dāng)初開發(fā)的時(shí)候?yàn)榱四茏?「Javascript」這門語言能與 HTML 頁面共存，而且不影響頁面的其他內(nèi)容，為此增加了一個(gè)統(tǒng)一的腳本支持（ script 腳本元素）。

script 元素

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

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

在 HTML 中使用 Javascript 的兩種方法

//第一種方法：直接在標(biāo)簽內(nèi)使用 javascript 即可


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

script 元素的屬性

script 元素比較常用的幾個(gè)屬性

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

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

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

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

script 元素在 HTML 中的位置

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

所有 script 元素都放在元素中

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



    
        
        
        
    
    
        頁面的內(nèi)容區(qū)域

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

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



    
        
    
    
        頁面的內(nèi)容區(qū)域

腳本的延時(shí)加載

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

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

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




    
    Title
    
    


    這里頁面的內(nèi)容

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

example1
null
example2
null

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

example1
這里頁面的內(nèi)容
example2
這里頁面的內(nèi)容

腳本的異步加載

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

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




    
    Title
    
    


    這里頁面的內(nèi)容

noscript 元素

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




    
    Title

關(guān)注微信公眾號(hào)：六小登登。領(lǐng)取全套學(xué)習(xí)資源

云服務(wù)器 GPU云服務(wù)器說一說 php中的map標(biāo)簽 java中的標(biāo)簽庫 jsp中的fn標(biāo)簽

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/97373.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

rubyshen

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

spinservers：圣何塞10Gbps帶寬服務(wù)器$109/月起,達(dá)拉斯10Gbps服務(wù)器$89/

閱讀 3834·2021-09-27 13:56
大一總結(jié)錄

閱讀 881·2021-09-08 09:36
【每日一包0026】delegates

閱讀 765·2019-08-30 15:54
11月百度面試題（社招）

閱讀 609·2019-08-29 17:29
svg和css3創(chuàng)建環(huán)形漸變進(jìn)度條

閱讀 927·2019-08-29 17:21
css中g(shù)rid屬性的使用

閱讀 1683·2019-08-29 16:59
寫網(wǎng)頁時(shí)拿起就用的小技巧

閱讀 2757·2019-08-29 13:03
如何成為一名優(yōu)秀的web前端工程師（前端攻城師）？

閱讀 2964·2019-08-29 12:47

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購！

說一說 HTML 中的 script 標(biāo)簽

相關(guān)文章