1.修改height
修改元素的高度可能會導(dǎo)致子元素的大小也會變化，所以瀏覽器不得不進行relayout。在relayout之后主線程還需要重新生成元素的位圖
2.修改transform
CSS transform屬性并不會觸發(fā)當(dāng)前元素或附近元素的relayout
3.結(jié)果對比
3.1 生成兩萬個節(jié)點，進行動畫對比
-
height
image.png -
transform
image.png
3.2 生成100個節(jié)點，進行動畫對比
-
height
image.png -
transform
image.png
4.結(jié)論
在存在大量dom時，盡量用transfrom來修改dom大小，如果dom不多，可隨意選擇（這里牽涉到，transform在做動畫時，dom占據(jù)的空間不變，但是修改height時，dom占據(jù)的空間會變，根據(jù)ui需求進行選擇即可）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
div {
width: 100%;
height: 200px;
}
div:nth-of-type(3){
transition: all .2s;
}
</style>
</head>
<body>
<div></div>
<script type="text/javascript">
var html = ''
for (var i = 0; i < 100; i++) {
html += '<div id="div'+i+'" style="background:' + getRandomColor() + '"></div>'
}
document.querySelector('div').innerHTML = html
function getRandomColor() {
return '#' + (Math.random() * 0xffffff << 0).toString(16);
}
var div2=document.querySelector('#div2')
function setHeight() {
div2.style.height = Math.random()*200 + 'px'
setTimeout(setHeight,1000)
}
setHeight()
</script>
</body>
</html>
修改transform的，把setHeight改為setTransform即可
function setTransform() {
div2.style.transform = 'scale(' + Math.random() + ')'
setTimeout(setTransform,1000)
}
setTransform()
5.參考文檔
https://juejin.im/entry/5af415396fb9a07acc11bdc4?utm_source=gold_browser_extension
