JS异步加载的几种方式

最新推荐文章于 2024-09-03 13:48:14 发布
最新推荐文章于 2024-09-03 13:48:14 发布
阅读量9.5k 收藏 43
点赞数 5
分类专栏： JS 文章标签： JS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shan1991fei/article/details/79395216
版权

1、同步加载

我们平常写JS的时候都是用的阻塞模式如

<script type="text/javascript" src="../../libs/crypto/abc.js" ></script>
<script type="text/javascript" src="../../libs/crypto/abcd.js" ></script>

这种模式会阻止浏览器的后续解析，只有当前加载完成才能进行下一步操作，所以默认同步执行才是安全的。

但是这样如果JS中有输出document内容、修改dom、重定向的行为，就会造成页面阻塞。

建议把<script>标签放在<body>结尾处，这样尽可能减少页面阻塞。

2、异步加载

异步加载又被称为非阻塞加载，浏览器在下载JS的同时，还会进行后续页面处理。

有如下五种方式

方法一：Script Dom Element
(function(){
    var scriptEle = document.createElement("script");
    scriptEle.type = "text/javasctipt";
    scriptEle.async = true;
    scriptEle.src = "http://cdn.bootcss.com/jquery/3.0.0-beta1/jquery.min.js";
    var x = document.getElementsByTagName("head")[0];
    x.insertBefore(scriptEle, x.firstChild);		
 })();

<async>属性是HTML5中新增的异步支持。此方法被称为Script DOM Element方法

(function(){;
    var ga = document.createElement('script'); 
    ga.type = 'text/javascript'; 
    ga.async = true; 
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; 
    var s = document.getElementsByTagName('script')[0]; 
    s.parentNode.insertBefore(ga, s); 
})();

但是这种加载方式执行完之前会阻止onload事件的触发，而现在很多页面的代码都在onload时还执行额外的渲染工作，所以还是会阻塞部分页面的初始化处理。

方法二：onload时的异步加载

(function(){
	if(window.attachEvent){
    	window.attachEvent("load", asyncLoad);
    }else{
    	window.addEventListener("load", asyncLoad);
    }
    var asyncLoad = function(){
    	var ga = document.createElement('script'); 
        ga.type = 'text/javascript'; 
        ga.async = true; 
        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; 
        var s = document.getElementsByTagName('script')[0]; 
        s.parentNode.insertBefore(ga, s);
    }
})();

这种方法只是把插入script的方法放在一个函数里面，然后放在window的onload方法里面执行，这样就解决了阻塞onload事件触发的问题。

注:DOMContentLoaded与load的区别。前者是在document已经解析完成，页面中的dom元素可用，但是页面中的图片，视频，音频等资源未加载完，作用同jQuery中的ready事件；后者的区别在于页面所有资源全部加载完毕。

方法三：$(document).ready()

  • 需要引入jquery

  • 兼容所有浏览器

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

方法四：<script>标签的async="async"属性

  • async属性是HTML5新增属性，需要Chrome、FireFox、IE9+浏览器支持

  • async属性规定一旦脚本可用，则会异步执行

  • async属性仅适用于外部脚本

  • 此方法不能保证脚本按顺序执行

  • 他们将在onload事件之前完成

<script type="text/javascript" src="xxx.js" async="async"></script>

方法五：<script>标签的defer="defer"属性

  • defer属性规定是否对脚本执行进行延迟，直到页面加载为止

  • 如果脚本不会改变文档的内容，可将defer属性加入到<script>标签中，以便加快处理文档的速度

  • 兼容所有浏览器

  • 此方法可以确保所有设置了defer属性的脚本按顺序执行

<script type="text/javascript" defer></script>

柏灿
关注
专栏目录
详解js异步加载的三种方式
V8min的博客
03-28 5593
详解js异步加载的三种方式 一.同步加载 默认正常模式下，JS是同步加载的，及优先加载JS，只有当JS文件下载完，dom和css才开始加载 同步加载是我们使用最多的一种方式，同步模式，又称为阻塞模式，会阻止浏览器的后续处理，停止后续的解析，要等js加载完并执行之后才能执行下一步，所以默认同步执行是最安全的。但这样如果js中有输出document内容、修改dom、重定向等行为，就会造成页面堵塞。所以一般建议把缺点：过多js加载会影响页面效率，一旦网速不好，那么整个网站将等待js加载而不进行后续渲染等工作。 &
JS异步加载的三种方式
热门推荐
前端小白的博客
02-27 8万+
JS同步加载，异步加载，延迟加载，图片懒加载
JS【异步加载】相关知识点解析（从六个方面解读）
最新发布
2301_79858914的博客
09-03 1417
异步加载是JavaScript开发中的核心概念，能够显著提升网页的响应速度和用户体验。理解并掌握回调函数、Promise、async/await，以及事件循环的工作原理，能够帮助开发者有效管理和优化异步操作。在实际应用中，合理选择和组合这些异步加载方式，可以让代码更加高效和易于维护。
14. 异步加载Js的方式有哪些？
Melody5271的博客
03-01 938
我们都知道渲染引擎遇到 script 标签会停下来，等到执行完脚本，继续向下渲染，如下： <script type="text/javascript" src="../../libs/public.js" ></script> 这样会阻止浏览器的后续解析，只有当前加载完成才能进行下一步操作，所以默认同步执行才是安全的。但是这样如果JS...
异步加载的方式有哪些？
weixin_30625691的博客
08-24 281
(1)defer，只支持 IE，延迟脚本的执行 (2)async:异步的意思 (3)创建 script，插入到 DOM 中，加载完毕后 callBack 转载于:https://www.cnblogs.com/luckyXcc/p/5804553.html
异步加载js的方式有哪些？
qq_44436509的博客
08-25 504
1. onload时的异步加载 window.addEventLitener("load",loadHandler); dunction loadHandler(){ var gs = document.createElement("script"); .... } 将script方法放在一个函数里面，然后在window的onload()方法里面执行 2. $(document).ready() 引入jquery $(document).ready(function(){}) 3.async &lt
JS异步加载的三种实现方式
10-20
在现代网页设计和开发中，JavaScript异步加载是一种重要的技术，有助于提升页面的响应速度和用户体验。异步加载意味着在不阻塞其他页面内容渲染的情况下，下载和执行JavaScript脚本。本文将深入探讨JS异步加载的三种...
使用jQuery异步加载 JavaScript脚本解决方案
01-19
JavaScript 加载器在 Web 开发... 实现方法 jQuery 内置有 getScript 方法来加载一个脚本，处理返回的结果可以有几种方法来实现。最基本的用法 jQuery.getScript 看起来像这样： 代码如下: jQuery.getScript(“/path/t
如何判断异步的html全部加载完成,详解JS异步加载的三种方式
weixin_29432421的博客
06-10 1203
一：同步加载我们平时使用的最多的一种方式。HTML5新属性：async和defer属性defer属性：IE4.0就出现。defer属声明脚本中将不会有document.write和dom修改。浏览器会并行下载其他有defer属性的script。而不会阻塞页面后续处理。注：所有的defer脚本必须保证按顺序执行的。async属性：Html5新属性。脚本将在下载后尽快执行，作用同defer，但是不能保...
JS异步加载的三种方法
Mr.Starl
06-12 5067
JavaScript默认是同步加载（又称阻塞模式），这种模式在加载js文件时，会影响后续页面的渲染，一旦网速不好，整个页面将会等待js文件的加载，从而不进行后续页面的渲染，这也是提倡将<script>标签放在</body>标签之前的原因。 另外，有些js文件是按需加载的，用的时候加载，不用时不必加载。所以引入了异步加载模式（非阻塞模式），即浏览器在下载执行js文件时，会同...
扩展了一棵jquery的树插件SimpleTree(jquery.simple.tree.js)，支持json数据,checkbox树,以及异步加载,
03-20
demo以及源码 博文链接：https://lanrenjun.iteye.com/blog/824985
异步加载JS的方式有哪些
笑望灬星辰
04-15 121
异步加载JS的方式有哪些 1. defer，只⽀持 IE 2. async ( 多数第三方框架采用此方案 ) 3. 创建 script ，插⼊到 DOM 中，加载完毕后 callBack
js异步加载的5种方式
weixin_30840253的博客
08-21 165
方案1：$(document).ready 点评： 1、需要引用jquery 2、兼容所有浏览器。 方案2：<script>标签的async="async"属性 async的定义和用法(是HTML5的属性) async 属性规定一旦脚本可用，则会异步执行。 点评： 1、HTML5中新增的属性，Chrome、FF、IE9&IE9+均支持（IE6~8不支持）。此外...
异步加载JS的五种方式
jolin0487的博客
11-24 321
方案一：script>标签的async="async"属性（详细参见：script标签的async属性） 点评：HTML5中新增的属性，Chrome、FF、IE9&IE9+均支持（IE6~8不支持）。此外，这种方法不能保证脚本按顺序执行。 方案二：script>标签的defer="defer"属性 点评：兼容所有浏览器。此外，这种方法可以确保所有设置defer属性的脚本按顺序执行。 方案三：动态创
异步加载js的五种方式
qq_37309764的博客
05-31 254
1.设置<script>属性anync=“anync”（一旦脚本可用，则会异步执行） 2.动态创建scriptDOM:document.createElement(“script”); 3.XmlHttpRequest脚本注入； 4.异步加载库LAB.js 5.模块加载器Sea.js ...
JavaScript面试题-异步加载js的方式有哪些？
weixin_44486539的博客
10-29 1277
异步加载js的方式有哪些 script 标签的 async 属性 该属性是HTML5中新增的异步支持；但是这种加载方式执行完之前会阻止onload事件的触发，而现在很多页面的代码都在onload时还执行额外的渲染工作，所以还是会阻塞部分页面的初始化处理。 script 的 defer 属性 defer 属性规定是否对脚本执行进行延迟，直到页面加载为止；只支持IE。 onload时的异步加载...
Cocos creator提前加载资源
05-31
在 Cocos Creator 中，你可以使用 `cc.loader.loadResDir` 方法来提前加载资源。这个方法可以加载指定目录下的所有资源，并在所有资源加载完成后调用回调函数。下面是一个例子，演示如何提前加载一个名为 "assets/resources" 的目录下的所有图片资源： ```javascript cc.loader.loadResDir("assets/resources", cc.SpriteFrame, function (err, spriteFrames) { if (err) { cc.error(err.message || err); return; } // 在这里处理加载完成后的逻辑，比如将所有图片资源添加到缓存中 for (var i = 0; i < spriteFrames.length; i++) { cc.spriteFrameCache.addSpriteFrame(spriteFrames[i], spriteFrames[i].name); } }); ``` 这个例子中，我们调用了 `cc.loader.loadResDir` 方法来加载 "assets/resources" 目录下的所有图片资源，资源类型为 `cc.SpriteFrame`，并在加载完成后调用了回调函数。在回调函数中，我们遍历了所有加载完成的图片资源，并将它们添加到了精灵帧缓存中。这样，在游戏中需要使用这些资源时，就可以直接从缓存中获取，而无需再次加载。 需要注意的是，提前加载资源会占用一定的内存，因此只有在游戏中大量使用某些资源时，才有必要进行提前加载。同时，如果资源过多，也可能会影响游戏的启动速度。因此，需要根据具体情况来决定是否进行提前加载。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值