為什么在后面長時間同步執(zhí)行的js會影響頁面的渲染

代碼是同步的 但是渲染是異步的

同步的阻塞了所有異步的任務(wù)

這個段代碼 其實渲染都是在斐波那契數(shù)列結(jié)束后執(zhí)行的

渲染是異步的,全部執(zhí)行后一次渲染

    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';
    })

謝邀

DOM的渲染 通俗一點理解就是有關(guān)于某個dom節(jié)點的樣式全部執(zhí)行完畢

后者覆蓋前者
權(quán)重大的覆蓋權(quán)重小的
然后去渲染DOM

還有你說的10多秒 是因為中間這個函數(shù)執(zhí)行循環(huán) 執(zhí)行了10多秒（幾秒） 才出現(xiàn)灰色

即使你把前面修改紅色的代碼去除 也是10幾秒渲染灰色背景 和時間沒有關(guān)系的

謝邀。

先回答為什么沒有出現(xiàn)紅色。出現(xiàn)了，不過太快了，視覺上沒有體現(xiàn)出來。你可以這樣

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'

在這個斐波那契函數(shù)后邊加個debugger，記得打開控制臺。然后理論上應(yīng)當(dāng)是出現(xiàn)你所說的10幾秒的空白等待，然后會出現(xiàn)紅色背景。跳過斷點后，背景變灰。

形成這種情景的原因是，dom樹的渲染解析是一個異步動作。所有的異步動作會被推到異步調(diào)用棧中等待當(dāng)前作用域的同步函數(shù)執(zhí)行完畢（也就是這個10+秒的斐波那契），再顯示結(jié)果。所以你會等待10幾秒，而后紅色會被迅速替換成灰色以至于你的肉眼沒有看到。大概是這個過程。