为什么在后面长时间同步执行的js会影响页面的渲染

Question

页面并没有一开始显现红色,而是过了10多秒才出现为灰色,为什么没出现红色呢

document.body.style.backgroundColor = 'red'
function Fibonacci (n) {
    if ( n <= 1 ) {return 1};

    return Fibonacci(n - 1) + Fibonacci(n - 2);
}
console.log(Fibonacci(45))
document.body.style.backgroundColor = 'gray'

Answer 1

谢邀。

先回答为什么没有出现红色。出现了，不过太快了，视觉上没有体现出来。你可以这样

document.body.style.backgroundColor = 'red'
function Fibonacci (n) {
    if ( n <= 1 ) {return 1};

    return Fibonacci(n - 1) + Fibonacci(n - 2);
}
console.log(Fibonacci(45))
debugger;
document.body.style.backgroundColor = 'gray'

在这个斐波那契函数后边加个debugger，记得打开控制台。然后理论上应当是出现你所说的10几秒的空白等待，然后会出现红色背景。跳过断点后，背景变灰。

形成这种情景的原因是，dom树的渲染解析是一个异步动作。所有的异步动作会被推到异步调用栈中等待当前作用域的同步函数执行完毕（也就是这个10+秒的斐波那契），再显示结果。所以你会等待10几秒，而后红色会被迅速替换成灰色以至于你的肉眼没有看到。大概是这个过程。

Answer 2

代码是同步的 但是渲染是异步的

同步的阻塞了所有异步的任务

这个段代码 其实渲染都是在斐波那契数列结束后执行的

Answer 3

渲染是异步的,全部执行后一次渲染

    document.body.style.backgroundColor = 'red';


    function Fibonacci(n) {
      if (n <= 1) {
        return 1
      };

      return Fibonacci(n - 1) + Fibonacci(n - 2);
    }
    setTimeout(function () {
      Fibonacci(45);
      document.body.style.backgroundColor = 'blue';
    })

Answer 4

谢邀

DOM的渲染 通俗一点理解就是有关于某个dom节点的样式全部执行完毕

后者覆盖前者
权重大的覆盖权重小的
然后去渲染DOM

还有你说的10多秒 是因为中间这个函数执行循环 执行了10多秒（几秒） 才出现灰色

即使你把前面修改红色的代码去除 也是10几秒渲染灰色背景 和时间没有关系的