jQuery码优化

Question

背景

我开发了一个基于jQuery的应用程序，这个应用程序生成对服务器的ajax调用，以JSON格式获取信息，并根据接收到的信息绘制DIV和生成HTML结构。

细节

• 我在这个应用程序中使用了一些动画效果来显示JSON数据
• JSON数据一次可能包含最大1000条记录(大小< 1MB)
• 每个记录显示在网页摘要视图和当用户客户端在记录，然后这个DIV展开使用jQuery.animation()，并加载它的细节
• “信息摘要”只包含一行，详细信息包含大约4或5行。
• 它具有拖放功能
• 它改变HTML上的(水平/垂直)滚动移动
• 它同时加载所有数据(摘要和详细信息)。

实际问题

在客户需求的基础上，现在我要在这个自定义应用程序中添加更多的特性。问题是，现在我的浏览器速度越来越慢，有时它被拿着。如何提高代码的性能。

• 我的浏览器越来越慢了
• 动画不能正常工作。它缺少动画帧

我不能修改我的全部代码。因为它很长，而且有很多特点。我大约在6个月内开发了这个应用程序。所以，对我来说，更改所有的代码将是一项繁忙的工作。

优化jQuery应用程序代码的最佳方法是什么？

解决方案我找到了

我在互联网上找到了几个优化jQuery代码的解决方案。-与大多数情况一样，尝试使用id选择器或标记选择器-避免从元素遍历-.诸如此类

在实现这些技术之后。我的代码性能下降了，甚至现在我的系统也被搁置了。

我想要什么

• 是否有任何可用的工具可以识别代码行。这可能会导致缓慢。
• 有什么工具可以优化我的代码吗？
• 还有其他你推荐的方法.？

我在前端开发中使用了firebug，但是没有这样的选择来解决这个问题。

额外信息

我正在开发的系统

• 4 GB RAM
• 谷歌Chrome和Mozilla Firefox
• FireBug

Answer 1

使用类似于JSLitmus的工具对JS函数进行基准测试，通过这样做，您可以进行调整并对代码进行微调以获得最佳性能。

对于常用的jQuery选择器，将其存储为变量和引用，以便jQuery只需要处理一次选择器代码，例如：

var elem = $(this);
elem.addClass('woo');
var href = elem.attr('href');

我还建议阅读此页，以获得有关jQuery动画定时间隔的一些有用信息。希望这能有所帮助！