Compare tester

JavaScript performance comparison

Test case created

Preparation code

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
 

Preparation code output

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
test1
$(function () {
    "use strict";
    var productArr = [],
        productsToCompareArr = [],
        productOrder = 0,
        maxComparisons = 3,
        reachedMax = false,
        buildComparisons = {
            checkComparisons: function (prodId, requestType, chkBoxIndex) {
                if (productsToCompareArr.length >= maxComparisons && requestType === "add") {
                    reachedMax = true;
                    $('#cm-ProductListForm input:checkbox:eq(' + chkBoxIndex + ')').attr('checked', false).parent().removeClass('checked');
                } else {
                    reachedMax = false;
                }
                buildComparisons.createComparisons(prodId, requestType, chkBoxIndex, reachedMax);
            },
            createComparisons: function (prodId, requestType, chkBoxIndex, reachedMax) {
                $('.cm-imagePaneInner').empty();
                var tempObj = {
                    compareProductId: prodId,
                    checkboxIdx: chkBoxIndex
                };

                if (reachedMax === false) {
                    if (requestType === "add") productsToCompareArr.push(tempObj);
                    else if (requestType === "remove") buildComparisons.removeComparison(prodId);
                } else if (reachedMax === true) {
                    tooltip.generateTooltip(chkBoxIndex);
                }
                buildComparisons.displayComparisons();
            },
            displayComparisons: function () {
                for (var i = 0; i < productsToCompareArr.length; i++) {
                    $('.cm-imagePaneInner:eq(' + i + ')').html('<span class="cm-icon cm-iconRemove removeProduct" data-value="' + productsToCompareArr[i].compareProductId + '">Click to remove</span><img src="images/products/66x66/product-' + productsToCompareArr[i].compareProductId + '.jpg">');
                }
            },
            removeComparison: function (prodToRemove) {
                $('.cm-imagePaneInner').empty();
                for (var i = 0; i < productsToCompareArr.length; i++) {
                    if (productsToCompareArr[i].compareProductId && productsToCompareArr[i].compareProductId == prodToRemove) {
                        $('#cm-ProductListForm input:checkbox:eq(' + productsToCompareArr[i].checkboxIdx + ')').attr('checked', false).parent().removeClass('checked');
                        productsToCompareArr.splice(i, 1);
                        break;
                    }
                }
            }
        },
        tooltip = {
            attachTooltip: function () {
                /*jshint multistr: true */
                $('#cm-ProductListForm').append('<div id="overlayComparisons" class="cm-overlay compareOverlay brandOverlay cm-hide "> \
                        <span id="cmCloseTooltip" class="cm-icon cm-close closeToolTip"></span><div class="cm-compare-content"></div></div>'
);
                $(".cm-compare-content").load("overlay.html");
            },
            generateTooltip: function (chkBoxNum) {
                $('.max-comparison-items ul').empty();
                var position = $('#cm-ProductListForm input:checkbox:eq(' + chkBoxNum + ')').offset();
                $(".cm-overlay").removeClass('cm-hide').offset({
                    left: position.left - 92,
                    top: position.top - 455
                });
                $(".cm-imagePane, .cm-imagePaneInner").show();

                $.ajax({
                    data: null,
                    dataType: 'html',
                    success: function (data) {
                        for (var i = 0; i < productsToCompareArr.length; i++) {
                            for (var k in productArr) {
                                if (productsToCompareArr[i].compareProductId == productArr[k].id) {
                                    var source = $(".compareOverlayItem");
                                    var template = Handlebars.compile(source.html());

                                    $(".compareContent ul").append(template(productArr[k]));
                                }
                            }
                        }
                    }
                });

            },
            hideTooltip: function (e, closeBtnId, tooltipId) {
                jQuery('#' + closeBtnId).click(function () {
                    $(this).data('clicked', true);
                });
                if (jQuery('#' + closeBtnId).data('clicked')) {
                    $('#' + tooltipId).addClass('cm-hide');
                    $('#' + closeBtnId).data('clicked', false);
                } else if (e.target.id == tooltipId || $(e.target).parents('#' + tooltipId).size()) {
                    $('#' + tooltipId).removeClass('cm-hide');
                } else {
                    $('#' + tooltipId).addClass('cm-hide');
                }
            }
        };

    $('#cm-ProductListForm .cm-listedProduct').each(function () {
        //Using part of image name as ID, as this is the only unique identifier found, based on html and image directory
        var productId = $(this).find('img').attr('src').match(/(\w*)\.\w{3,4}$/)[1],
            productTitle = $(this).find('.cm-listedProduct_title').text();
        var tempObj = {
            id: productId,
            title: productTitle,
            prodOrder: productOrder
        };
        productOrder++;
        productArr.push(tempObj);
    });


    $(document).on('click', '#cm-ProductListForm input:checkbox, .max-comparison-items ul input:checkbox', function () {
        var productChk = $('#cm-ProductListForm input:checkbox'),
            selectedChk;
        if ($(this).parent().attr('class') == "cm-overlay-checkbox" || $(this).parent().attr('class') == "cm-checkbox") {
            selectedChk = $(this).attr('value');
        } else if ($(this).parent().attr('class') === "checked" || $(this).parent().attr('class') === "") {
            selectedChk = productChk.index(this);
        }

        //$('.cm-imagePaneInner:eq( 1 )').html(productArr[selectedChk].title);
        if ($(this).is(":checked")) {
            buildComparisons.checkComparisons(productArr[selectedChk].id, "add", selectedChk);
        } else {
            buildComparisons.checkComparisons(productArr[selectedChk].id, "remove", selectedChk);
        }
        console.log(productsToCompareArr);
    });

    $(document).on('click', '.removeProduct', function () {
        buildComparisons.removeComparison($(this).attr('data-value'));
        buildComparisons.displayComparisons();
        console.log(productsToCompareArr);
    });

    tooltip.attachTooltip();

    $('body').on('click', function (e) {
        tooltip.hideTooltip(e, "cmCloseTooltip", "overlayComparisons");
    });
});
pending…
test2
$(function () {
    "use strict";
    var productArr = [],
        productsToCompareArr = [],
        productOrder = 0,
        maxComparisons = 3,
        reachedMax = false,
        buildComparisons = {
            checkComparisons: function (prodId, requestType, chkBoxIndex) {
                if (productsToCompareArr.length >= maxComparisons && requestType === "add") {
                    reachedMax = true;
                    $('#cm-ProductListForm input:checkbox:eq(' + chkBoxIndex + ')').attr('checked', false).parent().removeClass('checked');
                } else {
                    reachedMax = false;
                }
                buildComparisons.createComparisons(prodId, requestType, chkBoxIndex, reachedMax);
            },
            createComparisons: function (prodId, requestType, chkBoxIndex, reachedMax) {
                $('.cm-imagePaneInner').empty();
                var tempObj = {
                    compareProductId: prodId,
                    checkboxIdx: chkBoxIndex
                };

                if (reachedMax === false) {
                    if (requestType === "add") productsToCompareArr.push(tempObj);
                    else if (requestType === "remove") buildComparisons.removeComparison(prodId);
                } else if (reachedMax === true) {
                    tooltip.generateTooltip(chkBoxIndex);
                }
                buildComparisons.displayComparisons();
            },
            displayComparisons: function () {
                for (var i = 0; i < productsToCompareArr.length; i++) {
                    $('.cm-imagePaneInner:eq(' + i + ')').html('<span class="cm-icon cm-iconRemove removeProduct" data-value="' + productsToCompareArr[i].compareProductId + '">Click to remove</span><img src="images/products/66x66/product-' + productsToCompareArr[i].compareProductId + '.jpg">');
                }
            },
            removeComparison: function (prodToRemove) {
                $('.cm-imagePaneInner').empty();
                for (var i = 0; i < productsToCompareArr.length; i++) {
                    if (productsToCompareArr[i].compareProductId && productsToCompareArr[i].compareProductId == prodToRemove) {
                        $('#cm-ProductListForm input:checkbox:eq(' + productsToCompareArr[i].checkboxIdx + ')').attr('checked', false).parent().removeClass('checked');
                        productsToCompareArr.splice(i, 1);
                        break;
                    }
                }
            }
        },
        tooltip = {
            attachTooltip: function () {
                /*jshint multistr: true */
                $('#cm-ProductListForm').append('<div id="overlayComparisons" class="cm-overlay compareOverlay brandOverlay cm-hide "> \
                        <span id="cmCloseTooltip" class="cm-icon cm-close closeToolTip"></span><div class="cm-compare-content"></div></div>'
);
                $(".cm-compare-content").load("overlay.html");
            },
            generateTooltip: function (chkBoxNum) {
                $('.max-comparison-items ul').empty();
                var position = $('#cm-ProductListForm input:checkbox:eq(' + chkBoxNum + ')').offset();
                $(".cm-overlay").removeClass('cm-hide').offset({
                    left: position.left - 92,
                    top: position.top - 455
                });
                $(".cm-imagePane, .cm-imagePaneInner").show();

                $.ajax({
                    data: null,
                    dataType: 'html',
                    success: function (data) {
                        for (var i = 0; i < productsToCompareArr.length; i++) {
                            for (var k in productArr) {
                                if (productsToCompareArr[i].compareProductId == productArr[k].id) {
                                    var source = $(".compareOverlayItem");
                                    var template = Handlebars.compile(source.html());

                                    $(".compareContent ul").append(template(productArr[k]));
                                }
                            }
                        }
                    }
                });

            },
            hideTooltip: function (e, closeBtnId, tooltipId) {
                jQuery('#' + closeBtnId).click(function () {
                    $(this).data('clicked', true);
                });
                if (jQuery('#' + closeBtnId).data('clicked')) {
                    $('#' + tooltipId).addClass('cm-hide');
                    $('#' + closeBtnId).data('clicked', false);
                } else if (e.target.id == tooltipId || $(e.target).parents('#' + tooltipId).size()) {
                    $('#' + tooltipId).removeClass('cm-hide');
                } else {
                    $('#' + tooltipId).addClass('cm-hide');
                }
            }
        };

    $('#cm-ProductListForm .cm-listedProduct').each(function () {
        //Using part of image name as ID, as this is the only unique identifier found, based on html and image directory
        var productId = $(this).find('img').attr('src').match(/(\w*)\.\w{3,4}$/)[1],
            productTitle = $(this).find('.cm-listedProduct_title').text();
        var tempObj = {
            id: productId,
            title: productTitle,
            prodOrder: productOrder
        };
        productOrder++;
        productArr.push(tempObj);
    });


    $(document).on('click', '#cm-ProductListForm input:checkbox, .max-comparison-items ul input:checkbox', function () {
        var productChk = $('#cm-ProductListForm input:checkbox'),
            selectedChk;
        if ($(this).parent().attr('class') == "cm-overlay-checkbox" || $(this).parent().attr('class') == "cm-checkbox") {
            selectedChk = $(this).attr('value');
        } else if ($(this).parent().attr('class') === "checked" || $(this).parent().attr('class') === "") {
            selectedChk = productChk.index(this);
        }

        //$('.cm-imagePaneInner:eq( 1 )').html(productArr[selectedChk].title);
        if ($(this).is(":checked")) {
            buildComparisons.checkComparisons(productArr[selectedChk].id, "add", selectedChk);
        } else {
            buildComparisons.checkComparisons(productArr[selectedChk].id, "remove", selectedChk);
        }
        console.log(productsToCompareArr);
    });

    $(document).on('click', '.removeProduct', function () {
        buildComparisons.removeComparison($(this).attr('data-value'));
        buildComparisons.displayComparisons();
        console.log(productsToCompareArr);
    });

    tooltip.attachTooltip();

    $('body').on('click', function (e) {
        tooltip.hideTooltip(e, "cmCloseTooltip", "overlayComparisons");
    });
});
pending…

You can edit these tests or add even more tests to this page by appending /edit to the URL.

Compare results of other browsers

0 comments

Add a comment