- 行内引入，即在元素标签内，一般是绑定元素事件属性的执行脚本。
缺点：可复用性差，页面结构混乱，可读性差等。
特点：行内事件回调代码默认有
event变量指向事件对象，this默认指向DOM元素。
- 内部代码，即
<script></script>标签内的代码
缺点：同样存在复用性差问题，只应用于当前页面，同步执行造成页面解析加载过程的阻塞，代码解释执行完毕前不会加载渲染之后的内容。
- 外部代码，通过在
<script>标签指定src属性。
特点：不受同源策略限制，可以访问其他域的资源文件。同步阻塞解释执行，但是可以通过指定
defer,async关键字实现延迟或者异步执行。可应用浏览器缓存。
defer在DOM解析完毕后，DOMContentLoaded事件前按照元素顺序执行。async完全异步，执行时机取决于加载完毕的时间。
- 动态加载脚本，通过js代码动态生成
<script>标签加载执行外部代码
特点：实现运行时按需加载。支持代码分割。
- 将
<script>标签放在<body>最后边，也就是全部DOM节点之后执行。 - 通过
<script>指定defer属性使代码延后在DOM节点加载渲染后执行。 - 通过
window.addEventListener('DOMContentLoaded', callback)使代码作为DOMContentLoaded回调函数执行。 - 通过动态加载引入的形式，也就是通过js动态生成
<script>标签来引入执行外部代码。 - 加载与执行分离，通过
<link ref="preload" href="">方式进行预加载，避免阻塞渲染和document的onload事件