Benchmark: Test Select Widget2

HTML Preparation code:

<div class="select-widget store">
    <div class="select-widget-loading">
      <img class="img-responsive" src="https://op-notify.carrefour.fr/fr/carrefour/b_plateformeagriculteurs2021_14122020dev/public/images/rolling_loading.gif" />
    </div>
    <div class="select-widget-head">
        <span data=""><em>Magasin</em> <i class="fa fa-angle-down"></i></span>
        <input type="text" placeholder="search" />
        <i class="fa fa-angle-up"></i>
    </div>
    <div class="select-widget-body">
        <span class="_default" data="">Magasin</span>
        <span data="1" class="inactive"><em>#1</em> Market Ambert<em class="_btn minus">-</em><em class="_btn plus">+</em></span>
        <span data="2" class="active"><em>#2</em> Market Lezoux<em class="_btn minus">-</em><em class="_btn plus">+</em></span>
        <span data="3" class="active"><em>#3</em> Carrefour Angers<em class="_btn minus">-</em><em class="_btn plus">+</em></span>
        <span data="4" class="inactive"><em>#4</em> Store 04<em class="_btn minus">-</em><em class="_btn plus">+</em></span>
        <span data="5" class="inactive"><em>#5</em> Store 05<em class="_btn minus">-</em><em class="_btn plus">+</em></span>
        <span data="6" class="active"><em>#6</em> Store 06<em class="_btn minus">-</em><em class="_btn plus">+</em></span>
        <span data="7" class="active"><em>#7</em> Store 07<em class="_btn minus">-</em><em class="_btn plus">+</em></span>
        <span data="8" class="active"><em>#8</em> Store 08<em class="_btn minus">-</em><em class="_btn plus">+</em></span>
        <span data="9" class="inactive"><em>#9</em> Store 09<em class="_btn minus">-</em><em class="_btn plus">+</em></span>
        <span data="10" class="active"><em>#10</em> Store 10<em class="_btn minus">-</em><em class="_btn plus">+</em></span>
        <span data="750" class="inactive"><em>#750</em> hey<em class="_btn minus">-</em><em class="_btn plus">+</em></span>
        <span data="751" class="inactive"><em>#751</em> Test Store 02<em class="_btn minus">-</em><em class="_btn plus">+</em></span>
        <span data="752" class="active"><em>#752</em> Test Store 03<em class="_btn minus">-</em><em class="_btn plus">+</em></span>
        <span data="753" class="inactive"><em>#753</em> Test Store 04<em class="_btn minus">-</em><em class="_btn plus">+</em></span>
        <span data="754" class="active"><em>#754</em> Test Store 05<em class="_btn minus">-</em><em class="_btn plus">+</em></span>
        <span data="991" class="inactive"><em>#991</em> Store 01<em class="_btn minus">-</em><em class="_btn plus">+</em></span>
        <span data="992" class="active"><em>#992</em> Store 02<em class="_btn minus">-</em><em class="_btn plus">+</em></span>
        <span data="993" class="inactive"><em>#993</em> Store 03<em class="_btn minus">-</em><em class="_btn plus">+</em></span>
    </div>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.js'></script>

Script Preparation code:

function setSelectWidget() {
  var self = this;

  $(".select-widget").click(function() {
    if (!$(this).hasClass("active")) {
      $(".select-widget.active").removeClass("active");

      $(this).addClass("active");

      $(this).find(".fa-angle-up").unbind();
      $(this).find(".fa-angle-up").click(function(e) {
        e.stopPropagation();

        $(this).parent().parent().removeClass("active");
        $(this).parent().find("input").val("");
        $(this).parent().parent().find(".select-widget-body span").show();
      });

      $(this).find("input").keyup(function() {
        var val = $(this).val().toString().toLowerCase();

        $(this).parent().parent().find(".select-widget-body > span").each(function() {
          var data = $(this).text().toString().toLowerCase();

          if (data.search(val) < 0)
            $(this).hide();
          else
            $(this).show();
        });
      });

      $(this).find(".select-widget-body > span").unbind();
      $(this).find(".select-widget-body > span").click(function(e) {
        e.stopPropagation();

        $(this).parent().parent().find(".select-widget-head > span > em").text($(this).text().replace('-+', ''));
        $(this).parent().parent().find(".select-widget-head > span").attr("data", $(this).attr("data"));
        $(this).parent().parent().removeClass("active");

        $(this).parent().parent().find(".select-widget-head input").val("");
        $(this).parent().find("span").show();
        $(this).parent().find('span').removeClass('active').removeClass('inactive');
        $(this).addClass('active');

        //self.selectChanged($(this).parent().parent().attr("class").replace("select-widget", "").trim());
      });

      $(this).find(".select-widget-body > span > em._btn.plus").unbind();
      $(this).find(".select-widget-body > span > em._btn.plus").click(function(e) {
        e.stopPropagation();

        $(this).parent().parent().parent().find(".select-widget-head > span > em").text($(this).parent().parent().parent().find(".select-widget-body > span").first().text().replace('-+', ''));
        $(this).parent().parent().parent().find(".select-widget-head > span").attr("data", $(this).parent().parent().parent().find(".select-widget-body > span").first().attr("data"));
        $(this).parent().parent().parent().find(".select-widget-head input").val("");

        if ($(this).parent().parent().parent().find(".select-widget-body > span.active").length || $(this).parent().parent().parent().find(".select-widget-body > span.inactive").length) {
          if (!$(this).parent().hasClass('active')) {
            if ($(this).parent().hasClass('inactive')) {
              if ($(this).parent().parent().parent().find(".select-widget-body > span.inactive").length == 1) {
                $(this).parent().parent().parent().find(".select-widget-body > span.active").removeClass('active');
                $(this).parent().parent().parent().find(".select-widget-body > span.inactive").removeClass('inactive');
              } else
                $(this).parent().removeClass('inactive').addClass('active');
            } else {
              if ($(this).parent().parent().find('span._default').hasClass('active')) {
                $(this).parent().parent().find('span._default').removeClass('active');
                $(this).parent().parent().parent().find(".select-widget-body > span").addClass('inactive');
              }

              $(this).parent().removeClass('inactive').addClass('active');
              $(this).parent().parent().parent().find(".select-widget-body > span").not('.active').addClass('inactive');
            }
          }
        } else {
          $(this).parent().parent().parent().find(".select-widget-body > span").addClass('inactive');
          $(this).parent().removeClass('inactive').addClass('active');
        }

        $(this).parent().parent().parent().find(".select-widget-body > span._default").removeClass('active').removeClass('inactive');

        if (!$(this).parent().parent().parent().find(".select-widget-body > span.active").length && !$(this).parent().parent().parent().find(".select-widget-body > span.inactive").length)
          $(this).parent().parent().parent().find(".select-widget-body > span._default").addClass('active');

        //self.selectChanged($(this).parent().parent().parent().attr("class").replace("select-widget", "").replace("active", "").trim());
      });

      $(this).find(".select-widget-body > span > em._btn.minus").unbind();
      $(this).find(".select-widget-body > span > em._btn.minus").click(function(e) {
        e.stopPropagation();

        $(this).parent().parent().parent().find(".select-widget-head > span > em").text($(this).parent().parent().parent().find(".select-widget-body > span").first().text().replace('-+', ''));
        $(this).parent().parent().parent().find(".select-widget-head > span").attr("data", $(this).parent().parent().parent().find(".select-widget-body > span").first().attr("data"));
        $(this).parent().parent().parent().find(".select-widget-head input").val("");

        if ($(this).parent().parent().parent().find(".select-widget-body > span.active").length || $(this).parent().parent().parent().find(".select-widget-body > span.inactive").length) {
          if (!$(this).parent().hasClass('inactive')) {
            if ($(this).parent().hasClass('active')) {
              if ($(this).parent().parent().parent().find(".select-widget-body > span.active").length == 1) {
                $(this).parent().parent().parent().find(".select-widget-body > span.active").removeClass('active');
                $(this).parent().parent().parent().find(".select-widget-body > span.inactive").removeClass('inactive');
              } else
                $(this).parent().removeClass('active').addClass('inactive');
            } else {
              if ($(this).parent().parent().find('span._default').hasClass('active')) {
                $(this).parent().parent().find('span._default').removeClass('active');
                $(this).parent().parent().parent().find(".select-widget-body > span").addClass('active');
              }

              $(this).parent().removeClass('active').addClass('inactive');
              $(this).parent().parent().parent().find(".select-widget-body > span").not('.inactive').addClass('active');
            }
          }
        } else {
          $(this).parent().parent().parent().find(".select-widget-body > span").addClass('active');
          $(this).parent().removeClass('active').addClass('inactive');
        }

        $(this).parent().parent().parent().find(".select-widget-body > span._default").removeClass('active').removeClass('inactive');

        if (!$(this).parent().parent().parent().find(".select-widget-body > span.active").length && !$(this).parent().parent().parent().find(".select-widget-body > span.inactive").length)
          $(this).parent().parent().parent().find(".select-widget-body > span._default").addClass('active');

        //self.selectChanged($(this).parent().parent().parent().attr("class").replace("select-widget", "").replace("active", "").trim());
      });
    }
  });
}

function setSelectWidget2() {
  var self = this;

  $(".select-widget").click(function() {
    var $selectWidget = $(this);

    if (!$selectWidget.hasClass("active")) {
      $(".select-widget.active").removeClass("active");

      var $selectWidgetHead = $selectWidget.find(".select-widget-head");
      var $selectWidgetBody = $selectWidget.find(".select-widget-body");
      var $closeIcon = $selectWidgetHead.find("i.fa-angle-up");
      var $searchInput = $selectWidgetHead.find("input");
      var $selectWidgetHeadItems = $selectWidgetHead.children("span");
      var $selectWidgetHeadItemsKeys = $selectWidgetHeadItems.children("em");
      var $selectWidgetBodyItems = $selectWidgetBody.children("span");
      var $selectWidgetBodyDefaultItem = $selectWidgetBodyItems.filter("._default");
      var $selectWidgetBodyItemsKeys = $selectWidgetBodyItems.children("em");
      var $selectWidgetBodyAddItemBtn = $selectWidgetBodyItemsKeys.filter(".plus");
      var $selectWidgetBodyRemoveItemBtn = $selectWidgetBodyItemsKeys.filter(".minus");

      $selectWidget.addClass("active");

      $closeIcon.off("click").on("click", function(e) {
        e.stopPropagation();

        $selectWidget.removeClass("active");
        $searchInput.val("");
        $selectWidgetBodyItems.show();
      });

      $searchInput.keyup(function() {
        var val = $(this).val().toString().toLowerCase();

        $selectWidgetBodyItems.each(function() {
          var data = $(this).text().toString().toLowerCase();

          if (data.search(val) < 0)
            $(this).hide();
          else
            $(this).show();
        });
      });

      $selectWidgetBodyItems.off("click").on("click", function(e) {
        e.stopPropagation();

        $selectWidgetHeadItems.children("em").text($(this).text().replace('-+', ''));
        $selectWidgetHeadItems.attr("data", $(this).attr("data"));
        $selectWidgetBody.removeClass("active");

        $searchInput.val("");
        $selectWidgetBodyItems.show().removeClass('active inactive');
        $(this).addClass('active');

        //self.selectChanged($(this).parent().parent().attr("class").replace("select-widget", "").trim());
      });

      $selectWidgetBodyAddItemBtn.off("click").on("click", function(e) {
        e.stopPropagation();

        var $currentItem = $(this).parent();
        var $activeItems = $selectWidgetBodyItems.filter(".active");
        var $inactiveItems = $selectWidgetBodyItems.filter(".inactive");

        var activeItemsLength = $activeItems.length;
        var inactiveItemsLength = $inactiveItems.length;

        $selectWidgetHeadItemsKeys.text($selectWidgetBodyItems.first().text().replace('-+', ''));
        $selectWidgetHeadItems.attr("data", $selectWidgetBodyItems.first().attr("data"));
        $searchInput.val("");

        if (activeItemsLength || inactiveItemsLength) {
          if (!$currentItem.hasClass('active')) {
            if ($currentItem.hasClass('inactive')) {
              if (inactiveItemsLength == 1) {
                $activeItems.removeClass('active');
                $inactiveItems.removeClass('inactive');
              } else
                $currentItem.removeClass('inactive').addClass('active');
            } else {
              if ($selectWidgetBodyDefaultItem.hasClass('active')) {
                $selectWidgetBodyDefaultItem.removeClass('active');
                $selectWidgetBodyItems.addClass('inactive');
              }

              $currentItem.removeClass('inactive').addClass('active');
              $selectWidgetBodyItems.not('.active').addClass('inactive');
            }
          }
        } else {
          $selectWidgetBodyItems.addClass('inactive');
          $currentItem.removeClass('inactive').addClass('active');
        }

        $selectWidgetBodyDefaultItem.removeClass('active inactive');

        if (!activeItemsLength && !inactiveItemsLength)
          $selectWidgetBodyDefaultItem.addClass('active');

        //self.selectChanged($(this).parent().parent().parent().attr("class").replace("select-widget", "").replace("active", "").trim());
      });

      $selectWidgetBodyRemoveItemBtn.off("click").on("click", function(e) {
        e.stopPropagation();

        var $currentItem = $(this).parent();
        var $activeItems = $selectWidgetBodyItems.filter(".active");
        var $inactiveItems = $selectWidgetBodyItems.filter(".inactive");

        var activeItemsLength = $activeItems.length;
        var inactiveItemsLength = $inactiveItems.length;

        $selectWidgetHeadItemsKeys.text($selectWidgetBodyItems.first().text().replace('-+', ''));
        $selectWidgetHeadItems.attr("data", $selectWidgetBodyItems.first().attr("data"));
        $searchInput.val("");

        if (activeItemsLength || inactiveItemsLength) {
          if (!$currentItem.hasClass('inactive')) {
            if ($currentItem.hasClass('active')) {
              if (activeItemsLength == 1) {
                $activeItems.removeClass('active');
                $inactiveItems.removeClass('inactive');
              } else
                $currentItem.removeClass('active').addClass('inactive');
            } else {
              if ($selectWidgetBodyDefaultItem.hasClass('active')) {
                $selectWidgetBodyDefaultItem.removeClass('active');
                $selectWidgetBodyItems.addClass('active');
              }

              $currentItem.removeClass('active').addClass('inactive');
              $selectWidgetBodyItems.not('.inactive').addClass('active');
            }
          }
        } else {
          $selectWidgetBodyItems.addClass('active');
          $currentItem.removeClass('active').addClass('inactive');
        }

        $selectWidgetBodyDefaultItem.removeClass('active inactive');

        if (!activeItemsLength && !inactiveItemsLength)
          $selectWidgetBodyDefaultItem.addClass('active');

        //self.selectChanged($(this).parent().parent().parent().attr("class").replace("select-widget", "").replace("active", "").trim());
      });
    }
  });
}

Tests:

Before refactor
setSelectWidget(); $('.select-widget.stores').click(); $('.select-widget-body span[data="750"]').click(); $('.select-widget-body span[data="751"] > ._plus').click(); $('.select-widget-body span[data="10"] > ._minus').click(); $('.select-widget-head .fa-angle-up').click();
After refactor
setSelectWidget2(); $('.select-widget.stores').click(); $('.select-widget-body span[data="750"]').click(); $('.select-widget-body span[data="751"] > ._plus').click(); $('.select-widget-body span[data="10"] > ._minus').click(); $('.select-widget-head .fa-angle-up').click();

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Before refactor
After refactor

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 2 years ago)

User agent: Mozilla/5.0 (X11; Linux x86_64; rv:121.0) Gecko/20100101 Firefox/121.0

Browser/OS: Firefox 121 on Linux

View result in a separate tab

After refactor

2K/s

Before refactor

2K/s

View exact numbers

Test name	Executions per second
✓ After refactor	2,188 Ops/sec
Before refactor	2,090 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

LLMs can make mistakes. Check important info.

I'll do my best to analyze the provided HTML code and benchmark data.

The HTML code appears to be a dropdown menu with various store options, each represented by a `<span>` element with a unique `data` attribute. The code also includes a click event on several elements, including the dropdown header (`._plus`), minus button (`_minus`), plus button (`_plus`), and an angle-up icon (`fa-angle-up`).

The benchmark data consists of two test cases: "Before refactor" and "After refactor". Each test case has a unique `ExecutionsPerSecond` value, indicating the number of executions per second for each test.

Based on this information, I'll provide an answer. Keep in mind that this is just an analysis, and actual performance differences may vary depending on various factors.

**Performance Comparison**

Comparing the two benchmark results:

* "Before refactor": 2089.9189453125 executions per second
* "After refactor": 2187.710205078125 executions per second

The "After refactor" test case performs slightly better than the "Before refactor" test case, with an increase of approximately 5.8% in execution speed.

**Potential Improvements**

To further optimize performance, consider the following suggestions:

1. **Minimize DOM manipulation**: Reducing the number of DOM elements and manipulation operations can improve performance.
2. **Use caching**: Implementing caching for frequently accessed data can reduce the load on the browser's memory and processing power.
3. **Optimize event handling**: Review event handling code to ensure that it is efficient and well-structured, minimizing unnecessary computations or reflows.

**Conclusion**

The provided benchmark data suggests a slight performance improvement in the "After refactor" test case. By applying some basic optimization techniques, further enhancements may be achievable, leading to even better performance in your application.

Test Select Widget2 (version: 0) Benchmark.js

Comparing performance of: `Before refactor vs After refactor`

Created: 5 years ago by: Guest

Go to the latest result

Before refactor

After refactor

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

Test Select Widget2 (version: 0) Benchmark.js

Comparing performance of: Before refactor vs After refactor

Created: 5 years ago by: Guest

Go to the latest result

Before refactor

After refactor

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

Comparing performance of: `Before refactor vs After refactor`