改进AJAX响应处理功能

时间:2013-07-23 20:41:13

标签: javascript jquery ajax optimization

此代码处理来自RSS提要的响应。它组织和附加内容。如果嵌入了视频,则将其与其他内容分开。我想主要关于性能/效率的评论,但我也对任何其他建议持开放态度。那个明星选择器真的在唠叨我,但我不知道有更好的方法来迭代所有包含的元素。

function getFeed(url, element, callback) {
    $.getJSON("https://ajax.googleapis.com/ajax/services/feed/load?v=1.0&callback=?&q="+encodeURIComponent(url), function(response) {
        var content = "",
            $element = $(element);

        for (var i = 0; i < response.responseData.feed.entries.length; i++) {
            content = content + response.responseData.feed.entries[i].content; //Join all the feed entries
        }

        $element.find(".content").html(content).addClass($element.find("embed").length? "withVideo" : "");

        $element.find("*").each(function() {
            var $this = $(this);

            $this.removeAttr("style width align"); //Reset all the crap that comes with the response

            if ($this.is("embed")) {
                $element.append("<div class='video'></div>");
                $this.attr("width", 640).attr("height", 360).parent().appendTo(element + " .video");
            };
        });

        if (typeof callback === 'function') {
            callback();
        };
    });
}

然后这样调用:

getFeed("http://www.kent.k12.wa.us/site/RSS.aspx?PageID=3854", "#TechExpo", optionalCallback);

这是响应的样子

<div width="500" style="whatever"><p>Some text blah blah blah.</p>
<p align="right">Some more text</p>
</div>
<div><h2>Video Title</h2>
<embed src="http://..." width="360" height="202" type="application/x-shockwave-flash"></embed>
<small>Watch the 7th annual Tech Expo highlights.</small></div>

1 个答案:

答案 0 :(得分:1)

首先:不要在for语句中使用“.length”。这样,它将计算循环中每次传递期间的项目数。

var responseCount = response.responseData.feed.entries.length;
for (var i = 0; i < responseCount, i++) {
...
}

其次,我不确定这是一个非常好的想法(至少在性能方面):

$element.find("*")

你肯定可以优化这个!

性能/效率通常比单一功能更进一步。如果使用不当,jQuery可能会导致性能大幅下降。 根据项目的范围,您可以尝试以下方法:

  • 考虑版本jQuery 2. *它更小更快(但缺乏向后兼容性)
  • 考虑使用jQuery的自定义构建。
  • 您应用程序范围内的浏览器是否支持querySelector?如果是这样,你可能甚至不需要jQuery ......
  • 考虑延迟加载代码脚本以加快页面的加载时间

本网站包含一个非常好的清单,供进一步阅读: http://browserdiet.com/#js