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 相关文章推荐
JS类中定义原型方法的两种实现的区别
Mar 08 Javascript
写入cookie的JavaScript代码库 cookieLibrary.js
Oct 24 Javascript
jquery 学习之二 属性(html()与html(val))
Nov 25 Javascript
终于解决了IE8不支持数组的indexOf方法
Apr 03 Javascript
jquery与js函数冲突的两种解决方法
Sep 09 Javascript
ExtJS4给Combobox设置列表中的默认值示例
May 02 Javascript
jQuery遍历DOM元素与节点方法详解
Apr 14 Javascript
JavaScript实现的微信二维码图片生成器的示例
Oct 26 Javascript
JavaScript实现简单的树形菜单效果
Jun 23 Javascript
AngularJS中的作用域实例分析
May 16 Javascript
js中this的指向问题归纳总结
Nov 28 Javascript
关于layui 实现点击按钮添加一行(方法渲染创建的table)
Sep 29 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开发文件系统实例讲解
2006/10/09 PHP
在php MYSQL中插入当前时间
2008/04/06 PHP
解析mysql 表中的碎片产生原因以及清理
2013/06/22 PHP
js实现右下角可关闭最小化div(可用于展示推荐内容)
2013/06/24 Javascript
jQuery获取当前对象标签名称的方法
2014/02/07 Javascript
jquery中子元素和后代元素的区别示例介绍
2014/04/02 Javascript
深入浅析NodeJs并发异步的回调处理
2015/12/21 NodeJs
jQuery formValidator表单验证
2016/01/07 Javascript
用jQuery向div中添加Html文本内容的简单实现
2016/07/13 Javascript
Node.js中使用jQuery的做法
2016/08/17 Javascript
js实现添加可信站点、修改activex安全设置,禁用弹出窗口阻止程序
2016/08/17 Javascript
概述jQuery的元素筛选
2016/11/23 Javascript
ajax 提交数据到后台jsp页面及页面跳转问题
2017/01/19 Javascript
微信小程序获取循环元素id以及wx.login登录操作
2017/08/17 Javascript
利用百度地图API获取当前位置信息的实例
2017/11/06 Javascript
深入浅析Vue中的Prop
2018/06/10 Javascript
vue 纯js监听滚动条到底部的实例讲解
2018/09/03 Javascript
Vue 技巧之控制父类的 slot
2020/02/24 Javascript
Python中关于使用模块的基础知识
2015/05/24 Python
Python实现在线音乐播放器
2017/03/03 Python
pyenv命令管理多个Python版本
2017/03/26 Python
python被修饰的函数消失问题解决(基于wraps函数)
2019/11/04 Python
python+selenium+Chrome options参数的使用
2020/03/18 Python
利用HTML5+CSS3实现3D转换效果实例详解
2017/05/02 HTML / CSS
浅析HTML5的WebSocket与服务器推送事件
2016/02/19 HTML / CSS
澳大利高级泳装品牌:Bondi Born
2018/05/23 全球购物
中学生教师节演讲稿
2014/09/03 职场文书
公安局班子个人对照检查材料思想汇报
2014/10/09 职场文书
2014年材料员工作总结
2014/11/19 职场文书
小学中队活动总结
2015/05/11 职场文书
推广普通话主题班会
2015/08/17 职场文书
用Python实现Newton插值法
2021/04/17 Python
Go语言切片前或中间插入项与内置copy()函数详解
2021/04/27 Golang
OpenCV-Python实现人脸磨皮算法
2021/06/07 Python
仅仅使用 HTML/CSS 实现各类进度条的方式汇总
2021/11/11 HTML / CSS
Redis特殊数据类型HyperLogLog基数统计算法讲解
2022/06/01 Redis