Cyanology

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

属性

src

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

引入外部脚本的好处：

提高可维护性

可以缓存，减少脚本下载的次数，加快页面加载速度

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元素中所有页面内容的后面（页面底部），
避免了阻塞页面渲染的问题。