首頁 > 開發者 > JavaScript
標籤：
在HTML中使用Javascript只需一個標籤<script>即可，雖然簡單，但是裡邊有很多注意的東西，且聽在下慢慢道來。
首先，使用<script>標籤時推薦使用<script></script>，而不是使用<script />，因為後者是XHTML的寫法，也許會在某些瀏覽器中得不到正確解析，比如IE。<script>標籤既可以內部內嵌程式碼，也可以引用外部代碼。當兩者都存在的時候只會下載並執行外部指令檔，嵌入的代碼將會忽略。這裡推薦使用外部指令碼，因為外部指令碼可維護性強，而且可以被瀏覽器緩衝，大大提高效能。由於<script>標籤使用src屬性來引入外部JS文檔，所以利用這個特性可以實現跨域功能，比如Jsonp。
<script>標籤是會阻塞頁面文檔解析的，意思就是說，當瀏覽器讀到<script>標籤的時候，如果是引入的外部檔案則會先執行下載，然後執行逐行解析，這個過程中瀏覽器一心一意在處理JS代碼，所以導致頁面停頓在這裡，不會載入和顯示剩餘HTML文檔。所以如果將<script>標籤置於HTML文檔的頭部<head>標籤裡的話，並且恰巧網速又有點慢，捎帶著<script>標籤裡又有個alert什麼的，那麼恭賀你，瀏覽此頁面的使用者此時會優雅地點擊瀏覽器的小紅叉以示敬意。所以綜上所述，將<script>標籤放置於<body>的結束標籤</body>之前會是一個好的習慣，這樣做會解決上邊的問題。
<script>標籤中有兩個很有意思的屬性defer和async，通過這兩個屬性可以實現延遲指令碼和非同步指令碼的功能。
defer屬性用法即在<script>標籤中加入defer="defer"，這個屬性的作用是告訴瀏覽器，你解析文檔的同時可以下載我，但是可以先不執行，等到你把頁面都解析完畢了再執行我。defer屬性只支援外部指令碼。
async與defer類似，這個屬性會告訴瀏覽器，解析文檔和<script>的下載執行完全是非同步，可以同時進行，但是指令碼只要下載完畢就開始執行，指令碼的執行依舊會阻塞文檔解析。
以前我一直不太明白defer和async區別，直到我看到了這張圖（出處為http://segmentfault.com/q/1010000000640869）：
當然，不管用defer還是async，將<script>放到</body>標籤之前都是一個好習慣。
當瀏覽器不支援Javascript（現在基本不存在這種瀏覽器了）或者尚未開啟Javascript功能的時候，利用<noscript>標籤，你可以提示使用者有多麼的愚蠢因為居然不用Javascript，比如：
<noscript> <p>本頁面需要瀏覽器支援（啟用）Javascript。</p></noscript>
最後說一下文檔模式，文檔模式主要是通過文件類型（doctype）來切換的，最初分為混雜模式（quirks mode，又稱怪異模式）和標準模式（standards mode，又稱strict 模式）。當瀏覽器發現文檔並沒有文件類型聲明的時候會預設開啟混雜模式，混雜模式下瀏覽器表現和行為差異會非常大，所以推薦都要在HTML文檔開始聲明文件類型。
對於標準模式，瀏覽器會儘可能使文檔表現和行為與標準契合，有三種聲明方式：
<!-- HTML 4.01 嚴格型 --><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><!-- XHTML 1.0 嚴格型 --><!DOCTYPE htmlPUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><!-- HTML 5 --><!DOCTYPE html>
後來又有準標準模式，使用過渡型（transitional）或框架組型（frameset）文件類型觸發，他們的寫法就不羅列了，看doctype一目瞭然。准標準模式與標準模式的表現基本很相近，差異可以忽略不計。
Javascript學習筆記（二）在HTML中使用Javascript
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
