【发布时间】：2021-10-28 04:16:48
【问题描述】：
我的网络应用程序有 jQuery 加载数据。作为一个网络应用程序，我所有的代码都被编译成一个文件。它经常被重复使用。文件大小和效率低下可能会严重降低我的网站性能和加载时间。
我的问题是：jQuery 是否有内置的冗余处理程序？ 我的示例涉及 .fadeIn() 函数。我不希望 $('.search-output') 在每次按下某个键时都“淡入”，但是，我不想添加 jQuery 已经自行处理的不需要的代码。
我假设 jQuery 确实可以自己处理这些冗余，因为在没有我的“如果可见”语句的情况下运行它时不存在动画。不过，它可能会运行其他会减慢我的 Web 应用程序的代码。在我自己的处理程序中对所有内容进行编码还是让 jQuery 自己处理是更好/更有效的编码实践吗？
我知道我可以查看 jQuery 代码，但你们可能会得到比是或否更有价值的输入。
$this.find('.search-input input').keyup(function() {
if ($(this).val() == '') {
$(this).parent().parent().parent().parent().find('.search-output').fadeOut(150)
} else {
if (!$(this).parent().parent().parent().parent().find('.search-output').is(':visible')) {
$(this).parent().parent().parent().parent().find('.search-output').fadeIn(150)
}
formData.append('request', 'req_search_users')
formData.append('searchString', $(this).val())
xhr_request(formData, open)
function open($status, $_rtn) {
if ($status == 200) {
$output = $this.find('.search-output')
$_rtn = $_rtn.split('|,')
if (parseInt($_rtn[0]) > 0) {
$output.append($_rtn[1]).ready(function() {
link_user_click($(this))
})
}
if (parseInt($_rtn[0]) < 3) {
$this.addClass('eof')
$this.find('.auto-loader').hide();
}
} else {
console.log('XHR POST: 404 Error')
}
}
}
})
这是我们正在查看的特定代码部分：
if (!$(this).parent().parent().parent().parent().find('.search-output').is(':visible')) {
$(this).parent().parent().parent().parent().find('.search-output').fadeIn(150)
}
这是我的第一篇堆栈溢出帖子。感谢您提供的任何意见！
【问题讨论】：
-
我发现 jQuery 的效率很高——jQuery 设计为在新旧浏览器上无需更改即可运行，因此无论如何速度都非常慢——话虽如此，您的代码可能会执行@ 987654323@ 在很多情况下两次（即如果满足条件） - 无论如何这都是低效的 - 如果 jQuery 已经处理了可见性测试，那么不要这样做
-
谢谢！我想切换到纯 JS，但现在我的网站 90% 都在 jquery 上运行，而且我还不直观地了解纯 js。我正处于时间紧缩状态，否则我会投入更多时间来转换一切。如果将 $(this).parent().parent().parent().parent().find('.search-output') 分配给一个变量并调用该变量两次怎么办？
-
当然，这更好-但您根本不需要检查可见性-我猜，无论如何，jQuery在内部与
.is(':visible')相同，因此您的if是多余的，可能效率较低 - 不过，最终用户不会注意到这种低效率 -
顺便说一下，首先要重写的是
$.each的任何使用...说真的，当我们将所有的都更改为forEach 或for 循环时，我们认为网站响应能力得到了很大改善我们一定是做错了什么，我们的网站不可能反应这么快
标签： javascript html jquery performance