记一道字节跳动的面试题 js操作dom的执行顺序

绝地灬酷狼 2023-07-17 02:39 39阅读 0赞

面了一轮字节跳动，遇到一个面试题记录一下

### 题目如下 ###

function demo () { 
    	const now = new Date().valueOf()
    	document.body.style.backgroundColor = 'red';
    	while(new Date().valueOf() - now <= 2000) { 
    		continue;
    	}
    	document.body.style.backgroundColor = 'blue';
    }
    demo(); // 执行结果是什么样子的？

### 问题是执行以上代码，结果是什么样子的？ ###

我天真的以为是body先变红，两秒后变蓝色

--------------------

真正的答案是：

两秒后直接变蓝！！！！

--------------------

为什么嘞，看以下代码执行结果就会理解其中缘由了

function demo1() { 
    	setTimeout(()=>{ 
    	    console.log('timeout 开始执行')        
    		Promise.resolve().then(()=>{ 
    		//将dom操作移到这里。
    			document.querySelector('#demo').innerHTML='red';
    			var now =Date.now();
    			while(Date.now()-now<4000){ 
    			}
    			console.log("微任务执行完成")
    		})
    		var now =Date.now();
    		while(Date.now()-now<4000){ 
    		}
    		console.log("宏任务执行完成")
    
    	},1000)
    }
    demo1();
    // timeout 开始执行
    // 宏任务执行完成
    // 微任务执行完成
    // #demo的内容显示red

由上可知，js对dom的操作是在任务队列里的微任务都执行结束后才执行的。  
js代码执行由js引擎线程负责  
dom样式更改由GUI渲染线程负责  
所以两个线程互斥，造成了dom操作“异步”的效果  
而且GUI渲染会进行优化，多个同一dom的操作会合并

### 解决办法 ###

1.  把js线程手动滞后，通过setTimeout，js操作被放到下一个宏任务里。

function demo () { 
    	const now = new Date().valueOf()
    	// document.getElementById('demo').style.width = '200px';
    	document.getElementById('demo').style.backgroundColor = 'red';
    	setTimeout(() => { 
    		while(new Date().valueOf() - now <= 2000) { 
    			continue;
    		}
    		document.getElementById('demo').style.backgroundColor = 'blue';
    	}, 0)
    }

1.  可以让GUI线程提前，通过触发回流的方法，让GUI线程提前执行。

发表评论取消回复

表情：

评论列表（有 0 条评论，39人围观）

还没有评论，来说两句吧...

相关阅读

相关记一道字节跳动的算法面试题

击蓝色“五分钟学算法”关注我哟加个“星标”，天天中午 12:15，一起学算法 ![640?wx\_fmt=jpeg][640_wx_fmt_jpeg] 作者 | ...

雨点打透心脏的1/2处/ 2024年04月17日 19:53/ 0 赞/ 106 阅读

相关打开脑洞，一道字节跳动面试真题的优雅解法！

公众号后台回复“学习”，获取作者独家秘制精品资料 ![640?wx\_fmt=png][640_wx_fmt_png] ![640?wx\_fmt=jpeg][640_wx

以你之姓@/ 2023年10月11日 11:15/ 0 赞/ 65 阅读

相关记一道字节跳动的算法面试题

前几天有个朋友去面试字节跳动，面试官问了他一道链表相关的算法题，不过他一时之间没做出来，就来问了我一下，感觉这道题还不错，拿来讲一讲。题目这其实是一道变形的链表反转

太过爱你忘了你带给我的痛/ 2023年08月17日 17:28/ 0 赞/ 179 阅读

相关记一道字节跳动的面试题 js操作dom的执行顺序

面了一轮字节跳动，遇到一个面试题记录一下题目如下 function demo () { const now = new Date().valueO

绝地灬酷狼/ 2023年07月17日 02:39/ 0 赞/ 40 阅读

相关一道简简单单的字节跳动算法面试题

点击上方“图解面试算法”，选择“星标”公众号重磅干货，第一时间送达![format_png][] 今天分享的题目来源于 LeetCode 上的剑指 Offer 系列面试

亦凉/ 2023年02月17日 11:28/ 0 赞/ 264 阅读

相关字节跳动面试题

字节跳动三面面经字节跳动一面面试题：自我介绍聊聊项目，时间大概15种左右，面试官会根据项目的一些设计点来提问，提前做好准备，别自己坑了自己分布式锁是锁住

爱被打了一巴掌/ 2023年01月02日 13:22/ 0 赞/ 238 阅读

相关一道js面试题的深入~

理解事件循环前段时间有位很火的前端博主发表的文章——[ Excuse me？这个前端面试在搞事！][Excuse me] 当时的我看完好像很懂的样子 ![这里

以你之姓@/ 2022年06月15日 10:47/ 0 赞/ 178 阅读

相关记一道有意思的JavaScript面试题

function Foo() { this.getName = function() { console.log(3);

短命女/ 2022年05月26日 12:27/ 0 赞/ 272 阅读

相关记一道经典的 JavaScript 面试题

最近，在温习前端知识时，看到一道非常好的 JavaScript 面试题，这里做个分享，并附上我的分析。问题 -------------------- fun

心已赠人/ 2022年05月25日 23:34/ 0 赞/ 277 阅读

相关记一道简单的java面试题

这可能是历史上最简单的一道java面试题了。题目很简单，完成代码，判断一个整数是否是奇数： public boolean isOdd(int i) 相信相当数量

野性酷女/ 2022年03月06日 08:24/ 0 赞/ 270 阅读