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

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

在 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 元素比較常用的幾個(gè)屬性

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

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

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

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

由于「Javascript」語(yǔ)言是一門(mén)單線程語(yǔ)言，在同一時(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í)行完成之后才能開(kāi)始展示頁(yè)面的內(nèi)容，如果頁(yè)面的 Javascript 代碼非常多，這種方法就會(huì)導(dǎo)致我們看到頁(yè)面的加載會(huì)非常慢，用戶體驗(yàn)非常差，那么這么樣去優(yōu)化呢？其實(shí)很簡(jiǎn)單。

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

所有 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)容。

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

腳本如何進(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"));




    
    
    
    


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

你會(huì)發(fā)在沒(méi)有加入 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
這里頁(yè)面的內(nèi)容
example2
這里頁(yè)面的內(nèi)容

腳本的異步加載，要用到 script 元素到 async 屬性，它與 defer 屬性類(lèi)似，都是修改 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 相互依賴。

    
    
    
    


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

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

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