1 如何在HTML使用JavaScript

在HTML中使用JavaScript主要有三种方法：

  • 事件句柄。
  • 嵌入代码。
  • 外部文件。

1.1 事件句柄

我们可以使用事件句柄（如onclick）为一个HTML元素注册事件，它是通过HTML元素属性的方式实现的，如：

<button onclick="alert('我是一个按钮！');"></button>

1.2 嵌入代码

另外，还可以直接在script标签里面直接写js代码：

<script>
    var a = 1;
    alert(a); 
</script>

1.3 外部文件

还可以用外部文件的方式来引入js文件，这种方式最常用：

<script src='a.js'></script>

2 浏览器对于js外部文件的三种打开方式

在HTML通过 script 元素来引入js外部文件，script标签有defer和async两个属性，对于不同的属性设置，浏览器对于js脚本的处理方式是不一样的：

2.1 没有defer和async

<script src='a.js'></script>

这时，浏览器会立即下载并执行指定的脚本，立即指在加载和渲染该script元素后面的文档元素之前。

2.2 defer属性

<script defer src='a.js'></script>

有defer时，加载后续文档元素的过程将和 a.js 的加载并行进行（异步），但是 a.js 的执行要在所有元素解析完成之后，DOMContentLoaded 事件触发之前完成。

备注1：load 事件和 DOMContentLoaded 事件间的不同

  • load事件：页面所有资源被加载完成后会被触发。
  • domReady/DOMContentLoaded事件：dom树构建完成后便会被触发。
    备注2：DOM文档加载的步骤
  • 解析HTML结构。
  • 加载外部脚本和样式表文件。
  • 解析并执行脚本代码。
  • DOM树构建完成。（DOMContentLoaded事件被触发）
  • 加载图片等外部文件。
  • 页面加载完毕。（load事件被触发）

2.3 async属性

<script defer src='a.js'></script>

加载和渲染后续文档元素的过程将和 a.js 的加载与执行并行进行（异步）。（但是加载完后的js文件的执行时间具有不确定性）

3 相关性能问题

大多数浏览器是使用单一线程（UI线程）来处理用户界面和执行js脚本的，因此，当js代码在执行时就可能出现页面渲染和用户交互完全被阻塞的问题（如形成白屏），下面是针对该类问题的一些解决方案。

  • 脚本位置
  • 将脚本放在body底部。
  • 组织脚本
  • 压缩js文件，减小文件大小。
  • 合并js文件，减少http请求。
  • 延迟脚本（延迟的时间不同）
  • defer：在script元素内设置，可以异步加载，但是到DOM树构建完成后才会执行js脚本。
  • window.onload：在js文件内部设置，到页面所有资源加载完毕后才会执行js脚本。
  • 异步脚本
  • async：异步加载，但不能确定js脚本的执行时间。