Javascript 加快响应时间-在一个html页面上显示200多个产品

我有一个网页有超过8000行的html来呈现。 我将jquery同位素与imgLazyload结合使用，用于所有产品图像

这意味着所有可过滤的内容都在一个页面上。用这个

(function() {
    var $container = $("#isotopeContainer");

    $container.imagesLoaded(function() {
        $container.isotope({
            itemSelector: ".span3",
            layoutMode: "fitRows",
            onLayout: function() {
                $container.trigger("scroll");
            },
            getSortData: {
                price: function($elm) {
                    return $elm.data("price");
                },
                name: function($elm) {
                    return $elm.find(".isotope--title").text();
                },
                popularity: function($elm) {
                    return $elm.data("popularity");
                }
            }
        });

        // jQuery UI slider
        var prepareCurrency = function(value) {
            return WebMarketVars.currencyBefore ? WebMarketVars.currencySymbol + value : value + WebMarketVars.currencySymbol;
        };
        var $slider = $(".jqueryui-slider-container > div");
        $slider.slider({
            range: true,
            min: WebMarketVars.priceRange[0],
            max: WebMarketVars.priceRange[1],
            values: WebMarketVars.priceRange,
            step: WebMarketVars.priceStep,
            slide: function(ev, ui) {
                $(this).parent().siblings(".min-val").val(prepareCurrency(ui.values[0]));
                $(this).parent().siblings(".max-val").val(prepareCurrency(ui.values[1]));
            },
            change: function() {
                updateIsotopeFiltering();
            },
            create: function() {
                var $sliderParent = $(this).parents(".accordion-body");
                $sliderParent.find(".min-val").val(prepareCurrency($(this).slider("values", 0)));
                $sliderParent.find(".max-val").val(prepareCurrency($(this).slider("values", 1)));
            }
        });
        //  ========== 
        //  = Filters for sidebar = 
        //  ========== 
        var $selectableElms = $(".sidebar-filters .selectable");
        $selectableElms.click(function(ev) {
            ev.preventDefault();
            $(this).toggleClass("selected");
            updateIsotopeFiltering();
        });
        $(".sidebar-filters .accordion-toggle").click(function() {
            setTimeout(updateIsotopeFiltering, 350);
        });
        $("#removeFilters").click(function(ev) {
            ev.preventDefault();
            $selectableElms.removeClass("selected");
            updateIsotopeFiltering();
        });
        var updateIsotopeFiltering = function() {
            var selectedElms = $(".sidebar-filters .in").find(".selectable.selected[data-target]").not(".detailed"), detailedElms = $(".sidebar-filters .in").find(".detailed.selected[data-target]"), filterString, filter, types = [];
            if (selectedElms.length > 0 || detailedElms.length > 0) {
                $("#removeFilters").fadeIn();
            } else {
                $("#removeFilters").fadeOut();
            }
            if (selectedElms.length < 1) {
                filterString = ".isotope-container .span3";
            } else {
                var filterArr = [];
                selectedElms.each(function() {
                    var data = $(this).data("target");
                    if ("undefined" !== typeof data) {
                        filterArr.push($(this).data("target"));
                    }
                });
                filterString = filterArr.join(",");
            }
            // basic filtering
            filter = $(filterString);
            // slider price filtering, after we have the right categories already
            if ($slider.parents(".accordion-body").hasClass("in")) {
                filter = filter.filter(function() {
                    var $this = $(this);
                    return $this.data("price") >= $slider.slider("values", 0) && $this.data("price") <= $slider.slider("values", 1);
                });
            }
            // more precise filters for the size, color, brand ...
            detailedElms.each(function() {
                types.push($(this).data("type"));
            });
            types = _.uniq(types);
            if (detailedElms.length > 0) {
                _.each(types, function(type) {
                    var allowedValues = [];
                    detailedElms.filter('[data-type="' + type + '"]').each(function() {
                        allowedValues.push($(this).data("target"));
                    });
                    filter = filter.filter(function() {
                        var $this = $(this);
                        return _.some($this.data(type).split("|"), function(val) {
                            return _.contains(allowedValues, val);
                        });
                    });
                });
            }
            $container.isotope({
                filter: filter
            });
        };
        updateIsotopeFiltering();
        //  ========== 
        //  = Sorting = 
        //  ========== 
        $("#isotopeSorting").change(function() {
            var parameters = jQuery.parseJSON($(this).val());
            parameters.sortAscending = "true" === parameters.sortAscending ? true : false;
            $container.isotope(parameters);
        });
        $("#isotopeSorting").trigger("change");
    });
})();

$("img.lazy").lazyload({
    event: "scroll",
    effect : "fadeIn",
    threshold : 100,
    failure_limit: Math.max($("img.lazy").length - 1, 0)
});`

缩小HTML、CSS和JS被激活，所有渲染阻止内容都被移动到末尾。

---

我不想分页，因为那时同位素过滤将不再工作。有什么解决方案吗？

让您使用开发人员工具分析您的代码，什么花费的时间最多？你需要确定你的瓶颈。第一次请求时是11秒。Html页面。之后的剩余时间最多约为1秒。请参阅img:In Lazy Load XT plugin，它已通过添加layoutComplete事件得到修复：因此，我想“event:scroll layoutComplete”应该适用于您的情况。我实际上没有使用Lazy Load XT//或者它与迁移兼容吗？