JavaScript高階程式設計（第四版）學習筆記（第二章 HTML中的JavaScript）
技術標籤：javascriptjavascripthtmles6
第二章 HTML中的JavaScript
文章目錄
- 1.<script>元素
- 1.1標籤位置
- 1.2推遲執行指令碼和非同步執行指令碼
- 1.3動態載入指令碼
- 2.行內程式碼和外部檔案
- 3.文件模式
- 4.<noscript>元素
1.<script>元素
將JavaScript插入HTML的方法是使用<script>元素，它具有八個屬性，分別是：
- async：可選。表示應該立即開始下載指令碼,但是不能阻止其它頁面的動作，只對外部指令碼有效。
- charset：略
- crossorigin:可選，配置相關請求的CORS(跨資源共享)設定。預設不使用CORS。
- defer:可選。表示指令碼可以延遲到文件完全被解析和顯示之後再執行
- integrity:略
- language:廢棄，略
- src:可選。表示要執行的程式碼的外部檔案。
-
type：可選，代替language,表示程式碼塊中的指令碼語言的內容型別（也稱為MIME型別）。一般值為text/javascript,如果為module,則程式碼會被當做ES6模組
使用<script>的兩種方式：通過它直接在網站中嵌入JavaScript程式碼，以及通過它在網頁中包含的外部JavaScript檔案
<script>
alert('hi')
</script>或者
<script src="demo.js"></script>
注意：使用第二種方式（在網頁中包含外部JavaScript檔案）的同時不要使用第一種方式（在網站中嵌入JavaScript程式碼），如果同時使用，瀏覽器會忽略行內程式碼。
瀏覽器在解析<script>資源的時候，傳送的請求不受瀏覽器同源策略限制，但是返回的JavaScript檔案則受限制，當然了，這個請求仍然受父頁面HTTP/HTTPS協議的限制。
在不使用defer和async屬性的情況下，瀏覽器會按照頁面中出現的順序依次解釋它們，下一個<script>元素一定要等到上一個<script>元素解釋完畢才會開始解釋。在使用defer和async的情況下就不一樣了，具體的後面會分析。
1.1標籤位置
過去常把<script>標籤放在<head>標籤內，這樣就必須在等所有的JavaScript檔案下載，執行完成後才開始渲染頁面（頁面在瀏覽器解析到<body>標籤時候才開始渲染），對於JavaScript檔案較多的頁面，這樣的做法會導致頁面渲染的明顯延遲（瀏覽器視窗空白）。為解決這個問題，我們通常會將所有的JavaScript引用放在body元素中的頁面後面。
程式碼如下（示例）：
<!DOCTYPE html>
<html>
<head>
</head>
<body>
這裡是頁面內容
<script src="demo1.js"></script>
<script src="demo2.js"></script>
</body>
</html>1.2推遲執行指令碼和非同步執行指令碼
首先我們要知道<script>從伺服器到本地執行會經歷三個過程————下載，解析，執行
那麼，首先下載是按照順序執行下去的，先出現的<script>元素包含的資原始檔先下載，解析，執行後才會輪到下一個<script>。如果之前的<script>元素含有defer屬性,那麼指令碼會放到當前頁面解析完成後執行，下載，解析還是會立即執行的。同時有多個推遲執行指令碼時，會按照順序執行，但最好只包含一個推遲執行指令碼，因為在實際使用中，不一定會按照順序執行。
非同步執行指令碼可以理解為儘快執行指令碼
根據這個圖總結一下
無defer和async屬性的情況下，瀏覽器會按照順序單執行緒下載，解析，執行指令碼。當指令碼具有defer和async屬性的時候，瀏覽器會（多執行緒）下載指令碼，defer屬性的指令碼會等頁面渲染完成後執行，async屬性的指令碼會在該指令碼下載，解析完成後立即執行，注意：執行指令碼的時候會阻塞頁面的渲染。
1.3動態載入指令碼
除了<script>標籤，還有其他方式可以載入指令碼。因為JavaScript可以使用DOM API，所以通過向DOM中動態新增script元素同樣可以載入指定指令碼，只要建立script元素並將其新增到DOM中即可。
let script = document.createElement('script');
script.src = 'demo.js';
document.head.appendChild(srcipt);預設情況下，這種方式建立的元素是以非同步的方式載入的，相當於添加了async屬性。這種方式對瀏覽器預載入器是不可見的（可見就怪了，預載入器才不會看你寫了什麼程式碼），所以在執行過程中可能會嚴重影響到效能，這時候可以在頭部顯式宣告它們的存在：
<link rel="preload" herf="demo.js"></link>2.行內程式碼和外部檔案
雖然可以直接在HTML檔案中嵌入JavaScript程式碼，但通常認為最佳實踐是儘可能將JavaScript程式碼放在外部檔案中，理由如下：
- 可維護性：將JavaScript檔案集合到一個資料夾下面比分散到各個HTML檔案下更好管理，更好維護。
- 快取:瀏覽器會根據特定的設定快取好所有外部連結的JavaScript檔案,當下次遇到同樣的檔案的時候就直接使用快取好的檔案，提高了頁面的效能。
- 適應未來：不用考慮到XHTML中的一些問題。現在XHTML已經推出歷史舞臺了。
3.文件模式
分兩種：混雜模式和標準模式（後面又出現了準標準模式，暫時不討論，也可以理解為除了混雜模式後就只有標準模式了）
主要區別只體現在CSS渲染的內容方面，但是對JavaScript也會有一些關聯影響，或稱為副作用。
4.<noscript>元素
對早期不相容JavaScript瀏覽器的一個優雅降級的方案。
現在如果瀏覽器禁用JavaScript的話，瀏覽器就會顯示包含在<noscript>中的內容。