面试高频之js的异步加载

讲这个问题之前, 我们从另一个面试高频问题来切入,

我们的web页面从开始解析到页面渲染完成都经历了什么 ? 

1  ,  创建document对象, 开始解析页面,    此时document.readyState = 'loading'

2 ,     遇到link标签引入的css文件, 创建线程并异步加载css,继续解析文档

3,    遇到script标签引入的外部脚本 ,  如果script标签的属性设置了defer或者async  则  创建线程异步加载js , 否则同步加载js(阻塞了dom的解析)  , 继续解析文档 (async脚本加载完就执行)

4 ,   遇到img等要加载资源的标签, 正常解析dom 标签  ,  异步加载src ,    继续解析文档

5 ,    文档解析完毕 ,  document.readyState = 'interactive' , 所有defer脚本按顺序执行,并且document会触发 DOMContentLoaded事件 , 标志着程序从同步脚本执行阶段转化成事件驱动阶段

6 , 当所有async 脚本 加载并执行 完毕 , img 加载完毕  ,  document.readyState = 'complete' ,  window 触发  load  事件  。

7      从此   以异步响应的方式处理用户输入, 网络事件等 。。。。。。

ok , 光说没用, 我们来看看真相是否只有一个。。。

document.onreadystatechange = () => {
console.log(document.readyState)
};
document.addEventListener('DOMContentLoaded', () => {
console.log('DOMContentLoaded')
});
window.onload = () => {
console.log('load')
};

注意一点, DOMContentLoaded 事件 只能用  addEventListener 来绑定

结果是这样:

按顺序打印出来了 。。。

上文我们提到只有设置了defer /async 的 script 脚本 才能异步加载  ,

注意defer 有些低版本浏览器不兼容,

async是W3C的标准,但只能在引入外部js文件时使用,

当然,我们最常用的是把script标签放在body 后面 ,这样就不会阻塞dom解析

还有一种情况, 动态添加的script脚本也是异步加载的, 基于此 我们来封装一个 异步加载script脚本的函数

function loadScript (url, callback) {  // 传入url , 和要执行的回调函数
const script = document.createElement('script');
script.type = 'text/javascript'; // 创建一个script标签
if (script.readyState) { // 做兼容
script.onreadystatechange = () => { // readyState变化触发
if (script.readyState === 'complete' || script.readyState === 'loaded') { // 兼容
callback(); // 加载完执行回调
}
}
} else {
script.onload = () => {
callback(); // 加载完执行回调
}
}
script.src = url;
document.head.appendChild(script); // 插入head中
}

以上就是 js 异步加载 的 全部内容了, 欢迎小伙伴们补充

    

js的异步加载你真的懂吗的更多相关文章

  1. Vue中结合Flask与Node.JS的异步加载功能实现文章的分页效果

    你好!欢迎阅读我的博文,你可以跳转到我的个人博客网站,会有更好的排版效果和功能. 此外,本篇博文为本人Pushy原创,如需转载请注明出处:http://blog.pushy.site/posts/15 ...

  2. js滚动异步加载数据的思路

    <body> <div style="width:200px; height:1000px; border:1px solid red;" id="to ...

  3. JS异步加载的三种方案

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

  4. 异步加载的JS如何在chrome浏览器断点调试?

    我们常常利用chrome强大的控制台Sources下面进行代码断点调试,但是通过$.getScript等异步加载JS的方式在Sources里面就是找不到,那如何进行debug断点调试呢? 方案一: 在 ...

  5. 不得不说的JavaScript异步加载

    同步加载的问题 默认的js是同步加载的,这里的“加载”可以理解成是解析.执行,而不是“下载”,在最新版本的浏览器中,浏览器对于代码请求的资源都是瀑布式的加载,而不是阻塞式的,但是js的执行总是阻塞的. ...

  6. javascript 同步加载与异步加载

    HTML 4.01 的script属性 charset: 可选.指定src引入代码的字符集,大多数浏览器忽略该值. defer: boolean, 可选.延迟脚本执行,相当于将script标签放入页面 ...

  7. Highcharts 异步加载数据曲线图表

    导入 data.js 文件 异步加载数据需要引入以下js 文件: <script src="http://code.highcharts.com/modules/data.js&quo ...

  8. Javascript 文件的同步加载与异步加载

    HTML 4.01 的script属性 charset: 可选.指定src引入代码的字符集,大多数浏览器忽略该值.defer: boolean, 可选.延迟脚本执行,相当于将script标签放入页面b ...

  9. Highcharts 基本曲线图;Highcharts 带有数据标签曲线图表;Highcharts 异步加载数据曲线图表

    Highcharts 基本曲线图 实例 文件名:highcharts_line_basic.htm <html> <head> <meta charset="U ...

随机推荐

  1. 爬取廖雪峰的python3教程

    从廖雪峰老师的python教程入门的,最近在看python爬虫,入手了一下 代码比较low,没有用到多线程和ip代理池 然后呢,由于robots.txt的限定,构建了一些user-agent,并放慢的 ...

  2. java之Spring(IOC)装配Bean(手动装配、自动装配、注解装配)

    在上一篇控制反转中我们看到了依靠一个Bean文件来实现对代码的控制,可谓十分便捷,再也不用去实例化对象了,2333~~~ 1.手动装配 <bean id="todo" cla ...

  3. java实现堆结构

    一.前言 之前用java实现堆结构,一直用的优先队列,但是在实际的面试中,可能会要求用数组实现,所以还是用java老老实实的实现一遍堆结构吧. 二.概念 堆,有两种形式,一种是大根堆,另一种是小根堆. ...

  4. JavaScript路线

    看到知乎上有大神回答的,感觉很不错,分享下 首先要说明的是,咱现在不是高手,最多还是一个半桶水,算是入了JS的门. 谈不上经验,都是一些教训. 这个时候有人要说,“靠,你丫半桶水,凭啥教我们”.您先别 ...

  5. memcached安装、使用

    Memcached客户端01:XMemcached 版本选择:2.0.0 XMemcached:https://github.com/killme2008/xmemcached     XMemcac ...

  6. Python3 urllib.request库的基本使用

    Python3 urllib.request库的基本使用 所谓网页抓取,就是把URL地址中指定的网络资源从网络流中读取出来,保存到本地. 在Python中有很多库可以用来抓取网页,我们先学习urlli ...

  7. .NET之EntityFramework框架运用

    1.创建EF模型库 创建类库-->添加新建项-->选择ADO.NET实体数据模型-->选择 来自数据库的EF选择器-->配置数据库链接以及相应的数据库-->看底部(将ap ...

  8. Pat1071: Speech Patterns

    1071. Speech Patterns (25) 时间限制 300 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 HOU, Qiming Peo ...

  9. synchronized与Lock的区别

    两者的区别分类对比: 类别 synchronized Lock 存在层次 Java的关键字,在jvm层面上 是一个类 锁的释放 1.以获取锁的线程执行完同步代码,释放锁 2.线程执行发生异常,jvm会 ...

  10. js术语扫盲贴:XHR、RegExp、call-apply、prototype

    (1) XHR:xml httprequestXHR注入:XHR 注入技术是通过XMLHttpRest来获取javascript的.但与eval不同的是,该机制是通过创建一个script的DOM元素, ...