能够讲讲有关浏览器渲染机制的问题嘛?

能够讲讲有关浏览器渲染机制的问题嘛?

主要是围绕setTimeout解决动画不生效的这个问题。

自己的理解是这样的, setTimeout执行的时候,这个函数会被放入到事件队列尾部里面,事件队列将会在函数调用栈执行清空之后才会出栈执行。

但是这为什么就说setTimeout就一定比浏览器的重绘渲染要慢, 能够达到渲染之后产生动画的效果呢?希望能够举例说明,画图讲解一下浏览器执行的流程。

不知道理解的对不对,可能需要老师讲解更多的浏览器渲染相关的背景知识。

正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

1回答
一路电光带火花 2020-04-29 19:21:36

 js是单线程的,异步任务总是晚于同步任务; 浏览器的绘制过程是在主线程中完成的,当异步任务可以执行时,它无法插入到已经存在的任务之间,只能排队到当前所有任务的最后等待执行; 如果当前的同步任务列表中的代码执行时间很长,可能会导致定时器执行时间不准确,就是说计时器已经可以执行了,但是主线程任务没完成,那定时器只能在主线程后面等待执行;  所以说setTimeout 一定比浏览器绘制慢吧

  • 提问者 慕移动3569406 #1
    额,自己这方面的储备不够, 不太能理解您表达的意思, 觉得可能我们的角度也有点不同,先谢谢了 我想您前面一大段是在讲setTimeout的执行机制,之所以setTimeout会执行慢于浏览器的渲染,是因为浏览器的绘制已经提前进入了主线程了, setTimeout还在事件队列里面,没有出栈执行,是这个意思嘛? 那这个主线程是不是就是我说的函数调用栈呢? 是不是说浏览器的渲染也是需要推入到函数调用栈内等待执行的呢? 流程的变化大致这样, 假设是这样的代码: function main(){ changeStyle() //修改元素样式 appendToPage() // 添加dom到页面 setTimeout(function finalStyle(){ ....}) // 添加元素最终样式 } 函数调用栈: changeStyle 事件队列:空
    2020-04-29 19:42:09
  • 提问者 慕移动3569406 #2
    不小心点到了回车.. 还没有回复完。
    2020-04-29 19:42:57
  • 提问者 慕移动3569406 #3
    浏览器内部的变化大致这样, 假设是这样的代码: function main(){ changeStyle() //修改元素样式 appendToPage() // 添加dom到页面 setTimeout(function finalStyle(){ ....}) // 添加元素最终样式 } ------------------- 函数调用栈: changeStyle() appendToPage() setTimeout(finalStyle) 事件队列:空 -------------------- 函数调用栈:空 事件队列:reflow() setTimeout(finalStyle) ---------------------------- 函数调用栈:reflow() // 重绘重排 事件队列:setTimeout(finalStyle) -------------------------- 函数调用栈:setTimeout(finalStyle) 事件队列:空 自己这样的理解是对的嘛? 麻烦解答疑惑。 orz
    2020-04-29 19:49:47
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师