我有一个新闻聚合页面,它有多个过滤器。公司的过滤器有大量的公司。当在Chrome中单击+按钮以展开列表并查看公司列表时,整个列表需要6-8秒才能显示出来。在Firefox中,列表几乎是瞬间可见的。有人能帮我调查是什么导致不同浏览器的加载时间的差异吗?
发布于 2015-04-07 02:47:37
您需要改进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/
发布于 2015-04-07 19:07:55
您的$items变量的零长度在所有情况下都是,但对于公司则是。
var $items = $this.closest($newsFilterRow).find($newsFilterItem);
function animate0() {
var tmp = $items.splice(0, 56);
....
对于空数组,在空数组中剪接很便宜,没有内存重新分配/或任何东西。但是对于您的公司案例,您是将非空数组与每个动画帧拼接在一起。这是导致懒惰的原因。
此外,考虑缓存资源和在动画之外执行DOM查找。在动画中进行的DOM操作太多了。
可能Firefox正在捕捉动画操作的数组屏幕截图。但这只是一个疯狂的猜测,为了表现的不同。
https://stackoverflow.com/questions/29349866
复制相似问题