JS执行顺序

分别创建两个js和两个html

  • one.js
  1. function test() {
  2. alert("function1");
  3. }
  • two.js
  1. function test() {
  2. alert("function2");
  3. }
  • index1.html
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <body>
  4. <a onclick="test()">提交</a>
  5. <script src="./one.js"></script>
  6. <script src="./two.js"></script>
  7. </body>
  8. </html>
  • index2.html
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <body>
  4. <a onclick="test()">提交</a>
  5. <script defer="defer" src="./one.js"></script>
  6. <script src="./two.js"></script>
  7. </body>
  8. </html>
  • 运行index1.html

  • 运行index2.html

总结

  • js默认加载方式为同步加载, 页面点击事件调用多个函数为最后加载的那个

  • html5async可异步加载

  • html5全面支持的deferasync都会立即执行当前js脚本,阻塞后面的脚本

  • async加载顺序是乱序的,并行执行(异步),跟引入顺序无关(哪个加载完成就调用哪个)

  • defer加载也是并行的,但初始化完成之后是顺序执行的,如前面的index2.html中引入的两个js脚本都有defer属性
    那么加载完成之后,点击时会弹出function2,两个js有相同函数,想要始终执行某一个js脚本中的函数,可以添加defer
    属性,页面执行完成始终执行有defer属性的js脚本

参考


0
0
0

添加评论

正在回复:
取消
0
0
0
0