dom更新到底在javascript事件循环的哪个阶段?「前端每日一题v22.11.17」
dom更新到底在javascript事件循环的哪个阶段?「前端每日一题v22.11.17」
昨天写了一篇文章,是javascript的事件循环机制,然后在某乎上也发了,在发的时候看到了一个问题,dom渲染在事件循环的哪个阶段?
看到这个问题的时候,我冷然一笑,这不是明显着么?肯定是在事件循环中的异步任务队列,任务队列又分为宏任务和微任务,dom更新在微任务队列清空之后,宏任务队列开始之前。
结论大家都知道,但是任何事情都要有实践,实践是检验真理的唯一标准
验证
如何验证呢?我写了以下的代码,在异步微任务和宏任务之间加一个dom的更新操作
setTimeout(() => {alert('暂停点alert');console.log('setTimeout done')}, 0)
document.getElementsByTagName('div')[0].innerHTML = 'FE情报局'
new Promise((resolve) => {resolve()}).then(() => {console.log('promise done')})
其中我在宏任务开始时加了一个alert,用来阻塞js,观测页面上是否已经有了FE情报局,当我满怀信心的按下的时候,页面上空空如也,我傻眼了
按下确认之后,页面上显示出来了
这就奇怪了,结论跟我预想的不一致!!!
查找原因
在我认为我发现了一个巨大的bug之后,然后疯狂搜集资料,发现所有结论都是dom更新确实是在微任务之后,那为什么表现不一致呢?
是不是浏览器没来得及更新?
于是在弹出alert的时候,我查看了一下dom元素
发现虽然页面上没有,但是dom元素已经正常的在DOM上了,这就涉及到另一个问题了,浏览器GUI线程的更新机制
UI线程和js线程
我们都知道,浏览器对于js的处理主要在js线程,页面渲染主要是在gui线程,由于js可以操作dom元素,所以js是会影响页面渲染的,也就是会影响gui线程的渲染结果。这样这两个线程就不能同时工作,一旦同时工作,相互影响就会造成不可预估的影响。所以在浏览器中,js线程和gui线程是互斥的,只能允许一个线程进程任务的执行,js线程运行时,gui线程是不会运行的
有了这个基础,我们在讨论一下动画,这里涉及到一个概念,那就是刷新率
刷新率
我们平时也会经常听到刷新率这个词,比如我们电脑屏幕的刷新率达到了120赫兹,或者玩游戏的时候经常有一个词叫FPS,刷新率就是指显示器每秒绘制新图像的次数,60赫兹表示浏览器每秒绘制60次,由于人眼的暂留效果,我们就可以看到流畅的动画了
如果1秒你的刷新率只有10,你就会发现自己看的动画跟ppt一样,十分卡顿
当前主流的浏览器刷新频率为60赫兹,也就是说刷新一次所需要的时间是1000/60=16.6毫秒,根据UI线程和js线程互斥的关系,我们可以理解为浏览器要在这16.6毫秒以内完成js脚本和浏览器渲染
回到正题
到这里就很好理解了,我们在刚开始执行那段js代码的时候,虽然在元素下看dom已经更新到dom树上了,但是浏览器并没有刷新,所以本质上还是没有展示出来,但是我一直觉得是因为alert的原因导致的,所以我采用了另一种方式
setTimeout(() => {for (let index = 0; index < 1000000; index++) {if(index===1000000-1){console.log('end')}}console.log('setTimeout done')
},0)
document.getElementsByTagName('div')[0].innerHTML = 'FE情报局'
new Promise((resolve) => {resolve()}).then(() => {console.log('promise done')for (let index = 0; index < 1000000; index++) {if(index===1000000-1){console.log('done')}}
})
这个时候就会发现dom在进入到setTimeout之前,在done之后就已经渲染到浏览器上了,刚开始直接显示出来一部分的原因是因为alert导致的,换成正常的阻塞流程的js就可以了
欢迎大家留言讨论,是不是因为alert的机制导致的在微任务结束之后,宏任务中的alert阻碍了dom的渲染,导致UI线程并未能够及时刷新
dom更新到底在javascript事件循环的哪个阶段?「前端每日一题v22.11.17」相关推荐
- onpaste事件不生效_从实际开发中来看JavaScript事件循环的使用场景
前言: 本文是介绍结合DOM事件流和JavaScript事件循环解决一个工作中的实际问题的过程,很多东西不只是面试的时候才会用得到 文中涉及到的代码demo地址:drag-and-eventloop ...
- 我理解的javascript事件循环(一)
javascript事件循环分为2种:一种是浏览器端事件循环,一种是node端事件循环. 此文只是捋一捋我对浏览器端事件循环的理解. 前言 我们都知道 JavaScript 是一门单线程语言,这意味着 ...
- JAVA script 循环 图片_深入分析JavaScript 事件循环(Event Loop)
事件循环(Event Loop),是每个JS开发者都会接触到的概念,但是刚接触时可能会存在各种疑惑. 众所周知,JS是单线程的,即同一时间只能运行一个任务.一般情况下这不会引发问题,但是如果我们有一个 ...
- JavaScript事件循环
大厂面试题分享 面试题库 后端面试题库 (面试必备) 推荐:★★★★★ 地址:前端面试题库 一.异步执行原理 1. 单线程的JavaScript 我们知道,JavaScript是一种单线程语言,它主要 ...
- JavaScript事件循环机制
众所周知JS是一门单线程执行环境的语言,对于同步任务而言,同一时刻只能执行一个任务,后续的任务都要在当前执行的任务后面排队.这种模式在遇到一些执行时间较长的任务的时候就会出问题,会导致页面失去响应.所 ...
- JavaScript事件循环探索
一直对js的事件循环不是很清晰,最近看了JavaScript忍者秘籍的第13章后,有了一些感悟,特此总结一下,分享给大家. 单线程 众所周知,JavaScript是单线程执行模型,同一时刻只能执行一个 ...
- [译] 深入理解 JavaScript 事件循环(二)— task and microtask
引言 microtask 这一名词是 JS 中比较新的概念,几乎所有人都是在学习 ES6 的 Promise 时才接触这一新概念,我也不例外.当我刚开始学习 Promise 的时候,对其中回调函数的执 ...
- javascript事件循环Event Loop,宏任务与微任务
1.javascript的运行机制介绍 javascript是单线程的语言,默认情况下一个时间点只能做一件事情,因此引入异步模型javascript是一门解释性脚本语言,即(边解释边运行) 2.阻塞式 ...
- JavaScript事件循环剖析
前言 相信对于刚学习JavaScript的新手来说,去理解JS中的事件循环原理以及异步执行过程比较困难,但是这是JS必须要会的基础知识,逃避不能解决问题,笔者曾经也被这个知识点困扰过,现根据以往的经验 ...
最新文章
- t - sql的阶梯:超越基础水平2:写子查询
- python黑客代码_[翻译]Python开发中的密码散列(Hashing)
- 如何配置Spring Boot Tomcat
- 高维、相依和不完全数据的统计分析(二)
- 浅谈Windows Phone 7的体系结构 - [WP开发文档翻译系列]
- 让你秒懂的折半查找(二分查找)
- 很好的Android论坛
- 【MySQL】MySQL的帮助文档
- Python风格总结:ASCII码与字符相互转换
- ACM 美素数 (没AC)
- 高德地图:No implementation found for void com.autonavi.base.ae.gmap.GLMapEngine.nativeInitParam
- 无人驾驶感知篇之车载摄像头
- [通信原理]关于QPSK信号包络起伏问题的研究
- 定时上传文件至ftp服务器,CuteFTP FTP文件的定时上传图文教程
- 鸿蒙芯片是华为公司靠几年造出来的,难度不输芯片制造,华为高管实话实说,造出操作系统只是开始...
- Openssl 编译
- 使用spark.streaming.kafka.consumer.poll.ms和reconnect.backoff.ms解决spark streaming消费kafka时任务不稳定的问题
- linux服务器被攻击怎么办
- BAT、360、今日头条的小程序大战 谁会是最后的赢家?
- 怎么在电脑上进行音频以及视频的素材合并
热门文章
- llt自发光_“贝爷”联名款海系列新品得物独家首发,呼吁年轻人保护海洋环境...
- 这可能是全网最详细的计算机网络面经(笔记二)
- 英语发音规则---I字母
- 企业如何选择仓库自动化
- Day18--拉氏变换与控制系统模型
- 霍纳法则(Horner‘s rule)
- 浅析计算机网络技术相关论文,计算机网络技术浅析论文 - 经典论文
- signature=07da782715954d48aa05e9d49faf92a9,ndls-20201029
- 使用Java语言while循环来实现假如我有一张足够大的纸,他的厚度为0.1毫米 请问折叠多少次,可以折叠到珠峰高度?
- python折叠次数计算、一张纸5毫米_一张纸折叠多次后会怎样?计算机模拟得出,它能突破宇宙范围...