当我用js给元素添加className时，浏览器发生了什么？

Question

我想知道浏览器的渲染过程，JS线程与UI线程是怎么交互的？最想知道什么样的样式操作，会被合并到一次渲染中。例如我想一个图片hover的时候即刻变小，然后过渡放大到原来大小div.onmouseover = function(){     div.className = 'small';     div.className = 'transition'}但浏览器会将上面两个操作合并了成div.className = 'transition'，而没有分别渲染两个效果，所以很想了解浏览器的渲染过程，以及JS什么时候会让浏览器渲染？

Answer 1

浏览器很聪明，会对Paint进行优化，如果允许，会在代码栈退出后再进行刷新绘制。为什么setTimeout里面的class赋值会生效，原因就是setTimeout里面的函数放在了另外的代码栈，由事件去异步调用。

但是，我们也可以强制浏览器在同一个代码栈中进行重新绘制。这里就是上面说的“如果允许”的例外情况，看一下代码：

div.onmouseover = function () {    div.className = 'small';
    console.log(div.clientHeight); // 这句话强制浏览器进行重新绘制
    div.className = 'transition';
}

上面的代码console语句让浏览器知道，“他要获得div的布局或者样式信息了，我必须先把之前的样式设定刷新一下，才能给你正确的值”，于是浏览器就重新绘制了。后面等函数结束后，又一次重新绘制transition的效果。如果这里你还是没有肉眼看出变化，这个真的就是“太快了，你看不到”。

为了让你能看到，其实可以开启chrome的Paint Flashing选项，这样在页面被重新绘制时，会被高亮：