Javascript Selectorator.js-页面上所有隐藏元素的选择器

Javascript Selectorator.js-页面上所有隐藏元素的选择器,javascript,jquery,html,Javascript,Jquery,Html,我正在使用Patrick Wied的heatmaps.js实现heatmap以显示所有用户在我的页面上的点击。热图是从每个元素的“数据点”集合中加载的。但加载时间太长…… 发行说明: 每个数据点都有X、Y坐标和页面上HTML元素的选择器(使用selectorator.js检索)。 目前,我每一页大约得到5千分,我需要检查一些元素是否未隐藏,这样我们就不会显示隐藏元素的热图。 目前我正在使用: element = $(data.points[i].Element); element.is(":hi


我正在使用Patrick Wied的heatmaps.js实现heatmap以显示所有用户在我的页面上的点击。热图是从每个元素的“数据点”集合中加载的。但加载时间太长……
发行说明:

每个数据点都有X、Y坐标和页面上HTML元素的选择器(使用selectorator.js检索)。 目前,我每一页大约得到5千分,我需要检查一些元素是否未隐藏,这样我们就不会显示隐藏元素的热图。

目前我正在使用:

element = $(data.points[i].Element);
element.is(":hidden"))
但这需要7秒钟来检查所有这些点,这相当长。 我已经没有办法避免/优化这个问题

数据点详细信息:

元素:#pageData>tbody>tr:eq(3)>td:eq(4)>a:eq(0)
Y:0.6546159
X:0.44231

伪脚本流描述:

FOREACH(point in allDatapoints)
{
 ...
   calculation of some parameters needed to show on heamapat
 ...
  if (point.element.is(":hidden"))
  {
    continue;
  }
  pointsToDisplay.push(point)
}
我还尝试在selectorator.js中获取除
GetSelector()
之外的所有隐藏元素的选择器,然后只遍历该数组,但它所用的时间几乎与
是(:hidden)
函数所用的时间相同

我希望这是有道理的

事实:获取元素的选择器可能需要一点时间,但反向过程(获取基于选择器的元素)几乎不需要时间。
->因此,我不能简单地发送隐藏元素的选择器数组并过滤那些速度更快的元素

查看
选择器的源代码似乎表明它使用索引生成选择器;i、 e.
pageData>tbody>tr:eq(3)>td:eq(4)>a:eq(0)

现在,通过该选择器检索元素看起来相当复杂(我假设需要对其进行解析,并执行选择器来检索实际的元素

我在这里猜测,正如我在评论中所说的那样,这正是我花了这么长时间的原因,一份个人资料确实会有所帮助

因此,如果不想解决这个确切的问题,您可以保存元素的
display
属性吗?这将消除通过jQuery进行检查的需要

手动检查示例

element = $(element);
while (element.tagName.toLowerCase() !== 'body') {
    if (element.style.display === 'none') {
        return false;
    }

    element = element.parentNode;
    if (!element) break;
}

谢谢你的编辑。@TotaloDotoNeto.run一个profiler在上面并发布结果?也许这会让你了解为什么要花这么长的时间来编辑这个概要文件,就好像我认为,选择器正在扼杀你的页面一样,你需要想另一种方法来做这件事,可能是通过在收集数据时保存元素状态,我回答如下:[链接]()保存
display
属性不会有多大作用,因为在收集数据时某些元素可能可见,但在显示热图时却不可见。这就是为什么我需要专门检查每个点(单击)。解析选择器根本不需要花太多时间,
是(“隐藏的”)
函数。假设我们有2k个点要检查。每次检查.is(“:hidden”))条件时,它会遍历页面上的所有元素,可能是100左右。这意味着2000*100条件评估。如果不使用
is(“hidden”)
如何,请尝试手动运行DOM以查看元素是否实际隐藏,我将快速发布编辑谢谢,我将尝试这样做,但是。(“hidden”)不仅检查显示属性。但也会将元素的其他可能性评估为不可见。比如零宽度和零高度。。等等。我知道,仅用作示例,您也可以手动检查它们,想知道它是否有所不同:)不确定原因,但我遇到了一个错误:无法获取未定义或空引用的属性“toLowerCase”