天天看點

在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代碼有效。

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

注:腳本的加載過程是異步進行的。

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元素,顯示的條件:

  • 浏覽器不支援腳本
  • 浏覽器支援腳本,但腳本被禁用
(本文純屬個人學習筆記,如有不足請留言!)

繼續閱讀