2018-12-21 js引擎和渲染引擎

看看下面这样一段代码：

function jank(second) {

    var start = +new Date();

    while (start + second * 1000 > (+new Date())) {}

}

div.style.backgroundColor = "red";

// some long run task

jank(5);

div.style.backgroundColor = "blue";

无论在任何的浏览器中运行上面的代码，你都不会看到div变为红色，页面通常会在假死5秒，然后容器变为蓝色。这是因为浏览器的始终只有一个线程在运行(可以这么理解，因为js引擎与UI引擎互斥)。虽然你告诉浏览器此时div背景颜色应该为红色，但是它此时还在执行脚本，无法调用UI线程。