Question

我最近负责优化网站。我怀疑的一件事是，有太多的事件绑定到网站上的不同对象。就像网格中的每个项目都有一个事件绑定到它的双击事件。这会减慢渲染速度，因为必须在添加内容时为每个项目设置绑定。我希望我们可以做一些像网格绑定上的双击，然后确定点击的项目。

无论如何，客户要求提供有关事情的指标。我需要能够给他们一些报告，说当前页面上有X个事件。我的更改将其归结为Y个绑定。

有没有你知道的工具可以给我那种数量？我想到了chrome开发人员工具的元素视图中的事件监听器选项卡，但我不确定是否列出了所有事件，如果是，那么如何导出列表以获取计数。

Answer 1

Visual Event为您提供了特定页面上绑定的所有事件的概述。

如果您正在运行chrome，您还可以使用命令行API在DOM节点上获取绑定事件：

getEventListeners(el); // {click: [..], mouseover: [..], ...}

此功能可以包含在以下内容中：

// Run this in your console:
var count = 0;
// forEach on all elements in the DOM:
[].slice.call(document.getElementsByTagName('*')).forEach(function(el) {
    // count all bound events using `getEventListeners`
    var events = getEventListeners(el);
    for ( var prop in events ) count += events[prop].length;
});
console.log('Total events bound: %d', count);

希望你能得到一般的想法。

Answer 2

计算元素上的绑定：

var count = 0;
$('#myTable *').each(function () {
    $.each(getEventListeners(this), function () {
        count += this.length;
    });
});
console.log(count + ' bindings in #myTable');

要进行优化，您将能够执行此操作：

使用原始JS：

document.getElementById('myTable').onclick = function (event) {
    console.log(event.target); // Contains the clicked TD tag element
};

使用jQuery：

$('#mayTable').on('click', 'td', function() {
    console.log(this); // Contains the clicked TD tag element
});

这会减少网格列*行的绑定为1。

计算网页绑定的工具？

2 个答案: