Javascript hover（）性能怀疑

虽然我知道一些jQuery可以简化前端操作编程，但我也知道一些提高浏览器性能的“最佳实践”，比如通过

var

进行缓存，并且总是从ID选择器开始。但我对这段代码有疑问。能做得更好吗

序言：这段代码通过.hover（）为（已经缓存的）选择器中的几个块设置动画

HTML是这样的：

<div clas="block-link red">(...)</div>
<div clas="block-link yellow">(...)</div>
<div clas="block-link magenta">(...)</div>
<div clas="block-link moradopelusa">(...)</div>

我看到我在悬停后再次声明变量，但我不知道有什么技巧可以避免再次声明。不管怎样，即使这样，它也像一个符咒

更新：固定代码#1

---

注1：是的，我在代码的其他部分使用缓存的_块。

我认为您可以使用相同的回调闭包

（$element.on（“mouseout mouseover”，callback））

绑定

mouseout

和

mouseover

，并使用

e.type==“mouseout”

检测闭包内的事件

在您的代码中，您正在执行

this_block_text = jQuery(this_block).children(div.text)

然后

jQuery(this_block_text).animate(..);

为什么不是这个

this_block_text.animate(..)

---

这个_block_text

已经是一个jQuery对象了

我想你可以用相同的回调闭包

（$element.on（“mouseout mouseover”，callback））

绑定

mouseout

和

mouseover

，并用

e.type==“mouseout”

之类的东西检测闭包内的事件

jQuery(this_block_text).animate(..);
jQuery(this_block_image).animate(..);
jQuery(this_block_link).animate(..);
jQuery(this_block_link_icon).animate(..);

在您的代码中，您正在执行

this_block_text = jQuery(this_block).children(div.text)

然后

jQuery(this_block_text).animate(..);

为什么不是这个

this_block_text.animate(..)

此块文本已经是jQuery对象

jQuery(this_block_text).animate(..);
jQuery(this_block_image).animate(..);
jQuery(this_block_link).animate(..);
jQuery(this_block_link_icon).animate(..);

不需要将它们写为jQuery（…），因为此块文本、此块图像等已经是jQuery对象

this_block_text.animate()

我会跑的

另外，使用$.（）代替jQuery（）更好、更干净

美元（'div.block-link'）比美元（'block-link'快）

不需要将它们写为jQuery（…），因为此块文本、此块图像等已经是jQuery对象

this_block_text.animate()

我会跑的

另外，使用$.（）代替jQuery（）更好、更干净

而$（'div.block-link'）比$（'.block-link'）快
这段代码中最突出的是您调用
jQuery
的频率。如果已经有了jQuery对象，则无需再次调用jQuery

这：

做与以下相同的事情：

var cached_blocks = jQuery(".block-link");
cached_blocks.hover(...);

如果您不打算重用
cached_块
，那么使用它不会有任何性能改进，因此您可以将代码简化为：

jQuery(".block-link").hover(...);

如果元素已经在页面上，我会将代码简化为：

var links = jQuery(".block-link");

var parts = {
    text: links.children("div.text"),
    image: links.children("div.image"),
    link: links.children("div.link"),
    icon: links.children("a.icon")
};

links.hover(function() {
    parts.text.animate(..);
    parts.image.animate(..);
    parts.link.animate(..);
    parts.icon.animate(..);
}, function() {
    parts.text.animate(..);
    parts.image.animate(..);
    parts.link.animate(..);
    parts.icon.animate(..);
});

如果不知道你想做什么样的动画，我无法再简化它，但我怀疑你也不需要那么多调用来制作动画。
这段代码中最突出的是你调用
jQuery
的频率。如果已经有了jQuery对象，则无需再次调用jQuery

这：

做与以下相同的事情：

var cached_blocks = jQuery(".block-link");
cached_blocks.hover(...);

如果您不打算重用
cached_块
，那么使用它不会有任何性能改进，因此您可以将代码简化为：

jQuery(".block-link").hover(...);

如果元素已经在页面上，我会将代码简化为：

var links = jQuery(".block-link");

var parts = {
    text: links.children("div.text"),
    image: links.children("div.image"),
    link: links.children("div.link"),
    icon: links.children("a.icon")
};

links.hover(function() {
    parts.text.animate(..);
    parts.image.animate(..);
    parts.link.animate(..);
    parts.icon.animate(..);
}, function() {
    parts.text.animate(..);
    parts.image.animate(..);
    parts.link.animate(..);
    parts.icon.animate(..);
});

如果不知道您想要做什么类型的动画，我无法再简化它，但我怀疑您也不需要太多调用来制作动画。
您似乎在毫无理由地重复代码

var cached_blocks = jQuery('.block-link');

cached_blocks.on('mouseenter mouseleave', function(e) {
    var this_block = jQuery(this),
        this_block_text = this_block.children('div.text'),
        this_block_image = this_block.children('div.image'),
        this_block_link = this_block.children('div.link'),
        this_block_link_icon = this_block.children('a.icon');

    this_block_text.animate({something: (e.type==='mouseenter' ? 0 : 400)});
    this_block_image.animate({top: (e.type==='mouseenter' ? 10 : 200)});
    this_block_link.animate({left: (e.type==='mouseenter' ? 300 : 40)});
    this_block_link_icon.animate({right: (e.type==='mouseenter' ? 0 : 1400)});
});

除非您正在使用包含文本/图像/链接的变量。。。元素也在其他地方，缓存它们只是为了与下一行的animate（）一起使用，这是浪费空间。
您似乎在毫无理由地重复代码

var cached_blocks = jQuery('.block-link');

cached_blocks.on('mouseenter mouseleave', function(e) {
    var this_block = jQuery(this),
        this_block_text = this_block.children('div.text'),
        this_block_image = this_block.children('div.image'),
        this_block_link = this_block.children('div.link'),
        this_block_link_icon = this_block.children('a.icon');

    this_block_text.animate({something: (e.type==='mouseenter' ? 0 : 400)});
    this_block_image.animate({top: (e.type==='mouseenter' ? 10 : 200)});
    this_block_link.animate({left: (e.type==='mouseenter' ? 300 : 40)});
    this_block_link_icon.animate({right: (e.type==='mouseenter' ? 0 : 1400)});
});

除非您正在使用包含文本/图像/链接的变量。。。元素也在其他地方，缓存它们只是为了与下一行的animate（）一起使用是浪费空间。
hover（）
很快就会出现。我建议您对两个鼠标事件都使用
on（）
。我不知道！谢谢，我将更新代码。好吧，至少事件处理程序的最开始很容易优化：当它已经是jQuery包装对象时，为什么要用
jQuery
调用包装
this\u块？大多数包装器调用也是如此。@elclars应该是：
.on（{mouseenter:fn1，mouseleave:fn2}），对吗？公平地说，我不认为您会通过艰苦地缓存它来获得显著的性能。您希望避免的是在整个文档上重新运行查询，或者在每次触发事件时重新运行相同的查询，而不是只运行一次。（也就是说，您希望将复杂性降低一个数量级，而不是在小范围内进行几次调用。）
hover（）
很快就会出现。我建议您对两个鼠标事件都使用
on（）
。我不知道！谢谢，我将更新代码。好吧，至少事件处理程序的最开始很容易优化：当它已经是jQuery包装对象时，为什么要用
jQuery
调用包装
this\u块？大多数包装器调用也是如此。@elclars应该是：
.on（{mouseenter:fn1，mouseleave:fn2}），对吗？公平地说，我不认为您会通过艰苦地缓存它来获得显著的性能。您希望避免的是在整个文档上重新运行查询，或者在每次触发事件时重新运行相同的查询，而不是只运行一次。（即，您希望将复杂性降低一个数量级，而不是在小范围内进行几次调用。）此外，@raina77ow确实与我的答案的结尾相关的建议，@raina77ow确实与我的答案的结尾相关的建议还有，@raina77ow确实与我的答案的结尾相关的建议代码的问题是，如果我这样做，每个块链接都会受到动画的影响，你的代码的问题是，如果我这样做，每个块链接都会受到动画的影响，而不是只发生在一个悬停的地方。