我不完全理解JavaScript线程

2019-05-15 19:22:15 阅读：235 来源： 互联网

在我深入研究这个问题之前.让我说,通过Event Loop我指的是http://en.wikipedia.org/wiki/Event_loop.这是浏览器实现的东西.有关更多信息,请阅读：http://javascript.info/tutorial/further-javascript-features/events-and-timing-depth.

这个问题很难而且很长,所以请尽量忍受！我非常感谢所有答案！

所以.现在,据我所知,在JavaScript中有一个主线程(在大多数浏览器环境中).所以,代码如下：

for (var color = 0x000; color < 0xfff; color++) {
    $('div').css('background-color', color.toString(16));
}

将生成从黑到白的动画,但你不会看到,因为渲染是在代码处理完成后(当下一个滴答发生时 – 浏览器进入事件循环).

如果你想看动画,你可以这样做：

for (var color = 0x000; color < 0xfff; color++) {
    setTimeout(function() {
        $('div').css('background-color', color.toString(16));
    }, 0);
}

上面的例子会生成一个可见的动画,因为setTimeout将一个新事件推送到浏览器Event Loop堆栈,该堆栈将在没有任何运行后进行处理(它进入Event Loop以查看下一步该做什么).

在这种情况下,浏览器似乎将0xfff(4095)事件推入堆栈,其中每个事件都通过它们之间的渲染过程进行处理.那么,我的第一个问题(#1)是什么时候进行渲染？它总是发生在事件循环堆栈中处理两个事件之间吗？

第二个问题是关于我给你的javascript.info网站链接中的代码.

...
  function func() { 
    timer = setTimeout(func, 0)
    div.style.backgroundColor = '#'+i.toString(16)
    if (i++ == 0xFFFFFF) stop()
  }

timer = setTimeout(func, 0)
....

我的问题是,浏览器每次到达div.style时都会将新的“渲染”事件推送到事件循环堆栈. …… = ……排队？但是,由于setTimeout-call,它是否首先推送事件？那么,浏览器最终是否像堆栈一样：

setTimeout event
render event

由于在div样式更改之前处理了setTimeout调用？如果这就是堆栈的样子,那么我假设下次浏览器进入事件循环时它将处理setTimeout的回调并最终得到：

rendering event
setTimeout event
rendering event

并继续前面的setTimeout调用生成的渲染事件？

最佳答案:

Q1：不一定.浏览器在不同程度上实现优化.例如,在触发昂贵的布局重新计算之前,他们可能会等待收集多个样式更改.所以答案是：取决于具体的浏览器.

试试这个：http://taligarsiel.com/Projects/howbrowserswork1.htm#Render_tree_construction(该文件的日期为2009年10月 – 即它是最新的)

Q2：渲染不一定与JS执行相同 – 这是两个不同的引擎. JS引擎不负责渲染,它只是与渲染引擎接口.在我看来,第二个问题的主要信息是JS与渲染引擎的独立性.请记住,浏览器(或网页)不需要Javascript,其主要目的是根据CSS样式规则呈现HTML. Javascript只是操纵HTML(真正的DOM树)和样式规则的一种方式.

请注意,您可以通过读取样式定义来强制渲染 – 此时渲染引擎别无选择,只能处理任何未完成的样式更改,尤其是在涉及任何位置更改时.这就是为什么人们应该从渲染树中删除对象(例如通过设置display：none – visibility：hidden是不够的,因为元素的大小仍然考虑布局),然后再进行大量的样式更改或添加大量元素,例如当许多行逐个添加(“for”循环)到表时.

根本不是问题的一部分 – 但是因为我刚才提到了display：none和visibility：hidden之间的区别,这也是添加隐藏位置时的一个考虑因素：像对话框这样的绝对元素.虽然使用一种或另一种方法隐藏绝对定位元素没有明显区别,但内部存在很大差异：使用可见性隐藏时：隐藏元素是渲染树的一部分,显示：无它是不.因此,如果有一个需要切换的元素,那么应该使用visibility：hidden,因为当“display”样式在“none”和“none”之间切换时. “阻止”浏览器必须首先渲染它.

标签：javascript,browser,event-loop
来源： https://codeday.me/bug/20190515/1109505.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

我不完全理解JavaScript线程