js异步加载的5种方式

最新推荐文章于 2024-04-25 15:19:41 发布
转载 最新推荐文章于 2024-04-25 15:19:41 发布 · 198 阅读 · 1 ·
CC 4.0 BY-SA版权
原文链接：http://www.cnblogs.com/zhx119/p/9510902.html
文章标签：

#javascript #ViewUI

方案1：$(document).ready

点评：

1、需要引用jquery

2、兼容所有浏览器。

方案2：<script>标签的async="async"属性

async的定义和用法(是HTML5的属性)

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

点评：

 1、HTML5中新增的属性，Chrome、FF、IE9&IE9+均支持（IE6~8不支持）。此外，这种方法不能保证脚本按顺序执行。

 2、async 属性仅适用于外部脚本（只有在使用 src 属性时）。

方案3：<script>标签的defer="defer"属性

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

有的 javascript 脚本 document.write 方法来创建当前的文档内容，其他脚本就不一定是了。

如果您的脚本不会改变文档的内容，可将 defer 属性加入到 <script> 标签中，以便加快处理文档的速度。因为浏览器知道它将能够安全地读取文档的剩余部分而不用执行脚本，它将推迟对脚本的解释，直到文档已经显示给用户为止。

点评：兼容所有浏览器。此外，这种方法可以确保所有设置defer属性的脚本按顺序执行。

方案4：动态创建<script>标签

示例：

<!DOCTYPE html>
< html >
     < head >
         < script type = "text/javascript" >
             (function(){
                 var s = document.createElement('script');
                 s.type = 'text/javascript';
                 s.src = "http://code.jquery.com/jquery-1.7.2.min.js";
                 var tmp = document.getElementsByTagName('script')[0];
                 tmp.parentNode.insertBefore(s, tmp);
             })();
         </ script >
     </ head >
     < body >
         < img src = "https://images0.cnblogs.com/i/121863/201405/222202573569862.jpg" />
     </ body >
</ html >
点评：兼容所有浏览器。
方案5：加载es6模块的时候设置type=module
异步加载不会造成阻塞浏览器，页面渲染完再执行，可以同时加上async属性，异步执行脚本。

转载于:https://www.cnblogs.com/zhx119/p/9510902.html

JS异步加载的三种方式
前端小白的博客
02-27 8万+
JS同步加载，异步加载，延迟加载，图片懒加载
点评js异步加载的4种方式
10-23
首先，我们要了解什么是js异步加载，它是相对于同步加载的一种方式。在同步加载中，JavaScript文件的加载和执行会阻塞浏览器，直到文件加载完成并执行完毕，才继续加载页面的其他内容，这种加载方式会影响页面加载...
详解JS异步加载的三种方式
10-20
主要介绍了详解JS异步加载的三种方式,非常不错，具有参考借鉴价值，需要的朋友可以参考下
异步加载的方式有哪些？
weixin_30625691的博客
08-24 317
(1)defer，只支持 IE，延迟脚本的执行 (2)async:异步的意思 (3)创建 script，插入到 DOM 中，加载完毕后 callBack 转载于:https://www.cnblogs.com/luckyXcc/p/5804553.html
异步加载js的方式有哪些？
qq_44436509的博客
08-25 560
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
异步加载的方式
fortunegrant的博客
03-12 258
 (1) defer，只支持IE  (2) async：  (3) 创建script，插入到DOM中，加载完毕后callBack    (4) 按需异步载入js
js异步加载的三种解决方案
12-03
为了解决这个问题，JavaScript提供了三种主要的异步加载解决方案： 1. **`defer`属性**： `defer`属性是为了解决JavaScript阻塞HTML解析的问题而设计的。当`defer`属性被添加到`<script>`标签中，浏览器会等待HTML...
JS异步加载的三种实现方式
10-20
综上所述，JavaScript异步加载的三种实现方式各有优劣，适用于不同的场景和需求。在实际开发中，需要根据项目具体情况和浏览器兼容性要求来选择合适的异步加载策略。对于大多数现代浏览器，推荐使用`async`或`defer`...
JavaScript异步加载的两种方法
qq_39396275的博客
08-27 513
//javaScript 解决兼容性问题的异步加载 //第一种方法，不是最好的方法 function loadScript(){ var script = document.createElement('script'); script.type = "text/javaScript"; if(script.readyState){//IE ...
JavaScript异步加载的方式有哪些
前进的小申申
06-12 321
在传统的做法中，所有的script元素均应该放在页面的head元素中。 第一种位置中，把script放在了head中，这也是传统的做法。目的是把所有外部文件（css文件和js文件）的引用都放在相同的地方，可是，放在这里，意味着必须得全部的js代码都被下载解析和执行完成以后，才开始呈现页面的内容（浏览器遇到body标签才开始呈现内容）。如果js代码很多，无疑会导致页面呈现的内容出现延迟，用户体验性...
JS异步加载的方式
CSH_lucky的博客
08-10 255
一.异步加载 说起异步加载，我就先说说同步加载 同步加载(同步模式) :又称阻塞模式，会停止浏览器的后续处理，也就是后续的代码解析和页面渲染。而我们通常写代码都是在同步模式中，一旦前面有代码出错，后面的代码就会停止运行。 异步加载:又称非阻塞模式，在下载js文件的同时，对后续的代码也进行处理。也就是说，在异步加载模式下，一旦前面的代码出错，后面的代码也不会停止执行。 二.异步加载的方式 1.动态创建script标签 2.defer和async属性 ...
js的异步加载
前端知识总结
09-05 6341
    今天被问到了如何异步加载js，听到这句话我内心是拒绝的，啥玩意儿？js也要用异步加载不是引入了就行了，也没见速度变慢啊。后来仔细查询了一下，才发现自己原来还是太年轻了。     因为之前自己写的加载的都是本地js，或者是并没有复杂逻辑运算的js,导致看不出来太大问题，查完资料后，要将不会的记在这里，当作学习的资料室。 1，什么是异步加载js     使js文件脱离html解析的瀑布流...
js异步加载的三种方式
滕安超的博客
03-13 321
1.defer异步加载，要等到dom文档全部解析完才会执行。只有ie9以下可以用，特点是也可以将代码写到内部。 &lt;script type='text/javascript' src='tool.js' defer='defer'&gt;&lt;/script&gt; 2.async异步加载，加载完就执行，特点是只能加载外部脚本，不能将代码写到内部里面。 &lt;script type='t...
异步加载JS
Hhjian524的博客
10-26 1158
js的加载缺点：加载工具方法没必要阻塞文档，过多的js加载会影响页面效率，一旦网速不好，那么整个网站将等待js加载而不进行后续渲染等工作。 有些工具方法需要按需加载，用到再加载，不用不加载。 javascript 异步加载 的 三种方案 1.defer 异步加载，但要等到dom文档全部解析完才会被执行。只有IE能用。 2.async 异步加载，加载完就执行，async只能加载外部脚本，不能把js...
14. 异步加载Js的方式有哪些？
Melody5271的博客
03-01 981
我们都知道渲染引擎遇到 script 标签会停下来，等到执行完脚本，继续向下渲染，如下： <script type="text/javascript" src="../../libs/public.js" ></script> 这样会阻止浏览器的后续解析，只有当前加载完成才能进行下一步操作，所以默认同步执行才是安全的。但是这样如果JS...
异步加载js文件
weixin_30555753的博客
01-02 133
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>异步加载js文件</title> <style type="tex...
异步加载js的五种方式
Tony_Liu0611的博客
09-09 590
方案一：标签的async="async"属性（详细参见：script标签的async属性） 点评：HTML5中新增的属性，Chrome、FF、IE9&IE9+均支持（IE6~8不支持）。此外，这种方法不能保证脚本按顺序执行。 方案二：标签的defer="defer"属性 点评：兼容所有浏览器。此外，这种方法可以确保所有设置defer属性的脚本按顺序执行。 方案三：动态创建标
JavaScript中的异步加载技术有哪些？
最新发布
EdgarBertram的博客
04-25 1106
在这个例子中，我们创建了一个新的Promise对象，并在异步操作完成后调用resolve或reject方法来改变Promise的状态。这样，我们就可以像编写同步代码一样编写异步代码，而不需要使用回调函数或Promise的.then()/.catch()方法。它通常作为函数的参数传递，并在异步操作完成后被调用。async/await是ES8（ECMAScript 2017）引入的新特性，它允许我们以同步的方式编写异步代码，而不需要使用回调函数或Promise的.then()/.catch()方法。
掌握JavaScript异步加载的三种方案
以下是三种实现JavaScript异步加载的方法： 1. 使用`<script>`标签的`async`属性 `async`属性是HTML5中提供的一个属性，它可以使JavaScript文件异步加载。当`async`属性在`<script>`标签中被添加后，浏览器会在...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值