为什么在后面长时间同步执行的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

代码是同步的 但是渲染是异步的同步的阻塞了所有异步的任务这个段代码 其实渲染都是在斐波那契数列结束后执行的