资讯专栏INFORMATION COLUMN

JavaScript时间线

atinosun / 3378人阅读

摘要:创建对象,添加到中。注意与的不同对象触发事件,这也标志着程序执行从同步脚本执行阶段,转化为事件驱动阶段。当所有的脚本加载完成并执行后等加载完成后,,对象触发事件。从此,以异步响应方式处理用户输入网络事件等。

js时间线

js执行是单线程,并不是说整个浏览器都是单线程的,姑且就成为单线程吧

js单线程的原因是为了避免多线程操作dom,引发的并发问题,dom属于基础数据,从多线程上讲,对它的操作要加事物,而js的操作最初就是为了操作dom,嗯,幸好是单线程的,总之一句话,凡是能够修改dom的一定得同步

客户端js时间线

1、创建document对象,开始解析web页面。创建HTMLHtmlElement对象,添加到document中。这个阶段document.readyState = "loading"。
2、遇到link外部css,创建线程加载,并继续解析文档。并发
3、遇到script外部js,并且没有设置async、defer,浏览器创建线程加载,并阻塞,等待js加载完成并执行该脚本,然后继续解析文档。js拥有修改dom的能力-->domcument.write
4、遇到script外部js,并且设置有async、defter,浏览器创建线程加载,并继续解析文档。

async属性的脚本,脚本加载完成后立即执行。 defter==丢置尾部。
document.createElement("script")的方式动态插入script元素来模拟async属性,实现脚本异步加载和执行。

5、遇到img等,浏览器创建线程加载,并继续解析文档。并发
6、当文档解析完成,document.readyState = "interactive"。
7、文档解析完成后,所有设置有defer的脚本会按照顺序执行。(注意与async的不同)
8、document对象触发DOMContentLoaded事件,这也标志着程序执行从同步脚本执行阶段,转化为事件驱动阶段。
9、当所有async的脚本加载完成并执行后、img等加载完成后,document.readyState = "complete",window对象触发load事件。
10、从此,以异步响应方式处理用户输入、网络事件等。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/83116.html

相关文章

  • javascript-离线应用于客户端存储

    摘要:离线检测含义设备能否上网代码注和,和最新的没问题应用缓存缓存的目的是专门为网页离线设计的,当然在在线情况也会缓存机制当用户在地址输入请求的地址去请求网页时,浏览器会先本地缓存中查看是否有对应的缓存文件,如果有然后查看新鲜度就是是否过期了,如 23.1 离线检测 含义:设备能否上网 代码: navigator.onLine 注:IE6+和safari+5,firefox3+和ope...

    gecko23 评论0 收藏0
  • 高级定时器---《高程3》

    摘要:也就是说,代码队列中仅能有一个间歇定时器在等待。这导致两个问题,一是某些间隔会跳过,二是多个定时器的代码之间的间隔可能比预期的小。 定时器:间歇调用和超时调用 超时调用:setTimeout(),接受两个参数,第一个参数是可执行的JavaScript代码字符串,或是回调函数,第二个参数是毫秒为单位的插入代码队列的的时间。清除方式:clearTimeout(),参数是设置setTimeo...

    miya 评论0 收藏0
  • 高级定时器---《高程3》

    摘要:也就是说,代码队列中仅能有一个间歇定时器在等待。这导致两个问题,一是某些间隔会跳过,二是多个定时器的代码之间的间隔可能比预期的小。 定时器:间歇调用和超时调用 超时调用:setTimeout(),接受两个参数,第一个参数是可执行的JavaScript代码字符串,或是回调函数,第二个参数是毫秒为单位的插入代码队列的的时间。清除方式:clearTimeout(),参数是设置setTimeo...

    hikui 评论0 收藏0
  • JS学习笔记(第23章)(离线应用与客户端存储1)

    摘要:应用缓存的应用缓存,或者简称为,是专门为开发离线应用而设计的。应用缓存还有很多相关的事件,表示其状态的改变。数据存储,通常直接叫做,最初是在客户端用于存储会话信息的。也就是使用值来存储多个名称值对儿。 所谓Web离线应用,就是在设备不能上网的情况下仍然可以运行的应用。开发离线Web应用需要几个步骤:(1)确保应用知道设备是否能上网;(2)应用还必须能访问一定的资源(图像、JavaScr...

    fjcgreat 评论0 收藏0
  • HTML5的离线存储

    摘要:的离线存储使用以及工作原理解答使用方式在页面头部中加入一个的属性就可以的书写方式,如下表示需要离线存储的资源列表表示在中列出的资源只有在在线情况下才能访问,不会被离线存储,若和中都有这个资源则会离线存储,因为的优先级更高表示如果第一个资源访 HTML5的离线存储使用以及工作原理解答? 使用方式:在页面头部中加入一个manifest的属性就可以 ... cache.manifest...

    Joyven 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<