js异步加载的三种方式

学如逆水行舟,不进则退。      2022-02-11     470

关键词:

  js加载的缺点:加载工具方法没必要阻塞文档,过得js加载会影响页面效率,一旦网速不好,那么整个网站将等待js加载而不进行后续渲染等工作。 有些工具方法需要按需加载,用到再加载,不用不加载,。

  默认正常模式下下,JS是同步加载的,即优先记载JS,只有当JS文件下载完,dom和css才开始加载,当某些事后我们需要JS异步加载,我们可以通过以下方式来设置异步加载,不同情况下选取不同方式即可

1.defer:defer
  JS异步下载,dom结构解析完(标签 + 样式(内容不一定下载完))才异步执行
  仅IE能用
  内部JS也能用该属性
  异步加载js不允许使用document.write,因为document.write会清除文档流,js标签还未加载就会被清除
  document.write()可用于初始化页面
2.(h5)async:async(asynchronous) ajax(asynchronous javascript and XML)
  JS异步加载,加载完毕后立刻异步执行
  IE8及以下不兼容
  内部JS不能用该属性

3.除了以上两种方法,还有一种兼容自己封装的异步加载方式

  

function asyncLoaded(url,callBack){/*url为js的链接,callBack为url的js中的函数(该函数调用应该写到匿名函数中,如function(){console.log(div.getScrollOffset())})*/
    var script = document.createElement(‘script‘);
    script.type = ‘text/javascript‘;
    /*if else 这几句话必须要写到这位置处,不能放最后,因为if中js加载中script.readyState存在好几种状态,
    只有状态改变‘readystatechange’事件才会触发,但现在浏览器加载速度很快,当解析到该事件时JS有可能以加载完,
    所以事件根本不会触发,所以要写到前面*/
    if(script.readystate){//兼容IE
        script.onreadystatechange = function() {//状态改变事件才触发
            if(script.readyState == ‘loaded‘ || script.readyState == ‘complete‘){    
                callBack();
                script.onreadystatechange = null;        
            }
        }
    }else{
        script.onload = function(e){
            callBack();
        }
    }        
    script.src = url;
    document.body.appendChild(script);
}

 

图解script的三种加载方式异步加载顺序

...被阻塞,停止解析。<scriptdefer="defer">:脚本的获取是异步的,执行是同步的。脚本加载不阻塞页面的解析,脚本在获取完后并不立即执行,而是等到DOMready之后才开始执行。<scriptasync="async">:脚本的获取是异步的,执行是... 查看详情

js的异步加载及promise的三种状态

---恢复内容开始---js异步加载同步加载<scriptsrc="http://baidu.com/script.js"></script> ---> 我们平时经常使用的就是这种同步加载的形式 同步模式,又称阻塞模式,会阻止浏览器的后续处理,停止了后续的解析,因... 查看详情

ef的三种数据加载方式

EF中有3种数据加载方式,具体如下:延迟加载(默认): 设置导航属性为virtual贪婪加载:不设置导航属性为virtual,并且对导航属性使用Include显示加载:不设置导航属性为virtual,并且对导航属性使用Reference(单个对象).Load()... 查看详情

js的三种使用方式/css的三种使用方式/js中的dom事件模型/js中匿名函数的书写及调用/媒体查询@media的三种使用方式

一、JS的三种使用方式      1、html标签中内嵌JS(不提倡使用。)            <buttononclick="javascript:alert(‘你真点啊。‘)">有本事点我呀!!!!</button>  &nbs 查看详情

ef的三种数据加载方式(代码片段)

EF的关联实体加载有三种方式:LazyLoading,EagerLoading,ExplicitLoading,其中LazyLoading和ExplicitLoading都是延迟加载。(一)延迟加载(默认):LazyLoading使用的是动态代理,默认情况下,如果POCO类满足以下两个条件,EF就使用LazyLoading:POCO... 查看详情

js的三种异步处理(代码片段)

Promise对象含义: Promise是异步编程的一种解决方案,优点: 相比传统回调函数和事件更加合理和优雅,Promise是链式编程(后面会详细讲述),有效的解决了令人头痛的回调地狱问题,Promise的结果有成功和失败两种状态... 查看详情

js里常见的三种请求方式$.ajax$.post$.get分析

$.post和$.get是$.ajax的一种特殊情况:$.post和$.get请求都是异步请求,回调函数里写return来返回值是无意义的,回调函数里对外部变量进行赋值也是无意义的。即使是$.ajax里的同步请求,return的值并不能直接返回,这里涉及到跨域... 查看详情

js定义接口的三种方式

js定义接口有三种方式: 1、注解描述方式 优点:程序有可以有一个参考缺点:还是属于文档的范畴,这种方式太松散,没有检查接口的方法是否完全被实现/**interfaceComposite{*functionadd(obj);*functionremove(obj);*functionupdate(obj);*}... 查看详情

类加载的三种方式比较(代码片段)

虚拟机加载类的途径1、由new关键字创建一个类的实例在由运行时刻用new方法载入如:Dogdog=newDog();2、调用Class.forName()方法通过反射加载类型,并创建对象实例如:Classclazz=Class.forName(“Dog”);Objectdog=clazz.newInstan... 查看详情

js中原型继承的三种方式

              查看详情

mybatis延迟加载的三种加载方式深入,你get了吗?

延迟加载  延迟加载对主对象都是直接加载,只有对关联对象是延迟加载。  延迟加载可以减轻数据库的压力,  延迟加载不可是一条SQL查询多表信息,这样构不成延迟加载,会形成直接加载。  延迟加载分为三种类型... 查看详情

js中事件绑定的三种方式

以下是搜集的在JS中事件绑定的三种方式。 1.HTMLonclickattribute  <buttontype="button"id="upload"onclick="upload_file();"> 原文: http://www.w3school.com.cn/jsref/jsref_events.asp 2.jQuery 查看详情

spring加载properties配置文件的三种方式

一、通过context:property-placeholder标签实现配置文件加载1)用法:1、在spring.xml配置文件中添加标签<context:property-placeholderignore-unresolvable="true"location="classpath:redis-key.properties"/>2、在spring.xml中使用配置文件属性:$< 查看详情

js表单提交的三种方式

第一种:<scripttype="text/javascript">functioncheck(form){if(form.userId.value==‘‘){alert("请输入用户帐号!");form.userId.focus();returnfalse;}if(form.password.value==‘‘){alert("请输入登录密码!");form.password.foc 查看详情

类加载器盲区整理

类加载器盲区整理ServiceLoader原理深入理解Java类加载器(ClassLoader)类加载的三种方式比较ServiceLoader原理ServiceLoader原理深入理解Java类加载器(ClassLoader)深入理解Java类加载器(ClassLoader)类加载的三种方式比较类加载的三种方式比较 查看详情

使用javascript判断图片是否加载完成的三种实现方式

有时需要获取图片的尺寸,这需要在图片加载完成以后才可以。有三种方式实现,下面一一介绍。一、load事件 <!DOCTYPEHTML><html><head><metacharset="utf-8"><title>img-loadevent</title></head><body><img 查看详情

js创建对象的三种方式

...的行为,在对象中用方法来表示(常用动词-功能)2.创建对象的三种方式在Java中,现阶段我们可以采用三种方式创建对象(object)利用字面量创建对象利用newObject创 查看详情

ui自动化测试中,selenium的三种等待方式详解(代码片段)

...没有找到元素而报错。另外一种情况就是页面使用了ajax异步加载机制(现在都是resetful,客户端和服务端都是分离的),不知道页面是什么时候到达的。这时我们就要用到wait,而在Selenium中࿰ 查看详情