如何在HTML使用JavaScript
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脚本。
- defer:在
- 异步脚本
- async:异步加载,但不能确定js脚本的执行时间。