1.将script标签放在body结束标签之前

<html>
<head></head>
<body>
 .....
<script type="text/javascript" src='...'></script>
</body>
</html>

这种方案会先加载dom树，然后再加载js脚本

2.在onload方法中给dom树动态添加script标签

<html>
<head></head>
<body onload="() => {
  var element = document.creatElement('script');
  element.type = 'text/javascript';
  element.src = '...';
  var headTag = document.getElementsByTagName('head')[0];
  headTag.insertBefore(element, headTag.firstChild);
}">
.....
</body>
</html>

这种方案也是先加载dom树，然后触发onload方法添加script标签加载js脚本

3.使用defer属性

<html>
<head>
    <script defer type='text/javascript'></script>
</head>
<body >.....</body>
</html>

这种方案会并行加载dom树和下载js脚本，js脚本下载后会等dom树解析完再执行

4.使用async属性

<html>
<head>
    <script async type='text/javascript'></script>
</head>
<body >.....</body>
</html>

这种方案也会并行加载dom树和下载js脚本，js脚本下载完后立刻并行执行

Uh oh!

[js] 第89天 js异步加载有哪些方案？ #745

Description

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions