原始代码及效果
<!DOCTYPE html>
<html lang="zh-cmn-hans">
<head>
<meta charset="UTF-8">
<title>test</title>
<style>
body {
background-color: lightblue;
}
</style>
</head>
<body>
</body>
</html>
在<head>里面添加<script>脚本,将会先执行js脚本,阻塞后面的页面加载。
<!doctype html>
<html lang="zh-cmn-hans">
<head>
<meta charset="UTF-8">
<title>test</title>
<style>
body {
background-color: lightblue;
}
</style>
<script>
alert("hello world");
</script>
</head>
<body>
</body>
</html>
在<head>里面添加外部js脚本,依旧会先执行js脚本,阻塞后面的页面加载。
<!doctype html>
<html lang="zh-cmn-hans">
<head>
<meta charset="UTF-8">
<title>test</title>
<style>
body {
background-color: lightblue;
}
</style>
<script src="1-7-test-js.js"></script>
</head>
<body>
</body>
</html>
给<script>加上async属性,进行异步加载。
(注意:async属性只对外部脚本有效。)
<!doctype html>
<html lang="zh-cmn-hans">
<head>
<meta charset="UTF-8">
<title>test</title>
<style>
body {
background-color: lightblue;
}
</style>
<script src="1-7-test-js.js" async="async"></script>
</head>
<body>
</body>
</html>
页面加载的过程中,遇到<script>会立即解析,完成后才会继续向下进行,因此需要注意的是:
1.需要异步加载js脚本,需要给<script>加上async属性(必须是外部脚本才有效)。
2.要在页面加载完成后执行的js脚本,最好放在</body>之前,这样可以加快页面加载速度。
3.如果js脚本需要操作DOM节点,脚本放在需要操作的DOM节点之前,则会出现错误。
参考文章:
https://coolshell.cn/articles/9749.html
https://juejin.im/post/59e85eebf265da430d571f89