生活随笔
收集整理的這篇文章主要介紹了
关于引入 js 文件
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
一、說說 script 標簽的幾個常用屬性
async 表示立即下載該 js 文件，但不妨礙頁面中的其他操作（只對外部 js 文件有效）defer 表示該 js 文件可以延遲到整個頁面被解析并顯示之后再執行（只對外部 js 文件有效）src 指定要引入的 js 文件路徑type 是 language 的替代屬性，表示當前腳本的類型，如 text/javascript | text/babel
二、引入 js 文件
正常引入
<script src="./js/routerList.js"></script>
省略結束標簽（不符合 HTML 規范，也得不到 IE 瀏覽器的正確解析）
<script src="./js/routerList.js" />
注意： 帶有 src 屬性的 script 標簽里面不應該有代碼，如果有，則會被忽略
三、解決跨域問題，如 jsonp 就是利用這一點
<script src="https://www.xxx.com/xxx/xxx.js"></script>
四、script 標簽的位置
按照慣例放在 head 里面
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document
</title><script src="./js/demo1.js"></script><script src="./js/demo2.js"></script><script src="./js/demo3.js"></script>
</head>
<body>...
</body>
</html>
那按照文檔解析的順序只能將這些 js 文件，加載、解析并執行完了之后，才去呈現 body 里面的內容（延遲，導致頁面一片空白）
正確的做法是
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document
</title>
</head>
<body>...
<script src="./js/demo1.js"></script><script src="./js/demo2.js"></script><script src="./js/demo3.js"></script>
</body>
</html>
這樣，等頁面全部加載完成再去加載 js 文件，頁面顯示空白的時間縮短了，用戶體驗也很好
延遲腳本 defer – 等待頁面都加載完成之后再去加載 js 文件
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document
</title><script defer="defer" src="./js/demo1.js"></script><script defer="defer" src="./js/demo2.js"></script><script defer="defer" src="./js/demo3.js"></script>
</head>
<body>...
</body>
</html>
異步腳本 async
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document
</title><script async src="./js/demo1.js"></script><script async src="./js/demo2.js"></script><script async src="./js/demo3.js"></script>
</head>
<body>...
</body>
</html>
告訴瀏覽器立即下載 js 文件，defer 是等待頁面加載完成之后再加載、執行，async 是先下載，等頁面加載完成之后（load 事件之后），再執行
noscript– 看看瀏覽器支不支持 js
<noscript>如果你的瀏覽器不支持 javascript 我就會在頁面出現
</noscript>
—— 《javascript 高級程序設計》
總結
以上是生活随笔為你收集整理的关于引入 js 文件的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
