Question

我正在尝试使用elementFromPoint来检测目标元素是否对于某些其他元素未涵盖的用户真正可见，例如对话框。

在该实验中，从目标元素的表面选择500个均匀分布的样本点。但是，我遇到了一些与elementFromPoint相关的性能问题，在滚动页面时特别糟糕。从“Chrome效果”标签中可以看出，花费大部分时间用于渲染，即207.2毫秒渲染时间总计为216.31毫秒{。{3}}。

document.elementFromPoint会强制布局/重排吗？

从elementFromPoint定义中不太清楚：

＆＃34; elementFromPoint（x，y）方法必须遵循以下步骤：

如果任一参数为负数，则x大于视口宽度，不包括渲染滚动条的大小（如果有），或者y大于视口高度，不包括渲染滚动条的大小（如果有），或者没有与文档关联的视口，返回null并终止这些步骤。

如果视口中有一个布局框，它将成为坐标x，y处的命中测试的目标，则在应用适用于视口后代的转换时，返回关联的元素并终止这些步骤。

如果文档具有根元素，则返回根元素并终止这些步骤。返回null。＆＃34;

以下是测试document.elementFromPoint：

性能的示例代码

    var elementFromPointPerf = function(x, y){
      var t0 = performance.now();
      for(let i = 0; i < 100000; i++){
        let test = document.elementFromPoint(
           Math.random() * x,
           Math.random() * y,
         );
      }
      var t1 = performance.now();
      console.log(
         'Call to elementFromPoint took ' +
           ((t1 - t0)/100000) +     ' milliseconds.',
      );
    };

结果会有所不同，具体取决于页面的复杂程度。

document.elementFromPoint会强制布局/重排吗？

0 个答案: