本文探讨了HTML页面渲染过程中重排对性能的影响，提出了减少DOM操作（如使用虚拟DOM）、合并样式、避免频繁布局调整和使用绝对定位进行动画等方法来提升Web页面的流畅度。
在html中 我们通常要先经过渲染引擎构建dom树 样式表 然后组成render（渲染）树 ；
重排就是当某个子标签的样式发生改变时 会影响它的父元素，祖先元素等等一系列元素这时浏览器就会去重新渲染这些元素这就是重排也叫回流
浏览器的不断渲染重排会大大影响web的性能导致有时候我们的页面会很卡；
为了减少重排尽量减少使用
减少dom操作
例如vue中使用的虚拟dom就是为了减少重排节约资源
合并样式使用style的csstext
div.style.cssText = 'padding:5px; border:1px solid #000; margin:5px;';给几个样式加一个class类名调用类名
<style>
.boxs{
padding:5px;
border:1px solid #000;
margin:5px;
}
</style>
<body>
<div class="box"></div>
</body>
<script>
var box = document.querySelector('.box');
box.classList.add('.boxs');
</script几何属性
避免多次触发布局
如回到顶部
对于页面中的动画 尽量使用绝对定位操作定位属性
扫一扫
83
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
