Benchmark: Web templating CSR benchmark

HTML Preparation code:

<script src='https://aui.github.io/art-template/js/template-engines/template-web.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.min.js'></script>
<script src="https://code.jquery.com/jquery-3.7.0.min.js" integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>

<div class="top-item-container">
  <div class="top-item-list mb-4 p-1 grid grid-cols-2 gap-2 sm:grid-cols-3 sm:gap-3 lg:grid-cols-5 lg:gap-4">
  </div>
</div>

<template class="myTemplate-items">
    {{each items item}}
    <div class="top-item">
      <a href="{{item.encodedUrl}}">
        <div class="item-img-container">
          <img src="{{item.image}}" alt="item image" class="img-responsive item-img" />
        </div>
        <div class="item-info">
          <div class="item-name">{{item.name}}</div>
          <div class="item-price-before">
            <span class="item-price-before-discount">{{item.priceBeforeDiscountFormatted}}</span>
            {{if item.discount}}
            <span class="item-discount">Giảm {{item.discount}}</span>
            {{/if}}
          </div>
          <div class="item-price"><span class="item-price-dollar-sign">₫
            </span>{{item.priceFormatted}}</div>
        </div>
        <div class="item-bottom-info"><span class="item-update-time">Cập
            nhật
            {{item.updateTime}}</span></div>
      </a>
    </div>
    {{/each}}
  </template>
<script type="text/html" class="myTemplate-items-lodash">
<% _.forEach(items, function(item) { %>
              
              <div class="top-item">
      <a href="<%- item.encodedUrl %>">
        <div class="item-img-container">
          <img src="<%- item.image %>" alt="item image" class="img-responsive item-img" />
        </div>
        <div class="item-info">
          <div class="item-name"><%- item.name %></div>
          <div class="item-price-before">
            <span class="item-price-before-discount"><%- item.priceBeforeDiscountFormatted %></span>
            <% if (item.discount) { %>
            <span class="item-discount">Giảm <%- item.discount %></span>
            <% } %>
          </div>
          <div class="item-price"><span class="item-price-dollar-sign">₫
            </span><%- item.priceFormatted %></div>
        </div>
        <div class="item-bottom-info"><span class="item-update-time">Cập
            nhật
            <%- item.updateTime %></span></div>
      </a>
    </div>
              
		<% }); %> 
  </script>

Script Preparation code:

var topItemArr = [{"itemid":4147066943,"lastutime":1684035274,"name":"Loa Bluetooth Di Động LG Xboom Go PL5 - Hàng Chính Hãng - Màu Xanh Đen","historicalSold":2121,"priceBeforeDiscount":359000000000,"discount":"58%","image":"vn-11134207-23030-v7wvjjpzilovc4","shopid":95303264,"rawDiscount":58,"priceMin":149000000000,"priceMax":149000000000,"price":149000000000,"encodedUrl":"/Loa-Bluetooth-Di-Động-LG-Xboom-Go-PL5---Hàng-Chính-Hãng---Màu-Xanh-Đen-i.95303264.4147066943","priceFormatted":"1.490.000","priceBeforeDiscountFormatted":"3.590.000","updateTime":"9 giờ trước"},{"itemid":13328972589,"lastutime":1684035247,"name":"[Quà 450K] Bút cảm ứng iPad Stylus AstroMazing Pencil 2 Pro dành cho iPad Pro 11 12.9 Gen 6 7 8 9 10 Air 4 5 Mini","historicalSold":10633,"priceBeforeDiscount":30000000000,"discount":"50%","image":"vn-11134207-7qukw-lfytaevs5urb9b","shopid":320823232,"rawDiscount":50,"priceMin":16900000000,"priceMax":82500000000,"price":16900000000,"encodedUrl":"/Quà-450K-Bút-cảm-ứng-iPad-Stylus-AstroMazing-Pencil-2-Pro-dành-cho-iPad-Pro-11-129-Gen-6-7-8-9-10-Air-4-5-Mini-i.320823232.13328972589","priceFormatted":"169.000","priceBeforeDiscountFormatted":"300.000","updateTime":"9 giờ trước"},{"itemid":3128848850,"lastutime":1684035477,"name":"[ Hàng Chính Hãng ] Đồng hồ LED 3D treo tường, để bàn thông minh TN828 Smart Clock","historicalSold":28912,"priceBeforeDiscount":19000000000,"discount":"48%","image":"32940a873571b4302c3b0ea8afe3912d","shopid":135364709,"rawDiscount":48,"priceMin":9950000000,"priceMax":11990000000,"price":9950000000,"encodedUrl":"/-Hàng-Chính-Hãng--Đồng-hồ-LED-3D-treo-tường-để-bàn-thông-minh-TN828-Smart-Clock-i.135364709.3128848850","priceFormatted":"99.500","priceBeforeDiscountFormatted":"190.000","updateTime":"9 giờ trước"}];

Tests:

art template
$(document).ready(function () { var myTemplate; myTemplate = $(".myTemplate-items").html(); $(".top-item-container .top-item-list").html(template.render(myTemplate, { items: topItemArr })); });
lodash template
$(document).ready(function () { var myTemplate; myTemplate = $(".myTemplate-items-lodash").html(); $(".top-item-container .top-item-list").html(_.template(myTemplate)({ items: topItemArr })); });

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
art template
lodash template

Fastest: N/A

Slowest: N/A

Latest run results:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

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

LLMs can make mistakes. Check important info.

Related benchmarks:

Web templating CSR benchmark (version: 1)

Comparing performance of: art template vs lodash template

Created: 2 years ago by: Registered User

Jump to the latest result

art template

lodash template

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results

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