js异步加载的五种方式

2021-10-17 15:32:31 阅读：95 来源： 互联网

前言

　默认情况下js都是同步加载的，又称阻塞模式，如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>js异步加载</title>
    <script src="test1.js"></script>
    <script src="test2.js"></script>
</head>
<body>
<!--这是页面内容-->
</body>
</html>

　这种模式也就意味着必须把所有js代码都下载、解析和解释完成后，才能开始渲染页面（页面在浏览器解析到<body>的起始标签时才开始渲染）。显然，这样会导致页面渲染的明显延迟，在此期间浏览器窗口完全空白。而且如果JS中有输出document内容、修改dom、重定向的行为，就会造成页面阻塞。当然为了解决这个问题，我们可以把所有Js引用都放在<body>元素中的内容之后，如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>js异步加载</title>
</head>
<body>
<!--这是页面内容-->
<script src="test1.js"></script>
<script src="test2.js"></script>
</body>
</html>

　但是如果我们想要放在上面呢？有没有办法呢？当然有，接下来我们来看看Js异步加载的四种方式：

js异步加载的四种方式

1、<script>标签的defer=“defer”属性

<script defer="defer" src="test1.js"></script>  //先执行

<script defer="defer" src="test2.js"></script>  //后执行

脚本会被延迟到整个页面都解析完毕再运行（相当于告诉浏览器立即下载，但延迟执行）
如果脚本不会改变文档的内容，可将defer属性加入到<script>标签中，以便加快处理文档的速度
会按出现顺序执行
只对外部脚本文件有效
兼容所有浏览器

2、<script>标签的async="async"属性

<script async="async" src="test1.js"></script>
<script async="async" src="test2.js"></script>

async是HTML5新增属性
需要Chrome、FireFox、IE9+浏览器支持
不会保证按出现的次序执行
只对外部脚本文件有效

3、动态创建<script>标签

var script = document.createElement("script"); 
script.src = "test.js"; 
document.head.appendChild(script);

兼容所有浏览器

4、$(document).ready()

$(document).ready(function() {
    alert("加载完成！");
});

需要引入jquery
兼容所有浏览器

5、onload异步加载

　　window.onload = function (){
        console.log("异步加载")
    }

onload事件会在整个页面加载完后才触发（注意是触发，不是执行）。

标签：异步,浏览器,页面,js,document,加载
来源： https://www.cnblogs.com/WuAnqi/p/15417044.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

js异步加载的五种方式