js代码导致浏览器强行渲染的方式

一、在js代码中读取元素的位置，尺寸信息会导致浏览器的强行渲染

1.使用getBoundingClientRect()或offsetTop等属性来获取元素的位置和尺寸信息会触发重新渲染。

const element = document.getElementById('myElement');
const rect = element.getBoundingClientRect(); // 触发重新渲染

2.修改样式属性并立即获取： 如果你在修改了元素的样式属性（例如宽度、高度、位置等）后立即获取计算属性，浏览器会强制重新渲染以确保返回正确的值。

const element = document.getElementById('myElement');
element.style.width = '100px'; // 触发重新渲染
const width = window.getComputedStyle(element).width; // 获取重新渲染后的宽度

3.获取滚动位置： 获取页面的滚动位置或元素内部滚动的位置也会触发重新渲染。

const scrollY = window.scrollY; // 获取滚动位置，触发重新渲染

4.使用offsetTop和offsetLeft： 获取元素的offsetTop和offsetLeft属性也可能导致重新渲染。

const offsetTop = element.offsetTop; // 触发重新渲染

作用：为自己写的元素做某一事件结束在js中修改样式做动画效果