位置: 编程技术 - 正文

理解javascript定时器中的单线程(javascript定律)

编辑:rootadmin

推荐整理分享理解javascript定时器中的单线程(javascript定律),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:js定义类的三种方法,javascript中的函数如何理解,javascript的定义,javascript定律,javascript定律,javascript中的函数如何理解,javascript定律,javascript的定义,内容如对您有帮助,希望把文章链接给更多的朋友!

一、JavaScript 引擎是单线程的

可以从下面的代码中看到,第一个用setTimeout中的代码是死循环,由于是单线程,下面的两个定时器就没机会执行了。

浏览器的内核是多线程的,它们在内核制控下相互配合以保持同步,一个浏览器至少实现3个常驻线程:javascript引擎线程,GUI渲染线程,浏览器事件触发线程。

JavaScript引擎是基于事件驱动单线程执行的,JS引擎一直等待着任务队列中任务的到来然后加以处理,浏览器无论再什么时候都只有一个JS线程在运行JS程序。GUI渲染线程负责渲染浏览器界面,当界面需要重绘(Repaint)或由于某种操作引发回流(reflow)时,该线程就会执行。但需要注意 GUI渲染线程与JS引擎是互斥的,当JS引擎执行时GUI线程会被挂起,GUI更新会被保存在一个队列中等到JS引擎空闲时立即被执行。浏览器事件触发线程,当一个事件被触发时该线程会把事件添加到待处理队列的队尾,等待JS引擎的处理。这些事件可来自JavaScript引擎当前执行的代码块如setTimeOut、也可来自浏览器内核的其他线程如鼠标点击、AJAX异步请求等,但由于JS的单线程关系所有这些事件都得排队等待JS引擎处理。

  由上图可看出,浏览器中的JavaScript引擎是基于事件驱动的,这里的事件可看作是浏览器派给它的各种任务,JavaScript引擎一直等待着任务队列中任务的到来,由于单线程关系,这些任务得进行排队,一个接着一个被引擎处理。

t1、t2....tn表示不同的时间点,tn下面对应的小方块代表该时间点的任务。

理解javascript定时器中的单线程(javascript定律)

t1时刻:

1、GUI渲染线程2、浏览器事件触发线程:在t1时间段内,首先是用户点击了一个鼠标键,点击被浏览器事件触发线程捕捉后形成一个鼠标点击事件,由图可知,对于JavaScript引擎线程来说,这事件是由其它线程异步传到任务队列尾的,由于引擎正在处理t1时的任务,这个鼠标点击事件正在等待处理。3、定时触发线程:这里的浏览器模型定时计数器并不是由JavaScript引擎计数的,因为JavaScript引擎是单线程的,如果处于阻塞线程状态就计不了时,它必须依赖外部来计时并触发定时,所以队列中的定时事件是异步事件。4、在这t1的时间段内,继鼠标点击事件触发后,先前已设置的setTimeout定时也到达了,此刻对JavaScript引擎来说,定时触发线程产生了一个异步定时事件并放到任务队列中,该事件被排到点击事件回调之后,等待处理。同理,还是在t1时间段内,接下来某个setInterval定时器也被添加了,由于是间隔定时,在t1段内连续被触发了两次,这两个事件被排到队尾等待处理。5、ajax异步请求:浏览器新开一个http线程请求,当请求的状态变更时,如果先前已设置回调,这异步线程就产生状态变更事件放到JavaScript引擎的处理队列中等待处理。二、任务的执行顺序不同,显示结果也不同

1)未使用setTimeout函数

在网上找到的一段代码实例,这里用来演示一下。

我在firefox中执行了上面的代码。计划是点击“do something”按钮,然后显示“doing...please wait...”,接着执行sleep,最后显示“done”。

但是结果是点击后,浏览器卡住3秒左右,最后直接显示done。

分析下看出,在做status.innerHTML设置的时候,是需要执行GUI渲染线程的,但是现在还在执行JavaScript引擎线程,而JavaScript引擎线程与GUI渲染线程是互斥的,所以就最后显示了done。

2)使用了setTimeout函数

在“doing...please wait...”后面加了个setTimeout,延时执行,给了浏览器渲染的时间,这个时候会显示出“doing...please wait...”的字样,然后执行sleep函数,最后显示“done”。

后面有网友发现在firefox中不起作用,的确有这个问题,后面我修改了一下代码,将局部变量的声明,onclick的绑定放到了window.onload事件中,等页面结构加载完成后,我再做脚本操作。

标签: javascript定律

本文链接地址:https://www.jiuchutong.com/biancheng/380421.html 转载请保留说明!

上一篇:javascript每日必学之多态(js每天的定时任务)

下一篇:JavaScript添加随滚动条滚动窗体的方法(javascript添加元素)

  • 如何修改纳税申报密码
  • 预提费用税务处理
  • 偷逃税款是什么
  • 无形资产摊销的会计科目
  • 金融业产值和金融业增加值有什么不同
  • 微信小程序需要授权怎么设置
  • 定额征收需要建账吗
  • 增值税专用发票可以开电子发票吗
  • 报账员是会计还是出纳
  • 可抵扣的固定资产
  • 结转销项税额至未交增值税的结转系数
  • 企业买电动车做资产如何做折旧?
  • 企业融资租赁设立条件
  • 销售安装门窗增值税
  • 中级会计考试报名
  • 母公司子公司之间担保
  • 不具有法人资格的企业形式
  • key介质费入哪个科目?
  • 税控设备抵减如何填写报表
  • 售后回租产生的利息怎么做账
  • 学校收取食堂管理费
  • 公司经营权补偿款会计处理?
  • macOS 11.0.1(20B29)更新了什么?macOS Big Sur 11.0.1(20B29)更新详解
  • 单位购买图书会计分录
  • 车船使用税进哪个会计科目
  • 股东借钱给公司怎么写借条
  • php怎么上传多个图片
  • 最新cpu天梯表
  • 入库前仓储费用应计入
  • shwiconem.exe - shwiconem是什么进程 有什么用
  • 技术转让所得的税收优惠
  • html visit
  • php 时间格式转换
  • 变动成本法计算营业利润
  • 对于异步电动机国家标准规定3kw
  • framework教程
  • ChatGLM-6B:颠覆聊天AI的全新模型
  • 班迪录屏软件录制框怎样在ppt上一直指定
  • 长期股权投资的账务处理
  • 建筑企业预缴所得税款税率
  • 一般公司是什么企业类型
  • 员工持股平台合伙企业如何设立
  • sql查询表中指定数据
  • 土地出让金抵减增值税申报怎么填
  • 未分配利润实际没有钱分配是什么原因
  • 房产税和城镇土地使用税
  • 支付定金的账务怎么处理
  • 定额备用金怎么做分录
  • 收取物业费如何纳税
  • 建筑工程人工费调整
  • 个体户为员工缴纳社保
  • 外来原始凭证丢了怎么办
  • 会计建账的基本程序的六个步骤
  • sql中的coalesce
  • mysql的日志
  • centos bond mode
  • 老毛桃u盘启动盘制作工具怎么安装win10系统 老毛桃u盘安装win10系统图文教程
  • win7防病毒设置在哪
  • win7虚拟xp系统怎么安装
  • linux的ftp命令
  • centos7命令行快捷键
  • windows10粘滞键
  • 如何快速破局
  • win7系统怎么操作
  • WIN10更新失败
  • cocos lua教程
  • web在线编辑excel
  • unity做3d游戏
  • Node.js中的construct构造函数
  • 批处理安装
  • cacls命令怎么运用
  • 下列关于eval()函数的说法正确的是
  • 安卓监听事件
  • 税务人员服务态度恶劣怎么办
  • 西藏拉萨工业园主要生产什么
  • 对税务巡视工作的意见
  • csc联合培养博士资助标准
  • 陕西税务局如何缴纳社保
  • 税务总局在贯彻落实意见任务分工中
  • 税务部门放管服
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设