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

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

在 HTML 中使用 Javascript 的兩種方法

//第一種方法：直接在標(biāo)簽內(nèi)使用 javascript 即可 script  console.log( 第一種使用方法  /script //第二種方法：引用外部文件 script src= example.js /script 

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

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

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

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

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

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

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

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

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

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

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

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

腳本如何進(jìn)行延時(shí)加載，這個(gè)就要利用 script 元素的 defer 屬性，在元素使用 defer 屬性時(shí)，腳本會(huì)被延遲到整個(gè)頁(yè)面解析完成后在執(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 這里頁(yè)面的內(nèi)容 /div  /body  /html 

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

example1example2null

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

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

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

換句話說(shuō) example2.js 的代碼可能會(huì)先于 example1.js 中的代碼執(zhí)行，所以在使用 async 屬性時(shí)，要避免兩個(gè) 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 這里頁(yè)面的內(nèi)容 /div  /body  /html 

早期的瀏覽器都會(huì)又一個(gè)問(wèn)題，那就是當(dāng)瀏覽器不支持 Javascript 語(yǔ)言時(shí)如何顯示頁(yè)面內(nèi)容，為此的解決方案就是創(chuàng)建了一個(gè) noscript 元素，它可以在不支持 Javascript 的瀏覽器中顯示內(nèi)容，而且只會(huì)在不支持 Javascript 的瀏覽器中才會(huì)顯示其中的內(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 請(qǐng)更換瀏覽器 /noscript  /body  /html 

相關(guān)推薦：

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。