正常情况下js也会阻碍GUI的渲染
1、缓存布局信息
div.style.left = div.offsetLeft + 1 + ‘px’;
div.style.top = div.offsetTop + 1 + ‘px’;
修改为=>
var curLeft = div.offsetLeft;
var curTop = div.offsetTop;
div.style.left = curLeft + 1 + ‘px’;
div.style.top = curTop + 1 + ‘px’;
2、元素批量修改
文档碎片:createDocumentFragment
模板字符串拼接
3、动画效果应用position属性为absolute或fixed的元素上(脱离文档流)
4、CSS3硬件加速(GPU加速)
比起考虑如何减少回流重绘,我们更期望的是,根本不要回流重绘;transform/opacity/filters/这些属性会触发硬件加速,不会引发回流和重绘
可能会引发的坑:过多使用会占用大量内存,性能消耗严重,有时候会导致字体模糊等
5、牺牲平滑度换取速度
每次1像素移动一个动画,但是如果此动画使用了100%的CPU,动画就会看起来是跳动的,因为浏览器正在与更新回流做斗争,每次移动3像素可能看起来平滑度低了,但它不会导致cpu在比较慢的机器中抖动
6、避免table布局和使用css的JavaScript表达式
/* 点击盒子,让其立即回到0的位置,然后再运动到200的位置(动画1S) */
<style>
.box {
position: absolute;
top: 100px;
left: 100px;
width: 100px;
height: 100px;
background: red;
transition: left 1s linear 0s;
}
</style>
// 现代版浏览器,两行修改操作,只引发一次回流
// 浏览器的渲染队列机制:遇到修改样式的代码,浏览器没有立即渲染,而是先把他放到渲染队列中,继续看下面是否还是修改样式的,
// 是的话继续放进去....(直到遇到获取元素样式的代码或者没有修改样式的代码了,则立即把队列中的样式统一进行渲染,最后只引发一次回流重绘)
box.onclick = function () {
// 立即回到零
box.style.transitionDuration = '0s';
box.style.left = '0px';
// 运动到200的位置
box.style.transitionDuration = '1s';
box.style.left = '200px';
};
// 由于渲染队列机制原因,这样会触发两次,一旦遇到获取样式的代码,需要先把之前队列中的样式进行渲染
box.onclick = function () {
box.style.transitionDuration = '0s';
box.style.left = '0px';
// 获取样式,会立即刷新渲染队列
box.offsetLeft;
box.style.transitionDuration = '1s';
box.style.left = '200px';
};
// 如果把2个操作放到宏任务中,也可以实现效果,但是两个宏任务的时间必须不一样,如果一样,那么还是会一起渲染的
box.onclick = function () {
setTimeout(() => {
box.style.transitionDuration = '0s';
box.style.left = '0px';
}, 1)
setTimeout(() => {
box.style.transitionDuration = '1s';
box.style.left = '200px';
}, 2)
};
// 会同时渲染
box.onclick = function () {
setTimeout(() => {
box.style.transitionDuration = '0s';
box.style.left = '0px';
})
setTimeout(() => {
box.style.transitionDuration = '1s';
box.style.left = '200px';
})
};
// 使用文档碎片
let frg = document.createDocumentFragment();
for (let i = 0; i < 10; i++) {
let span = document.createElement('span');
span.innerHTML = i;
frg.appendChild(span);
}
document.body.appendChild(frg);
本文地址:https://blog.csdn.net/uperficialyu/article/details/107246021
如对本文有疑问, 点击进行留言回复!!
荐 微信小程序动态评分展示/五角星展示/半颗星展示/自定义长度展示
深入理解CSS background-blend-mode的作用机制
网友评论