目錄
-
<script>元素的解讀 - 延遲腳本和異步腳本
-
<noscript>元素
1. <script>元素的解讀
向HTML插入JavaScript的方法，主要有兩種：引入外部文件和直接在HTML中插入script元素；
同時，HTML4.01為<script>元素定義以下幾個主要的屬性：
-
src：引入外部文件的路徑，允許跨域訪問，但在使用外部js文件時，一定要選用值得信賴的提供方，因為你無法控制跨域的js文件； - type：腳本的內(nèi)容類型，js文件通常以
type="text/javascript"表示，但實際上服務(wù)器在傳送js文件時使用的MIME通常是application/x-javascript。通常外部js文件帶有.js擴展名，但這不是必須的，因為瀏覽器解析外部js文件時，是根據(jù)type="text/javascript"的指定方式去解析文件，而在響應(yīng)頭的表現(xiàn)就是Content-Type:text/javascript
1.1
- defer：改變腳本在執(zhí)行階段的處理行為，延遲執(zhí)行腳本直到DOM被完全解析和渲染；
- async：改變腳本在加載階段的處理行為，異步加載腳本，即在腳本還未加載完后不影響頁面的其他操作；
2. 延遲腳本和異步腳本
講js的延遲和異步屬性之前，先帶童鞋們了解一下一個js文件完整引入流程；
- 引入js文件包括加載、解析和執(zhí)行3個階段；
- 加載js默認（不加async屬性）是同步加載（阻塞加載）；
- 加載完js文件后，根據(jù)響應(yīng)頭信息的內(nèi)容類型
Content-Type:application/x-javascript進行js文件的解析（預(yù)處理階段），js引擎首先會解析所有的腳本，然后進行變量提升（hoisting），此時遇到錯誤將不報錯； - 執(zhí)行js文件，并按照腳本和代碼（未使用時間函數(shù)情況下）出現(xiàn)的先后順序執(zhí)行，并且遇到錯誤報錯；
詳見js的解析和執(zhí)行
2.1 延遲腳本
<script src= 'demo.js' defer='defer'></scirpt>
上述外部js文件的引入使用了script元素的defer屬性，它將會改變script元素引入流程過程中的執(zhí)行階段，即延遲執(zhí)行該腳本，直到頁面其他內(nèi)容解析和渲染完畢；
2.2 異步腳本
<script src='demo.js' async='async'></script>
上述外部js文件的引入使用了script元素的async屬性，它將會改變scirpt元素引入流程過程過程中的加載階段，即異步腳本加載過程中不影響頁面其他的操作；
【TIP】
如果你在頁面中使用兩個以上的異步腳本，那么一定要確保二者不存在依賴，不然可能會導(dǎo)致錯誤；
3. <noscript>元素
早期瀏覽器存在一個特殊的問題，即當瀏覽器不支持JavaScript是如何讓頁面平穩(wěn)退化，一個最終的解決方案是創(chuàng)造一個<noscript>元素用以在不支持JavaScript的瀏覽器中顯示替代內(nèi)容，這個元素內(nèi)部可以包含<body>元素中任何HTML元素，除了script元素外。
當然現(xiàn)代瀏覽器基本上都已經(jīng)完全支持js了，現(xiàn)在<noscript>元素主要用于腳本被禁用的情況；
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<noscript>
<p>你的腳本被禁用！?。?lt;/p>
</noscript>
</body>
</html>
