每天小笔记之判断某个元素是否被覆盖简便办法

CSS性能优化：transform与position的区别与硬件加速

原创已于 2023-02-16 16:03:18 修改 · 605 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #开发语言

于 2023-02-16 14:48:27 首次发布

文章探讨了CSS中的transform和position对性能的影响，解析了硬件加速的工作原理，提示了如何强制使用GPU进行渲染。同时，介绍了利用elementFromPoint检测元素是否被覆盖的方法。

/** sleep函数，1秒请求一次就好 */
const sleep = () => new Promise(resolve => setTimeout(resolve, 1000));

浅析CSS的性能优化：transform与position区别、硬件加速工作原理及注意事项、强制使用GPU渲染的友好CSS属性

判断某个元素是否被覆盖，如下例中class为mapboxgl-canvas的元素：

 const rect = document.querySelector('.mapboxgl-canvas').getBoundingClientRect();
 const x = rect.left;
 const y = rect.top;
 const topElt = document.elementFromPoint(x, y);
 // 如果被覆盖则返回
 if (document.querySelector('.mapboxgl-canvas').isSameNode(topElt)) {
   return;
 }else{
 	//否则继续执行一下代码；
 }