同步加载

  • 阻塞模式 , 提高安全性

过多JS加载会影响页面效率
默认正常情况下, JS是同步加载 , 及优先加载外部JS , 只有当JS文件加载完成 , don和css才开始加载

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

异步加载

  • 非阻塞加载

    • 动态创建script

    • defer 延迟加载JS,等到HTML的DOM全部解析之后

    • async HTML的文档解析和脚本的获取同时进行

<script src = 'index.js' defer></script> -defer
<script src = 'index.js' async></script> -async

理解优化

解析,获取和执行

  • 浏览器解析html的DOM是从上到下的,JS默认为同步加载
  • 先被解析head的JS资源, 在body没有解析完之前会被绑定监听

即: head的JS资源在页面加载前, body的JS资源在页面加载后–逐一获取JS

如: JS替换页面全局变量时, 需要将JS在body获取, 或者在head进行defer

网页播放器一般放在body最底部, Ps:网页播放器与内容相干甚少,直接按需求defer/async

默认

async

defer

  • 默认: 提前加载并执行, 都占用html解析
  • async: 异步加载, 获取和解析同时, 执行占用html解析
  • defer: 异步加载, 获取完并不执行, 执行不占用html解析