jquery - 通过缓存选择器结果优化基于 JQuery 的动画？

Question

我制作了一个基于以下 jQuery 函数的动画：hide()、show()、animate()。

这个动画消耗了大量的 CPU（类似于 Flash 的 CPU 使用），Chrome 告诉我（通过 CSS 选择器分析工具）我有很多类似的 CSS 选择器使用（CSS Selector Profile）。

这些选择器是否仅由渲染引擎使用？这是否还包括使用 $() 时的 jQuery 节点搜索（我假设它由 hide()、show() 或 animate() 调用）？

如果第二个问题是，我怎么能覆盖这个函数来缓存一些节点？（通过硬编码一些选择器，其结果在我的动画逻辑中不会改变）。

编辑：我正在实现帧之间的过渡，每一帧作为其背景上的 Ken Burns 效果

EDIT2：这是一个 jQuery 插件，尽可能使用 CSS3 制作动画https://github.com/benbarnett/jQuery-Animate-Enhanced

score 0 · Accepted Answer

如果您正在使用如下代码执行大量 jquery 动画：

$('div.myclass').show();
 ...
$('div.myclass').hide();
....
$('div.myclass').toggle();

您可能想查看链接您的 jquery 选择：

$('div.myclass').show().addClass('sdf').children('li').slideToggle()

或将选择器分配给变量并重用该变量

 var $ele = $('div.myclass');
 $ele.show();
 ...
$ele.hide();
....
$ele.toggle();

1 回答 1