0

我正在尝试在我庞大的 javascript UI 应用程序中进行一些严重的延迟削减。我一直在阅读优化代码的方法,从我学到的一些东西中,我了解到:

  1. $(element).each() 让事情变慢
  2. 变量(和 HTML 对象)应该被缓存

这是我在应用程序中经常运行的函数中现有代码的一部分:

if($('.textbox').length > 0)
{   $(".textbox").each(function(){
             var parts = $(this).attr('id').split('_');
             // do some linear-time operations here with $this
            });
     });

到目前为止,我知道我应该把and only use放在$this = $(this)开头。但我还能做什么?有没有更快的替代方式来使用 .each()?我确实需要检查每个班级。.each()$(this) div.textbox

4

2 回答 2

1

您正在使用 jQuery,它在后面执行大量代码。最快的方法是原生 Javascript。

真正的小优化是 get the idfrom this。你也可以使用这个(Native JS)jQuery 来执行很多函数):

var parts = this.id.split('_'); 

例如
,尽可能快地获取所有元素。您可以使用此函数按类名获取元素:

if (document.getElementsByClassName == undefined) {
    document.getElementsByClassName = function(className)
    {
        var hasClassName = new RegExp("(?:^|\\s)" + className + "(?:$|\\s)");
        var allElements = document.getElementsByTagName("*");
        var results = [];

        var element;
        for (var i = 0; (element = allElements[i]) != null; i++) {
            var elementClass = element.className;
            if (elementClass && elementClass.indexOf(className) != -1 && hasClassName.test(elementClass))
                results.push(element);
        }

        return results;
    }
}

以及要循环的代码:

var elements = getElementsByClassName(".textbox");
for(var i=0;i<elements.length;i++)
{
    var splitid = elements[i].id.split("_");
}
于 2013-02-16T12:50:26.097 回答
1

但我还能做什么?

几件事:

  1. 你的陈述绝对没有意义if(除非它有一个else你没有显示的子句),因为调用.each一个空的 jQuery 对象是一个空操作。去掉它。

  2. 如果您不想删除它,至少缓存 DOM 查找的结果,因为每次调用$('.textbox')jQuery 都必须关闭并查询 DOM。

  3. id是 DOM 元素实例上的反射属性,因此$(this).attr("id").split('_')涉及多个函数调用和内存分配,您可以通过使用this.id.split('_').

所以这给了我们:

$('.textbox').each(function() {
    var parts = this.id.split('_');
    // Do something with `parts`
});

或者,如果else您没有显示:

var boxes = $('.textbox');
if (boxes.length) {
    boxes.each(function() {
        var part s= this.id.split('_');
        // ...
    });
}
else {
    // ...
}
于 2013-02-16T12:50:33.737 回答