js加载时间线

在js加载开始的时候,浏览器会去记录js执行的这段过程

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()）5. 遇到img等，先正常解析dom结构，然后浏览器异步加载src，并继续解析文档。6. 当文档解析完成，document.readyState = 'interactive'。7. 文档解析完成后，所有设置有defer的脚本会按照顺序执行。（注意与async的不同,但同样禁止使用document.write()）;8. document对象触发DOMContentLoaded事件，这也标志着程序执行从同步脚本执行阶段，转化为事件驱动阶段。9. 当所有async的脚本加载完成并执行后、img等加载完成后，document.readyState = 'complete'，window对象触发load事件。10. 从此，页面以异步响应方式处理用户输入，网络事件等。

通过代码来看（特别好理解）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script>// 上面的是指文档加载完成后,也就是时间线的第九步,才会去执行里面的方法window.onload = function (){var div = document.getElementsByTagName('div')[0];console.log('这个肯定是在complete后面');}// 这样子也是就说 当文档解析完成后,就会去执行里面的函数document.addEventListener('DOMContentLoaded',function (){var div = document.getElementsByTagName('div')[0];console.log("这个肯定发生在complete前面"+div);},false);</script>
</head>
<body><div style="width:100px;height:100px;background-color:red;"></div><script>console.log(document.readyState);document.onreadystatechange = function (){console.log(document.readyState);}</script>
</body>
</html>

自然而然会有三个状态,也验证了时间线是正确的

JavaScript之时间线（代码解释）相关推荐

Timeline 时间线数据处理
在根据年份将数据分组然后在时间线上展示,前端将如何处理数据呢. 原始数据格式 [{createDate:'2018-03-24 14:01:11',title:'xxxx'},{createDate: ...
水平时间轴css代码_使用CSS和JavaScript构建水平时间线
水平时间轴css代码在上一篇文章中 ,我向您展示了如何从头开始构建响应式垂直时间轴. 今天,我将介绍创建相关的水平时间线的过程. 与往常一样,要初步了解我们将要构建的内容,请查看相关的CodePen ...
分享一个基于事件时间线的Javascript类库-Chronoline
在线演示本地下载 Chronoline.js是一个javascript的类库用来帮助开发者创建一个按时间来展示的时间线. 整个时间线水平方向显示,我们可以方便的显示任何时间长度的事件,并且提供一个 ...
7.JavaScript异步加载与加载时间线
JavaScript异步加载与加载时间线上一篇 JavaScript浅层克隆和深层克隆下一篇 JavaScript事件处理模型 - 事件冒泡,捕获文章目录 JavaScript异步加载与加载时间 ...
犀牛书读书笔记-客户端javascript时间线
web页面中js程序执行的时间线在请求的html页面返回到客户端后,web页面和其引入的脚本会按照下面的时间线进行解析和执行.本文重点解释js程序的执行,不对页面的渲染过程进行分析. 该时间包含如下 ...
Java发展历程时间线
前言世界上并没有完美的程序,因为写程序本来就是一个不断追求完美的过程.同样没有一门语言在一诞生就是完美的,不变的唯有变化.Java诞生至今已经不仅仅是一门语言,背后所涵盖的是一个庞大的技术体系. 网 ...
pyecharts-Timeline讲解时间线
Pyecharts----Timeline (*^▽^*) 作者:发现美的眼睛(本人) 首先简单介绍一下pyecharts这个神奇的东东,如果你是从事web,那么Echarts就会熟悉知晓. --如 ...
Netflix媒体数据库：媒体时间线数据模型
如何设计高效的视频数据库,Netflix的NMDB给出了答案.本文是系列文章的第二篇,感谢Hulu的小伙伴们的技术审校. 文 / Subbu Venkatrav, Arsen Kostenko, Sh ...
[原创]使用 Google Chart 在线服务实现软件版本发布时间线图
引言 ExtAspNet 是一组基于 ExtJS 的专业 ASP.NET 2.0 控件库,从第一次发布至今已经有超过 3 年的时间,版本也大大小小发了 80 多个. 今天想弄一个查看发布周期总体趋势的 ...
应用时间线服务器启动报错_从服务器到无服务器的时间轴和教程
应用时间线服务器启动报错 Amazon Web Services is a behemoth powering companies from Fortune 500 corporations to h ...

JavaScript之时间线（代码解释）

js加载时间线

通过代码来看（特别好理解）

JavaScript之时间线（代码解释）相关推荐

最新文章

热门文章