我想知道浏览器的渲染过程,JS线程与UI线程是怎么交互的?
最想知道什么样的样式操作,会被合并到一次渲染中。
例如我想一个图片hover的时候即刻变小,然后过渡放大到原来大小
div.onmouseover = function(){
div.className = 'small';
div.className = 'transition'
}
但浏览器会将上面两个操作合并了成div.className = 'transition',而没有分别渲染两个效果,
所以很想了解浏览器的渲染过程,以及JS什么时候会让浏览器渲染?
补充下@xiaoboost 的答案:
首先肯定他说的,
然后部分同意他说的,
最后开始我的忽悠(之前读过这类主题的东西,但是现在不记得了,my poor memory...):浏览器很聪明,会对Paint进行优化,如果允许,会在代码栈退出后再进行刷新绘制。为什么setTimeout里面的class赋值会生效,原因就是setTimeout里面的函数放在了另外的代码栈,由事件去异步调用。
但是,我们也可以强制浏览器在同一个代码栈中进行重新绘制。这里就是上面说的“如果允许”的例外情况,看一下代码:
上面的代码console语句让浏览器知道,“他要获得div的布局或者样式信息了,我必须先把之前的样式设定刷新一下,才能给你正确的值”,于是浏览器就重新绘制了。后面等函数结束后,又一次重新绘制transition的效果。如果这里你还是没有肉眼看出变化,这个真的就是“太快了,你看不到”。
为了让你能看到,其实可以开启chrome的Paint Flashing选项,这样在页面被重新绘制时,会被高亮: