第二章=》在HTML中使用JavaScript

時間 2019-11-12

標籤第二 html 使用 javascript 欄目 HTML 简体版

原文原文鏈接

在HTML中使用JavaScripthtml

2.1 <script>元素瀏覽器

2.1.1 script元素的屬性緩存

async: 可選。表示應該當即下載腳本，但不該妨礙頁面中的其餘操做。只對外部腳本有效。服務器

charset: 可選。表示經過src屬性指定的代碼的字符集。異步

defer : 可選。表示腳本能夠延遲到文檔徹底被解析和顯示以後再執行。只對外部腳本有效。async

src: 可選。表示包含要執行代碼的外部文件spa

type: 可選。表示編寫代碼使用的腳本語言的內容類型。htm

　　2.1.2 解釋順序事件

a. 包含在<script>元素內部的JS代碼將被從上至下一次解釋，而後保存在本身的環境當中。在解釋器對<script>元素內部的全部代碼求值完畢之前，頁面中的其他內容都不會被瀏覽器加載或顯示。ip

b.若是要經過<script>元素來包含外部JS文件，那麼src屬性就是必須的。在解析外部JS文件時，頁面的處理也會暫時中止。

2.1.3 標籤的位置

現代Web應用程序通常都把所有JS引用放到<body>元素中頁面後面，這樣在解析包含的JS代碼以前，頁面的內容將徹底呈如今瀏覽器中。而用戶也會由於瀏覽器窗口顯示空白時間的縮短而感到打開頁面的速度加快了

2.1.4 延遲腳本

defer屬性只適用於外部腳本文件，會使腳本延遲到整個頁面都解析完畢後再運行。在<script>元素中設置defer屬性，至關於告訴瀏覽器當即下載，但延遲執行。

在現實當中，延遲腳本並不必定會按照順序執行，也不必定會在DOMContentLoaded事件前執行，所以最好只包含一個延遲腳本。

2.1.5 異步腳本

async只適用於外部腳本文件，並告訴瀏覽器當即下載文件。但與defer不一樣的是，標記爲async的腳本並不保證按照指定它們的前後順序執行。因此要確保多個異步腳本之間互不依賴。

指定async屬性的目的是不讓頁面等待兩個腳本下載和執行，從而異步加載頁面其餘內容。爲此，建議異步腳本不要在加載期間修改DOM。異步腳本必定會在頁面的load事件前執行，但可能會在DOMContentLoaded事件出發以前或以後執行

2.2 選擇嵌入代碼仍是外部文件

最好的作法仍是儘量使用外部文件來包含JS代碼，使用外部文件的優勢

可維護性
可緩存：瀏覽器可以根據具體的設置緩存鏈接的全部外部JS代碼。也就是說，若是有兩個頁面都是用同一個文件，那麼這個文件只需下載一次。所以，最終結果就是可以加快頁面加載的速度。
適應將來：經過外部文件來包含JS無須使用XHTML或註釋hack

2.3 文檔模式

IE5.5引入了文檔模式的概念，最初的兩種文檔模式是：混雜模式與標準模式。混雜模式會讓IE的行爲與（包含非標準特性的）IE5相同，而標準模式則讓IE的行爲更接近標準行爲。雖然這兩種模式主要影響CSS內容的呈現，但也會影響JS的解釋執行。

若是在文檔開始處沒有發現文檔類型聲明，則全部瀏覽器都會默認開啓混雜模式。但採用混雜模式不是什麼值得推薦的作法，由於不一樣瀏覽器在這種模式下的行爲差別很是大，若是不使用某些hack技術，跨瀏覽器的行爲根本就沒有一致性可言。

因此應該使用標準模式

<!DOCTYPE html>

2.4 小結

把JS插入到HTML頁面中要使用<script>元素。使用這個元素能夠把JS嵌入到HTML頁面中，讓腳本與標記混合在一塊兒；也能夠包含外部的JS文件。

在包含外部JS文件時，必須將src屬性設置爲指向相應文件的URL。而這個文件既能夠是與它的頁面位於同一個服務器上的文件，也能夠是其餘任何域中的文件。

在不使用defer 和 async屬性的狀況下，全部<script>元素都會按照它們在頁面中出現的前後順序依次被解析

使用defer屬性可讓腳本在文檔徹底呈現以後再執行。延遲腳本老是按照指定它們的順序執行。

使用async 屬性表示當前腳本不比等待其餘腳本，也沒必要阻塞文檔呈現。不能保證異步腳本按照它們在頁面中出現的順序執行。

相關標籤/搜索

html+css+javascript+html

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。