在HTML中JavaScript以及async和defer的使用

本文是閱讀紅寶書後對知識進行的總結和梳理

一.<script>元素

<script>標籤定義了6個屬性,分別有async,defer,charset,src,language,type。
講到script標籤,不得不提async和defer這兩個屬性,所以對這兩個屬性劃重點。

1. async

紅寶書中定義:表示應該立即下載腳本,但不應妨礙頁面中的其他操作,比如下載其他資源或等待加載其他腳本。只對外部腳本文件有效。

解釋:很顯然,瀏覽器會立即下載含有async屬性的腳本,也就是加載腳本和加載頁面文檔是並行進行的(異步),腳本加載完成後立即執行,當頁面進行解析時,腳本將被執行。只對外部引入的JavaScript代碼有效,對嵌入代碼無法使用。

2. defer

紅寶書中定義:表示腳本可以延遲到文檔完全被解析和顯示之後再執行。只對外部腳本文件有效。 IE7 及更早版本對嵌入腳本也支持這個屬性

解釋:設置defer屬性時,相當於告訴瀏覽器立即下載,但延遲執行。腳本的加載與後續的文檔加載是並行進的(異步),但是script腳本的執行要在文檔的解析完成後才執行,DOMContentLoaded事件觸發之前完成。和async一樣都是隻對外部JavaScript代碼有效。

在這裏插入圖片描述注:腳本的加載過程是異步進行的。

3. async和defer的區別:
當頁面中引入的多個script腳本文件時,async中腳本的執行順序與引入順序無關,即亂序執行;而defer中其執行順序與引入順序有關,即順序執行。(因此async則適用於對於沒有形成相互依賴的腳本之間)

4. 不使用async和defer的執行情況
無論如何包含代碼,只要不存在 defer 和 async 屬性,瀏覽器都會按照<script>元素在頁面中出現的先後順序對它們依次進行解析。換句話說,在第一個<script>元素包含的代碼解析完成後,第二個<script>包含的代碼纔會被解析,然後纔是第三個、第四個……

5. 兼容問題:
然而以上兩種異步加載的方式都會有瀏覽器兼容問題,還有一種異步加載的處理方式就是將script標籤放在文檔中</body>的上方,也就是當文檔加載和解析完成後,再加載並執行腳本文件,防止腳本文件的加載和執行對文檔的解析造成阻塞而導致長時間白屏。因此,把延遲腳本放在頁面底部仍然是最佳選擇。

二. 嵌入代碼與外部文件

支持外部文件的優點:

  • 可維護性:將JavaScript統一放在一起便於維護,並且能夠更加專注於JavaScript代碼的編寫。
  • 可緩存:瀏覽器能通過設置緩存鏈接對應的外部JavaScript文件。當多個頁面請求同一個文件時可以節省資源浪費。
  • 適應未來:HTML和XHTML包含外部文件的語法是相同的。

三. 文檔模式

文檔模式可通過設置文檔類型<!DOCTYPE>切換實現。在還沒有文檔類型聲明這一說法之前,所有瀏覽器默認開啓混雜模式。
文檔模式包括:混雜模式和標準模式。
影響:兩種模式的不同主要影響CSS內容的呈現,但某些情況下也會影響JavaScript的解析執行。

標準模式的使用:

<!-- HTML 4.01 嚴格型 -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<!-- XHTML 1.0 嚴格型 -->
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!-- HTML 5 -->
<!DOCTYPE html>

準標準模式的使用(兼容):

<!-- HTML 4.01 過渡型 -->
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<!-- HTML 4.01 框架集型 -->
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">

<!-- XHTML 1.0 過渡型 -->
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!-- XHTML 1.0 框架集型 -->
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

四. <noscript>元素

<noscript>是用於在不支持JavaScript的瀏覽器中顯示替代的內容,標籤內包含能夠出現在文檔<body>中的任何HTML元素,顯示的條件:

  • 瀏覽器不支持腳本
  • 瀏覽器支持腳本,但腳本被禁用

(本文純屬個人學習筆記,如有不足請留言!)

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章