Javascript高階程式設計學習筆記（2）
script標籤
js在瀏覽器中的使用，肯定會涉及到script標籤。
那麼script標籤有哪些屬性呢？
1.async：非同步載入（不讓頁面等待該指令碼的載入執行，非同步載入頁面的其他部分）
2.charset：設定js的字符集編碼
3.defer：延遲指令碼（當瀏覽器解析到/html 結束標籤時才執行，該屬性對嵌入指令碼無效）
4.language：程式碼所使用的指令碼語言（已廢棄）
5.src：要執行的外部程式碼檔案
6.type：與language類似可以看作是language的替代屬性
在上面的這些屬性中src就不用過多的說明了，除了src使用較多，並且應用範圍較廣的就是async和defer了
下面將主要分析一下這兩個屬性
首先是defer
根據說明，設定了該屬性的script外部檔案會在解析到</html>標籤的時候才開始執行，並且會在DOMcontentonload 之前觸發
而且根據html5的要求這些延遲指令碼會按照在文件中的順序執行
DOM文件載入步驟：
（1）解析html結構
（2）載入外部指令碼和樣式表文件
（3）解析並執行指令碼程式碼
（4）構造HTML DOM模型 //DOMContentLoaded執行點
（5）載入圖片等外部檔案
（6）頁面載入完畢 //load
我們來測試一下
首先新建一個簡單的html頁面
<!DOCTYPE html> <html lang="zh"> <head> <title>title</title> <meta charset="utf-8"/> <meta name="Description" content=""/> <meta name="Author" content="巽秋"/> <style type="text/css"></style> <script src="./1.js"></script> <script src="./2.js"></script> </head> <body> <script> window.addEventListener("DOMContentLoaded", function () { //新增DOMContentLoaded事件 console.log("domContentLoad執行"); }, false); console.log("這裡是嵌入指令碼"); </script> </body> </html>
引入的外部js檔案程式碼如下：
console.log("這裡是外部指令碼1");//1.js 中的內容
console.log("這裡是外部指令碼2");//2.js 中的內容
我們開啟該頁面結果如下：
我們可以看到DOMContentLoaded是在js程式碼執行完後執行的
現在我們再給外部引入的兩個js檔案加上defer屬性
再次執行檢視結果
我們可以看到嵌入指令碼比1.js和2.js先執行了並且在domcontentloaded事件觸發之前就執行完畢了
和我們預先預測的結果一致。
接下來我們再看一下，這兩個外部檔案的執行順序是否真的和在頁面中出現的順序一致
我們交換一下兩個script標籤的引入的位置
再看一下結果
說明defer的延遲指令碼的載入順序和該指令碼在頁面中出現的順序是一致的
說明的確是這樣的
不過書中說實際上有可能不一定是這樣的，所以我又換了幾個瀏覽器試試
剛才的是chrome瀏覽器的結果
這是火狐瀏覽器的結果
這是ie11
ie10
雖然在低版本ie中addEventlistenter有相容問題但是我們可以看到defer指令碼的載入順序並沒有什麼改變
所以我也不知道在什麼情況下延遲指令碼會不遵守這個規則
然後是async
書中給出的描述是有該屬性的指令碼，立即載入並執行，頁面的其他部分非同步載入
並且async屬性的標籤一定會在window.onload之前執行，可能會在domcontentloaded之後執行
該屬性的指令碼不會按順序到來，所以在使用時需要確保該屬性的指令碼之間沒有依賴關係
首先給之前引入的兩個標籤的defer改為async屬性
然後加上window.onload事件
再來看一下結果
<!DOCTYPE html> <html lang="zh"> <head> <title>title</title> <meta charset="utf-8"/> <meta name="Description" content=""/> <meta name="Author" content="巽秋"/> <style type="text/css"></style> <script src="./2.js" async></script> <script src="./1.js"async></script> </head> <body> <script> window.addEventListener("DOMContentLoaded", function () { //新增DOMContentLoaded事件 console.log("domContentLoad執行"); }, false); window.onload = function(){ console.log("window.onload執行"); }; console.log("這裡是嵌入指令碼"); </script> </body> </html>
結果如下
這裡由於頁面非同步載入所以
嵌入指令碼先執行了
非同步指令碼在domcontentloaded之後執行的
我為了測試不按順序到來
我給兩個js的consle之前加了迴圈
來控制載入的時間
看看非同步指令碼是誰先載入完就先執行嗎？
我在2.js的後面貼上了jq1.12.4的程式碼
讓2.js比1.js檔案要大 但是console都是第一句程式碼
2.js還會先console嗎？
我們再來看看結果
結果很顯然
async 屬性的指令碼應該是誰先載入完誰就先執行，並且不管怎樣一定會在window.onload事件之前執行
noscript標籤
當瀏覽器沒有js環境，或者js被關閉的時候我們往往需要給使用者一些提示之類的
那麼這就是noscript標籤的作用
我們再建一個新的html頁面
<!DOCTYPE html> <html lang="zh"> <head> <title>title</title> <meta charset="utf-8"/> <meta name="Description" content=""/> <meta name="Author" content="巽秋"/> <style type="text/css"></style> </head> <body> <noscript>您的瀏覽器未開啟js</noscript> <script> console.log("js"); </script> </body> </html>
我們開啟這個頁面
我們可以看到在js開啟的情況下noscript標籤中的內容是不會顯示的
我接下來關閉js
然後重新整理頁面
今天就記錄一下script標籤吧
寫完，收工。