关于javascript的执行顺序简单测试_js执行顺序怎么测试-CSDN博客

本文链接：https://blog.csdn.net/sinat_37646901/article/details/79036346

原始代码及效果

<!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