什么会导致 Chrome 和 Firefox 之间过滤器加载速度的差异？答案

【问题标题】：What would cause the difference in filter load speed between Chrome and Firefox?什么会导致 Chrome 和 Firefox 之间过滤器加载速度的差异？
【发布时间】：2015-03-30 15:14:07
【问题描述】：

我有一个news aggregator page，它有多个过滤器。公司过滤器有大量的公司。在 Chrome 中单击 + 按钮以展开列表并查看公司列表时，需要 6-8 秒才能看到整个列表。在 Firefox 中，列表几乎是瞬间可见的。有人可以帮我调查一下可能导致跨浏览器加载时间差异的原因吗？

【问题讨论】：

标签： google-chrome firefox load-time

【解决方案1】：

您需要提高 DOM 节点查找性能：

$newsFilterRow.on('click', '.js-filter-more', function(event) {
    var $this = $(this)
    var $items = $this.closest($newsFilterRow).find($newsFilterItem).filter(':hidden');
    var tmp = $items.splice(0, 56);
    $(tmp).addClass(newsFilterItemVisibleClass).css('display', 'inline-block');
    if ($items.length === 0) {
        $this.remove();
    }
});

您正在使用 .find() 和 .filter()

我建议更改这些过滤器以提高 Chrome 的性能。

http://www.steveworkman.com/html5-2/javascript/2011/improving-javascript-xml-node-finding-performance-by-2000/

【讨论】：

【解决方案2】：

您的 $items 变量在所有情况下都是零长度但对于公司。

var $items = $this.closest($newsFilterRow).find($newsFilterItem);
        function animate0() {
            var tmp = $items.splice(0, 56);
     ....

对于在空数组内拼接的空数组很便宜，没有内存重新分配/或任何东西。但是对于您的 Company 情况，您正在与每个动画帧拼接非空数组。这导致迟钝。

除了考虑缓存资源和在 animate 之外进行 DOM 查找。它只是在 animate 内部进行了太多的 DOM 操作。

可能 Firefox 正在为动画操作捕获数组屏幕截图。但这只是一个疯狂的猜测，因为性能差异。

【讨论】：