1.修改height
修改元素的高度可能会导致子元素的大小也会变化，所以浏览器不得不进行relayout。在relayout之后主线程还需要重新生成元素的位图
2.修改transform
CSS transform属性并不会触发当前元素或附近元素的relayout
3.结果对比
3.1 生成两万个节点，进行动画对比
-
height
image.png
-
transform
image.png
3.2 生成100个节点，进行动画对比
-
height
image.png
-
transform
image.png
4.结论
在存在大量dom时，尽量用transfrom来修改dom大小，如果dom不多，可随意选择（这里牵涉到，transform在做动画时，dom占据的空间不变，但是修改height时，dom占据的空间会变，根据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
网友评论