JavaScript异步加载与加载时间线

上一篇 JavaScript浅层克隆和深层克隆
下一篇 JavaScript事件处理模型 — 事件冒泡，捕获

文章目录

JavaScript异步加载与加载时间线
前言
一、js异步加载
二、加载时间线

前言

js 是单线程的，会阻断 HTML，css 加载（因为 js 会修改 html 和 css 一起加载会乱），所以是同步加载 js。先下载 js，再下载 HTML 和 css。常规来说 js 是同步加载的，所以我们讲讲 js 异步加载的情况

一、js异步加载

js 加载的缺点：加载工具方法没必要阻塞文档，过得 js 加载会影响页面效率，
一旦网速不好，那么整个网站将等待 js 加载而不进行后续渲染等工作。
有些工具方法需要按需加载，用到再加载，不用不加载。
javascript 异步加载的方案
1.async 异步加载，加载完就执行，async 只能加载外部脚本，不能把 js 写在 script 标签里。ie9 以上可以用，w3c 标准
2.创建 script，插入到 DOM 中，加载完毕后 callBack（按需加载，方便）→常用
callback叫回调函数，是事件里面一个绑定的事件处理函数，当满足一定执行条件才执行的函数。

二、加载时间线

js 加载时间线：依据 js 出生的那一刻起，记录了一系列浏览器按照顺序做的事（就
是一个执行顺序）js 时间线步骤（创建 document 对象==>文档解析完==>文档解析完加载完执行完）

1、创建 Document 对象，开始解析 web 页面。解析 HTML 元素和他们的文本内容
后添加 Element 对象和 Text 节点到文档中。这个阶段 document.readyState =
‘loading’。

2、遇到 link 外部 css，创建线程，进行异步加载，并继续解析文档。

3、遇到 script 外部 js，并且没有设置 async、defer，浏览器同步加载，并阻塞，等
待 js 加载完成并执行该脚本，然后继续解析文档。

4、遇到 script 外部 js，并且设置有 async、defer，浏览器创建线程异步加载，并继
续解析文档。对于 async 属性的脚本，脚本加载完成后立即执行。（异步禁止使用 document.write()，因为当你整个文档解析到差不多，再调用 document.write()，会把之前所有的文档流都清空，用它里面的文档代替）

5、遇到 img 等（带有 src），先正常解析 dom 结构，然后浏览器异步加载 src，并继
续解析文档。看到标签直接生产 dom 树，不用等着 img 加载完 scr。

6、当文档解析完成（domTree 建立完毕，不是加载完毕），document.readyState =
‘interactive’。

7、文档解析完成后，所有设置有 defer 的脚本会按照顺序执行。（注意与 async 的不
同,但同样禁止使用 document.write()）;

8、document 对象触发 DOMContentLoaded 事件，这也标志着程序执行从同步脚本
执行阶段，转化为事件驱动阶段。

9、当所有 async 的脚本加载完成并执行后、img 等加载完成后（页面所有的都执行
加载完之后），document.readyState = ‘complete’，window 对象触发 load 事件。

10、从此，以异步响应方式处理用户输入、网络事件等。

7.JavaScript异步加载与加载时间线相关推荐

网页javascript加载不出_写给初学者的JavaScript异步编程和背后思想
导读:对于接触JavaScript这门编程语言没有多久的本菜鸡而言,在相当长的一段时间内,我都完全无法理解这门语言中的异步编程,不明白什么叫异步编程以及为什么需要异步编程.为什么顺序执行程序就不行了呢 ...
javascript异步加载
这里先解释html在浏览器的一般加载流程. 用户输入搜索内容,浏览器发送搜索内容到服务器,服务器返回html文件.这个过程十分复杂,包含多个层次的数据传输.这里只讨论js代码加载,不再展开. 浏览器加 ...
css 同步加载,同步加载，异步加载，懒加载，预加载
同步加载默认的就是同步加载同步加载: 同步模式又称阻塞模式,会阻止浏览器的后续处理,停止了后续的文件的解析,执行,如图像的渲染.流览器之所以会采用同步模式,是因为加载的js文件中有对dom的操作, ...
【JavaScript】图片的懒加载
[JavaScript]图片的懒加载文章目录 [JavaScript]图片的懒加载 1. 懒加载 2. 利用`scroll`事件利用`HTMLElement.offsetTop` 利用`Eleme ...
关于html和javascript在浏览器中的加载顺序问题的讨论
转自:http://www.cnblogs.com/beyondstorm/archive/2008/09/17/1292940.html 前一阵子横扫了javascript,当时自我感觉良好.现在一 ...
关于html和javascript在浏览器中的加载顺序问题的讨论（zz）
前一阵子横扫了javascript,当时自我感觉良好.现在一想,又觉得没什么.今天的任务是把asp.net ajax中客户端页面生命周期那一章研究完.然而,因为这一章的内容使我产生了一些迷惑.这些疑惑 ...
第一百四十一节，JavaScript，封装库--DOM加载
JavaScript,封装库--DOM加载 DOM加载,跨浏览器封装DOM加载,当网页文档结构加载完毕后执行函数,不等待图片音频视频等文件加载完毕 /** dom_jia_zai()函数,DOM页面加 ...
echars vue 添加数据没更新_vue在使用ECharts时的异步更新和数据加载详解
前言最近在学习eCharts,学习到了异步更新和数据加载这一块,觉着有必要总结一下,方法以后的时候参考学习,在开始本文之前,对eCharts不熟悉的朋友们可以参考下这篇文章:下面话不多说了,来一起看 ...
JavaScript基础——滚动事件、加载事件、三大家族
文章目录一.滚动事件和加载事件 1.1 滚动事件 1.2 加载事件二.三大家族 2.1 scroll家族 2.2 offset家族 2.3 client家族一.滚动事件和加载事件 1.1 滚动事 ...

7.JavaScript异步加载与加载时间线

JavaScript异步加载与加载时间线

文章目录

前言

一、js异步加载

二、加载时间线

7.JavaScript异步加载与加载时间线相关推荐

最新文章

热门文章