首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >什么会导致Chrome和Firefox在过滤加载速度上的差异?

什么会导致Chrome和Firefox在过滤加载速度上的差异?
EN

Stack Overflow用户
提问于 2015-03-30 15:14:07
回答 2查看 137关注 0票数 7

我有一个新闻聚合页面,它有多个过滤器。公司的过滤器有大量的公司。当在Chrome中单击+按钮以展开列表并查看公司列表时,整个列表需要6-8秒才能显示出来。在Firefox中,列表几乎是瞬间可见的。有人能帮我调查是什么导致不同浏览器的加载时间的差异吗?

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2015-04-07 02:47:37

您需要改进DOM节点查找性能:

代码语言:javascript
运行
复制
$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/

票数 1
EN

Stack Overflow用户

发布于 2015-04-07 19:07:55

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

代码语言:javascript
运行
复制
var $items = $this.closest($newsFilterRow).find($newsFilterItem);
        function animate0() {
            var tmp = $items.splice(0, 56);
     ....

对于空数组,在空数组中剪接很便宜,没有内存重新分配/或任何东西。但是对于您的公司案例,您是将非空数组与每个动画帧拼接在一起。这是导致懒惰的原因。

此外,考虑缓存资源和在动画之外执行DOM查找。在动画中进行的DOM操作太多了。

可能Firefox正在捕捉动画操作的数组屏幕截图。但这只是一个疯狂的猜测,为了表现的不同。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/29349866

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档