我们只做一件事,只为您满意--山东微道商网络技术有限公司

定位首页 - 资讯中心 > 网站制作 >

资讯中心

news

媒体联络

山东微道商网络技术有限公司

热线热线:0531-88193332

电话电话:15508684333

浏览器重绘域重排有什么不样的展示?

来源:https://www.chinanovo.net   发布时间:2021-11-04 14:31:26      
重排: 部分渲染树或整个渲染树需要重分析且节点尺寸需要重计算,表现为重生成布局,重排列元素
重绘: 由于节点的几何属性发生改变或样式改变,例如元素背景元素,表现为某些元素的外观被改变
重绘不定导致重排,但重排定绘导致重绘
如何触发重绘和重排?
任何改变用来构建渲染树的信息都会导致次重排或重绘:
添加、删除、更DOM节点
通过display: none隐藏个DOM节点-触发重排和重绘
通过visibility: hidden隐藏个DOM节点-只触发重绘,因为没有几何变化
济南网络公司
移动或者给页面中的DOM节点添加动画
添加个样式表,调整样式属性
用户行为,例如调整窗口大小,改变字号,或者滚动。
如何避免重绘或重排?
集中改变样式:比如使用class的方式来集中改变样式
使用document.createDocumentFragment():我们可以通过createDocumentFragment创建个游离于DOM树之外的节点,然在此节点上批量操作,插入DOM树中,因此只触发次重排
提升为合成层
将元素提升为合成层有以下优点:
合成层的位图,会交由 GPU 合成,比 CPU 处理要快
当需要repaint 时,只需要 repaint 本身,不会影响到其他的层
对于 transform 和 opacity 效果,不会触发 layout 和 paint
本文的内容是由济南网络公司给您提供,我们专注客户需求,不断的发展,为客户提供更多的服务,详情可参考我们的网站:https://www.chinanovo.net