JS基础拾遗 - HTML 中的 script 元素

属性

src

可选，值为外部执行文件路径；
如果通过src引入了外部脚本，标签之间就不应该包含js代码，即使包含了也会被忽略；
src属性可以直接加载和解析外部的代码，这是JSONP实现的基础。

引入外部脚本的好处：

1. 提高可维护性
2. 可以缓存，减少脚本下载的次数，加快页面加载速度

type

可选，如果不指定该属性，默认值为 text/javascript

只对外部文件有效的属性

defer

defer = “defer”
脚本延迟到HTML文档完全解析后才执行；

补充事件：DOMContentLoaded
HTML完全解析完成后，DOMContentLoaded事件被触发，
它无需等待样式表、图像等依赖资源的加载，也就是说此时页面
并没有完全加载，这与完全加载才触发的load事件是不同的
defer 脚本会在DOMContentLoaded事件触发前执行。

https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/script

async

async = “async”
异步地执行脚本，意思是：
下载脚本时不阻塞浏览器页面加载，下载完后立即执行脚本。

放置位置

放置在head元素中

浏览器在遇到时才开始呈现内容，如果把script元素放在了head元素中，
则只在js完全加载和执行之后才呈现页面内容，这段时间内页面是空白的，影响体验。

放置在body元素中（最佳选择）

现在通常把script元素放在body元素中所有页面内容的后面（页面底部），
避免了阻塞页面渲染的问题。

<noscript>元素

这个元素比较眼熟，它出现在了React应用初始的index.html中。
该元素可以在浏览器不支持脚本，或脚本被禁用的情况下显示元素的内容。
可以包含页面元素，<script>除外。