Skip to content

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

Open
@haizhilin2013

Description

@haizhilin2013
Collaborator

第89天 js异步加载有哪些方案?

Activity

shejiJiang

shejiJiang commented on Jul 14, 2019

@shejiJiang

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脚本下载完后立刻并行执行

liuxiaole

liuxiaole commented on Jul 14, 2019

@liuxiaole

9012 年不得不提 <script type="module">(自带 defer 效果) 和 动态加载模块的 import() 函数,配合 async/await 我忍不住说真香!

d4c-27

d4c-27 commented on Apr 5, 2022

@d4c-27

async script :解析 HTML 过程中进行脚本的异步下载,下载成功立马执行,有可能会阻断 HTML 的解析
defer script:解析HTML时,带有defer的脚本同时加载,解析完成之后等待页面加载完后才会执行,完全不会阻碍 HTML 的解析

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    jsJavaScript

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @shejiJiang@liuxiaole@haizhilin2013@d4c-27

        Issue actions

          [js] 第89天 js异步加载有哪些方案? · Issue #745 · haizlin/fe-interview