已解決430363個問題，去搜搜看，總會有你想問的

當我用js給元素添加className時，瀏覽器發生了什么？

首頁猿問當我用js給元素添加classNa...

當我用js給元素添加className時，瀏覽器發生了什么？

JavaScript

qq_笑_17 2018-09-05 14:09:16

我想知道瀏覽器的渲染過程，JS線程與UI線程是怎么交互的？最想知道什么樣的樣式操作，會被合并到一次渲染中。例如我想一個圖片hover的時候即刻變小，然后過渡放大到原來大小div.onmouseover = function(){ div.className = 'small'; div.className = 'transition'}但瀏覽器會將上面兩個操作合并了成div.className = 'transition'，而沒有分別渲染兩個效果，所以很想了解瀏覽器的渲染過程，以及JS什么時候會讓瀏覽器渲染？

查看完整描述

1 回答

FFIVE

TA貢獻1797條經驗獲得超6個贊

瀏覽器很聰明，會對Paint進行優化，如果允許，會在代碼棧退出后再進行刷新繪制。為什么setTimeout里面的class賦值會生效，原因就是setTimeout里面的函數放在了另外的代碼棧，由事件去異步調用。

但是，我們也可以強制瀏覽器在同一個代碼棧中進行重新繪制。這里就是上面說的“如果允許”的例外情況，看一下代碼：

div.onmouseover = function () {    div.className = 'small';
    console.log(div.clientHeight); // 這句話強制瀏覽器進行重新繪制
    div.className = 'transition';
}

上面的代碼console語句讓瀏覽器知道，“他要獲得div的布局或者樣式信息了，我必須先把之前的樣式設定刷新一下，才能給你正確的值”，于是瀏覽器就重新繪制了。后面等函數結束后，又一次重新繪制transition的效果。如果這里你還是沒有肉眼看出變化，這個真的就是“太快了，你看不到”。

為了讓你能看到，其實可以開啟chrome的Paint Flashing選項，這樣在頁面被重新繪制時，會被高亮：

反對回復 2018-10-12

1 回答
0 關注
637 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

當我用js給元素添加className時，瀏覽器發生了什么？

當我用js給元素添加className時，瀏覽器發生了什么？

1 回答

添加回答

當我用js給元素添加className時，瀏覽器發生了什么？

當我用js給元素添加className時，瀏覽器發生了什么？