javascript

我們在 《Javascript簡史》這遍文章中說過，「Javascript」這門語言是由 Netscape開發(fā)而來，當(dāng)初開發(fā)的時(shí)候?yàn)榱四茏?「Javascript」這門語言能與 HTML 頁面共存，而且不影響頁面的其他內(nèi)容，為此增加了一個(gè)統(tǒng)一的腳本支持（ 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 的兩種方法

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

由于「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í)很簡單。

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

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

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

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

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

腳本的異步加載，要用到 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 相互依賴。

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

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