获取Blogger文章价格时如何避免加载全部内容以优化性能？

我希望从Blogger帖子的strike标签中提取价格信息并展示在首页，但当前实现会加载帖子的全部内容（包括图片），导致页面加载缓慢。我使用的代码如下，请问是否存在其他方法可以在不加载全部内容的情况下实现该需求？

$('.price-offer').each(function() {
        var $this = $(this),
            $id = $this.data('id');
        $.ajax({
            url: '/feeds/posts/default/' + $id + '?alt=json',
            type: 'get',
            dataType: 'jsonp',
            success: function(a) {
                var $e = a.entry.content.$t,
                    $c = $("<div>").html($e),
                    $s_price = $c.find('strike:contains("price/")'),
                    $s_off = $c.find('strike:contains("off/")');
                if($s_price.length > 0) {
                    var $text = $s_price.text(),
                        $sp = $text.split('/'),
                        $price = $sp[1];
                    $this.find('.theprice').text($price).parent().addClass('show');
                }
                if($s_off.length > 0) {
                    var $text = $s_off.text(),
                        $sp = $text.split('/'),
                        $off = $sp[1];
                    $this.find('.theoffer').text($off).addClass('show');
                }
            }
        });
    });

可行的优化方案 #

1. 改用Feed的摘要字段替代完整内容

Blogger的JSON Feed提供了summary字段，仅包含帖子的摘要内容（体积远小于完整content）。如果你的价格信息位于帖子开头（摘要可覆盖），可以直接替换字段：

$('.price-offer').each(function() {
    var $this = $(this),
        $id = $this.data('id');
    $.ajax({
        url: '/feeds/posts/default/' + $id + '?alt=json',
        type: 'get',
        dataType: 'jsonp',
        success: function(a) {
            // 替换为summary字段
            var $e = a.entry.summary.$t,
                $c = $("<div>").html($e),
                $s_price = $c.find('strike:contains("price/")'),
                $s_off = $c.find('strike:contains("off/")');
            
            // 后续提取逻辑保持不变
            if($s_price.length > 0) {
                var $text = $s_price.text(),
                    $sp = $text.split('/'),
                    $price = $sp[1];
                $this.find('.theprice').text($price).parent().addClass('show');
            }
            if($s_off.length > 0) {
                var $text = $s_off.text(),
                    $sp = $text.split('/'),
                    $off = $sp[1];
                $this.find('.theoffer').text($off).addClass('show');
            }
        }
    });
});

2. 正则直接匹配HTML字符串，跳过DOM解析

直接对HTML文本进行正则提取，不需要将内容转换为DOM对象——这样浏览器不会自动加载图片资源，性能提升最显著：

$('.price-offer').each(function() {
    var $this = $(this),
        $id = $this.data('id');
    $.ajax({
        url: '/feeds/posts/default/' + $id + '?alt=json',
        type: 'get',
        dataType: 'jsonp',
        success: function(a) {
            var contentHtml = a.entry.content.$t;
            
            // 匹配带price/的strike标签内容
            const priceMatch = contentHtml.match(/<strike[^>]*>.*?price\/(.*?)<\/strike>/i);
            if(priceMatch && priceMatch[1]) {
                $this.find('.theprice').text(priceMatch[1]).parent().addClass('show');
            }
            
            // 匹配带off/的strike标签内容
            const offMatch = contentHtml.match(/<strike[^>]*>.*?off\/(.*?)<\/strike>/i);
            if(offMatch && offMatch[1]) {
                $this.find('.theoffer').text(offMatch[1]).addClass('show');
            }
        }
    });
});

3. 合并批量请求，减少HTTP开销

如果首页有多个需要提取价格的帖子，可利用Blogger Feed的ids参数一次性请求多个帖子，减少AJAX请求数量：

// 先收集所有目标帖子ID
var postIds = $('.price-offer').map(function() {
    return $(this).data('id');
}).get();

// 发起批量请求
$.ajax({
    url: '/feeds/posts/default?alt=json&ids=' + postIds.join(','),
    type: 'get',
    dataType: 'jsonp',
    success: function(a) {
        a.entry.forEach(function(entry) {
            // 从entry ID中提取帖子ID
            var postId = entry.id.$t.split('/').pop();
            var $target = $('.price-offer[data-id="' + postId + '"]');
            var contentHtml = entry.content.$t;
            
            // 正则提取价格和优惠信息
            const priceMatch = contentHtml.match(/<strike[^>]*>.*?price\/(.*?)<\/strike>/i);
            if(priceMatch && priceMatch[1]) {
                $target.find('.theprice').text(priceMatch[1]).parent().addClass('show');
            }
            
            const offMatch = contentHtml.match(/<strike[^>]*>.*?off\/(.*?)<\/strike>/i);
            if(offMatch && offMatch[1]) {
                $target.find('.theoffer').text(offMatch[1]).addClass('show');
            }
        });
    }
});

内容的提问来源于stack exchange，提问作者Saif Almisry