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

问题描述

问 题

我想知道浏览器的渲染过程，JS线程与UI线程是怎么交互的？
最想知道什么样的样式操作，会被合并到一次渲染中。

例如我想一个图片hover的时候即刻变小，然后过渡放大到原来大小

div.onmouseover = function(){
    div.className = 'small';
    div.className = 'transition'
}

但浏览器会将上面两个操作合并了成div.className = 'transition'，而没有分别渲染两个效果，

所以很想了解浏览器的渲染过程，以及JS什么时候会让浏览器渲染？

解决方案

补充下@xiaoboost 的答案：

首先肯定他说的，

有人说是因为电脑运行太快，你没有看到，这个回答是错误的。

然后部分同意他说的,

只有当主进程结束之后网页才会重新渲染

最后开始我的忽悠（之前读过这类主题的东西，但是现在不记得了，my poor memory...）：浏览器很聪明，会对Paint进行优化，如果允许，会在代码栈退出后再进行刷新绘制。为什么setTimeout里面的class赋值会生效，原因就是setTimeout里面的函数放在了另外的代码栈，由事件去异步调用。

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

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

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

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

这篇关于javascript - 当我用js给元素添加className时，浏览器发生了什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！