第2章 HTML中的JavaScript
# 第 2 章 HTML 中的 JavaScript
# <script>元素
有如下属性：
- src：外部 url 链接，可以是本域，也可以是其他域，且天然可以跨域。
- defer：浏览器立即下载脚本，但执行会在页面解析完之后进行。
- async：立即下载，下载之后立即执行，不会阻塞 html 解析。注意：异步脚本不应该修改 DOM，因为它们没有先后顺序。
- type：通常是"text/javascript"，也可以设置为"module"，表示 ES6 模块，可以使用 import/export。
- 其他，如 crossorigin,charset,integrity。
可以使用 DOM API 动态加载脚本，如下
let script = document.createElement('script')
script.src = 'gibberish.js'
document.head.appendChild('script')
1
2
3
2
3
这种方式对于浏览器预加载器是不可见的，这会他们在资源获取队列中的优先级，从而影响性能。解决方式是，在文档头部显式声明它们：
<link rel="preload" href="gibberish.js" />
1
# 行内代码与外部文件
有 2 种方式使用，因为浏览器解析时会当做脚本来处理。解决办法是用转义，如
<script>
console.log('<\/script>')
</script>
1
2
3
2
3
外部文件对比行内代码而言，有如下优势：
- 可维护性：js 代码很多时，可以使用外部文件来加载，而不是在每个页面都写。
- 缓存：利用浏览器缓存，如果一段脚本被多个页面使用，则脚本文件只需下载一次。
- 适应未来：js 放到外部文件后，不需要考虑 script 行内语法在 XHTML 和 HTML 中的差异性。
# 文档模式
可以使用头部的 doctype 来切换文档模式，现在浏览器都支持 HTML5 的文档类型，如下
<!DOCTYPE html>
1
# <noscript>元素
该元素用于给不支持 JavaScript 的浏览器或浏览器禁用脚本时，提供替代内容。
上次更新: 2021/09/20, 23:04:19