javascript

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

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

在引入多個 script 元素的時候，瀏覽器會按照 script 元素在頁面的中的先后順序進行解析，當上一個解析完成時，才會進行下一個 script 元素中的內容

在 HTML 中使用 Javascript 的兩種方法

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

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

所有 script 元素都放在 元素中

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

所有 script 元素都放在頁面內容的后面

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

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

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

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

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

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

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

關注微信公眾號：六小登登。領取全套學習資源