JS异步加载的三种实现方式


Posted in Javascript onMarch 16, 2017

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

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

1.defer:defer

  1. JS异步下载,dom结构解析完(标签 + 样式(内容不一定下载完))才异步执行 
  2. 仅IE能用
  3. 内部JS也能用该属性
  4. 异步加载js不允许使用document.write,因为document.write会清除文档流,js标签还未加载就会被清除
  5. document.write()可用于初始化页面

2.(h5)async:async(asynchronous) ajax(asynchronous javascript and XML)

  1. JS异步加载,加载完毕后立刻异步执行
  2. IE8及以下不兼容
  3. 内部JS不能用该属性

3.除了以上两种方法,还有一种兼容自己封装的异步加载方式,即动态添加script标签也能实现异步加载。

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);
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript对象模型-执行模型
Apr 28 Javascript
js在数组中删除重复的元素自保留一个(两种实现思路)
Aug 22 Javascript
node.js中的events.emitter.removeListener方法使用说明
Dec 10 Javascript
jQuery中eq()方法用法实例
Jan 05 Javascript
js给selected添加options的方法
May 06 Javascript
javaScript中Math()函数注意事项
Jun 18 Javascript
Javascript实现图片加载从模糊到清晰显示的方法
Jun 21 Javascript
ionic选择多张图片上传的示例代码
Oct 10 Javascript
vue实现文件上传功能
Aug 13 Javascript
JS实现的input选择图片本地预览功能示例
Aug 29 Javascript
js设计模式之单例模式原理与用法详解
Aug 15 Javascript
JS实现贪吃蛇游戏
Nov 15 Javascript
Bootstrap免费字体和图标网站(值得收藏)
Mar 16 #Javascript
基于JavaScript实现滑动门效果
Mar 16 #Javascript
基于Vue2.0的分页组件
Mar 16 #Javascript
原生js实现验证码功能
Mar 16 #Javascript
基于vue实现多引擎搜索及关键字提示
Mar 16 #Javascript
vue图片加载与显示默认图片实例代码
Mar 16 #Javascript
js中作用域的实例解析
Mar 16 #Javascript
You might like
PHP基于pdo的数据库操作类【可支持mysql、sqlserver及oracle】
2018/05/21 PHP
Laravel手动返回错误码示例
2019/10/22 PHP
常用js脚本
2006/12/03 Javascript
5个最佳的Javascript日期处理类库分享
2012/04/15 Javascript
js特效,页面下雪的小例子
2013/06/17 Javascript
JavaScript运行时库属性一览表
2014/03/14 Javascript
angular中使用路由和$location切换视图
2015/01/23 Javascript
JavaScript常用脚本汇总(一)
2015/03/04 Javascript
JavaScript跨域调用基于JSON的RESTful API
2016/07/09 Javascript
浅谈js的ajax的异步和同步请求的问题
2016/10/07 Javascript
js Canvas实现的日历时钟案例分享
2016/12/25 Javascript
如何获取元素的最终background-color
2017/02/06 Javascript
详解webpack+es6+angular1.x项目构建
2017/05/02 Javascript
如何在AngularJs中调用第三方插件库
2017/05/21 Javascript
基于vue实现swipe轮播组件实例代码
2017/05/24 Javascript
ng-repeat指令在迭代对象时的去重方法
2018/10/02 Javascript
详解关于JSON.parse()和JSON.stringify()的性能小测试
2019/03/14 Javascript
JS中的防抖与节流及作用详解
2019/04/01 Javascript
JS实现移动端双指缩放和旋转方法
2019/12/13 Javascript
原生js实现无缝轮播图效果
2021/01/28 Javascript
Python打包文件夹的方法小结(zip,tar,tar.gz等)
2016/09/18 Python
Python 爬虫学习笔记之正则表达式
2016/09/21 Python
Python 比较两个数组的元素的异同方法
2017/08/17 Python
Python字符串和字典相关操作的实例详解
2017/09/23 Python
详解将Django部署到Centos7全攻略
2018/09/26 Python
详解Python装饰器
2019/03/25 Python
Python3实现从排序数组中删除重复项算法分析
2019/04/03 Python
浅谈pytorch torch.backends.cudnn设置作用
2020/02/20 Python
Chi Chi London官网:购买连衣裙和礼服
2020/10/25 全球购物
最新的大学生找工作自我评价
2013/09/29 职场文书
安全负责人任命书
2014/06/06 职场文书
一年级小学生评语大全
2014/12/25 职场文书
大学学生会辞职信
2015/05/13 职场文书
招商银行工作证明
2015/06/17 职场文书
教师教育教学随笔
2015/08/15 职场文书
Python创建SQL数据库流程逐步讲解
2022/09/23 Python