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

Question

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

Answer 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/

Answer 2

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

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

对于空数组，在空数组中拼接很便宜，没有内存 reallocation/or 任何东西..但是对于你的 Company 情况，你正在拼接非空数组动画帧..这是导致缓慢的原因。

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

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

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

What would cause the difference in filter load speed between Chrome and Firefox?

firefox

google-chrome

load-time