Giron perf maja1

JavaScript performance comparison

Test case created by MizardX

Preparation code

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

      
<script>
Benchmark.prototype.setup = function() {
  var arenden = [
      {
          "Accessvag": "officia",
          "ArendeID": 869,
          "Arendetyper": [
              "eu",
              "Excepte",
              "laborum",
              "laborum"
          ],
          "Avslutad": new Date("2018-05-06T23:19:13.898Z"),
          "AvslutadAv": "in dolore sint",
          "Beskrivning": "dolor anim proident ea",
          "Bestalld": new Date("2018-09-10T14:39:05.343Z"),
          "Bokad": new Date("2018-09-02T09:40:38.041Z"),
          "BokadAv": "mollit minim aliqua ut enim",
          "Kommentarer": [],
          "KontaktEpost": "officia esse ut do do",
          "KontaktNamn": "irure al",
          "KontaktTelefon": "amet anim dolor",
          "Last": new Date("2018-11-27T23:47:45.494Z"),
          "LastAv": "irure dolor id fugiat",
          "Niva": "sed dolore",
          "Omrade": "culpa enim nisi aliquip irure",
          "Ortar": [
              "exercitation aute enim",
              "laboris"
          ],
          "Plats": "laboris in dolore nisi",
          "Prioriterad": false,
          "Registrerad": new Date("2018-05-14T10:36:52.357Z"),
          "Sortering": 97
      },
      {
          "Accessvag": "sunt dolore",
          "ArendeID": 812,
          "Arendetyper": [
              "occaecat ipsum",
              "",
              "minim aliquip",
              "deserunt exercitation officia Excepteur sunt"
          ],
          "Avslutad": new Date("2018-12-21T12:32:57.619Z"),
          "AvslutadAv": "consectetur et ut",
          "Beskrivning": "eiusmod cillum ad nostrud veniam",
          "Bestalld": new Date("2018-04-24T12:55:55.357Z"),
          "Bokad": new Date("2018-01-14T16:44:24.571Z"),
          "BokadAv": "voluptate velit",
          "Kommentarer": [],
          "KontaktEpost": "est nulla pariatur dolore in",
          "KontaktNamn": "consequat",
          "KontaktTelefon": "in sed ad occaecat",
          "Last": new Date("2018-06-25T15:42:59.063Z"),
          "LastAv": "non cupidatat",
          "Niva": "cupidatat quis",
          "Omrade": "irure laboris",
          "Ortar": [],
          "Plats": "ea",
          "Prioriterad": true,
          "Registrerad": new Date("2018-07-21T06:26:37.530Z"),
          "Sortering": 78
      },
      {
          "Accessvag": "ad dolor aute in veniam",
          "ArendeID": 376,
          "Arendetyper": [
              "fugiat qui"
          ],
          "Avslutad": new Date("2018-11-24T19:40:31.286Z"),
          "AvslutadAv": "dolore ullamco eiusmod irure in",
          "Beskrivning": "quis exercitation",
          "Bestalld": new Date("2018-07-05T22:04:18.484Z"),
          "Bokad": new Date("2018-02-25T11:45:55.263Z"),
          "BokadAv": "reprehenderit dolor veniam dolore Ut",
          "Kommentarer": [],
          "KontaktEpost": "cillum anim",
          "KontaktNamn": "mollit do dolore anim dolor",
          "KontaktTelefon": "enim",
          "Last": new Date("2018-10-20T01:14:29.028Z"),
          "LastAv": "incididunt cupidatat reprehenderit nulla",
          "Niva": "veniam proident amet",
          "Omrade": "nulla fugiat in quis",
          "Ortar": [
              "esse nulla enim pariatur"
          ],
          "Plats": "ut magna irure et aliqua",
          "Prioriterad": false,
          "Registrerad": new Date("2018-10-28T18:26:00.153Z"),
          "Sortering": 95
      },
      {
          "Accessvag": "Ut ex des",
          "ArendeID": 293,
          "Arendetyper": [
              "sunt dolore dolor",
              "quis aliqua sunt veniam cupidatat",
              "amet sun",
              "dolor amet"
          ],
          "Avslutad": new Date("2018-12-28T20:56:29.225Z"),
          "AvslutadAv": "officia ut laboris",
          "Beskrivning": "eu",
          "Bestalld": new Date("2018-12-27T15:38:52.629Z"),
          "Bokad": new Date("2018-09-10T14:11:14.457Z"),
          "BokadAv": "Excepteur laborum labore dolor non",
          "Kommentarer": [
              "labore"
          ],
          "KontaktEpost": "fugiat commodo laborum",
          "KontaktNamn": "Lorem cillum",
          "KontaktTelefon": "sint anim",
          "Last": new Date("2018-07-17T15:12:05.191Z"),
          "LastAv": "proident labore id sed",
          "Niva": "ea nulla eiusmod",
          "Omrade": "in nisi",
          "Ortar": [
              "et dolore",
              "velit aliquip esse"
          ],
          "Plats": "Ut in minim consequat in",
          "Prioriterad": false,
          "Registrerad": new Date("2018-04-28T03:02:31.361Z"),
          "Sortering": 3
      },
      {
          "Accessvag": "aliquip sint",
          "ArendeID": 399,
          "Arendetyper": [
              "sit",
              "sunt ea in commodo aute",
              "ut ullamco consectetur",
              "consectetur aliqua"
          ],
          "Avslutad": new Date("2018-03-27T04:05:08.075Z"),
          "AvslutadAv": "ad irure ullamco Duis",
          "Beskrivning": "tempor exercitation Lorem",
          "Bestalld": new Date("2018-10-25T00:55:33.472Z"),
          "Bokad": new Date("2018-04-23T20:05:29.224Z"),
          "BokadAv": "ea consectetur pariatur voluptate adipisicing",
          "Kommentarer": [
              "ex consectetur magna"
          ],
          "KontaktEpost": "labore veniam in in",
          "KontaktNamn": "pariatur consequat ullamco laborum eu",
          "KontaktTelefon": "occaecat amet eiusmod",
          "Last": new Date("2018-01-23T17:06:07.268Z"),
          "LastAv": "minim",
          "Niva": "consectetur aute Duis Lorem",
          "Omrade": "laborum Lorem labore do officia",
          "Ortar": [
              "cupidatat eiusmod aliquip deserunt",
              "n"
          ],
          "Plats": "Ut",
          "Prioriterad": true,
          "Registrerad": new Date("2018-02-22T15:53:15.658Z"),
          "Sortering": 20
      }
  ];
  function testPlain() {
      function buildKontaktperson(arende) {
          var kontaktperson = document.createDocumentFragment();
          if (arende.KontaktNamn != null) {
              var namn = document.createElement("p");
              namn.innerText = arende.KontaktNamn;
              kontaktperson.appendChild(namn);
          }
          if (arende.KontaktTelefon != null) {
              var telefon = document.createElement("p");
              telefon.innerText = arende.KontaktTelefon;
              kontaktperson.appendChild(telefon);
          }
          if (arende.KontaktEpost != null) {
              var epost = document.createElement("p");
              epost.innerText = arende.KontaktEpost;
              kontaktperson.appendChild(epost);
          }
          return kontaktperson;
      }
      function buildKommentarer(kommentarer) {
          var kommentarer = document.createDocumentFragment();
          for (var i = 0; i < kommentarer.length; i++) {
              var kommentar = document.createElement("p");
              kommentar.className = "kommentarText";
              kommentar.innerText = kommentarer[i];
              kommentarer.appendChild(kommentar);
          }
          return kommentarer;
      }
      function buildDescription(arende) {
          var description = document.createDocumentFragment();
          var arendeTypString = " ";
          if (arende.Arendetyper != null && arende.Arendetyper.length > 0) {
              for (var i = 0; i < arende.Arendetyper.length; i++) {
                  if (i > 0) {
                      arendeTypString += ", ";
                  }
                  arendeTypString += arende.Arendetyper[i];
              }
              var arendeTypPostfix = document.createElement("span");
              arendeTypPostfix.className = "postFixTextDescription";
              arendeTypPostfix.innerText = "Ärendetyp: ";
              var arendetyp = document.createElement("p");
              arendetyp.className = "descriptionExtraText";
              arendetyp.innerText = '' + arendeTypString;
              description.appendChild(arendeTypPostfix);
              description.appendChild(arendetyp);
          }
          if (arende.Beskrivning != null) {
              var clearWithMargin = document.createElement("div");
              clearWithMargin.className = "clearWithMargin";
              var beskrivningPostfix = document.createElement("span");
              beskrivningPostfix.innerText = "Beskrivning: ";
              var beskrivningText = arende.Beskrivning.replace(/\r?\n/g, ' ');
              var descriptionText = document.createElement("p");
              descriptionText.className = 'descriptionText';
              if (beskrivningText.length > 100) {
                  beskrivningText = beskrivningText.substr(0, 100) + "...";
              }
              descriptionText.innerText = '' + beskrivningText;
              description.appendChild(clearWithMargin);
              description.appendChild(beskrivningPostfix);
              description.appendChild(descriptionText);
          }
          if (arende.Accessvag != null) {
              var clearWithMargin = document.createElement("div");
              clearWithMargin.className = "clearWithMargin";
              var accessvagPostfix = document.createElement("span");
              accessvagPostfix.innerText = "Accessväg: ";
              var accessvag = document.createElement("p");
              accessvag.className = 'descriptionExtraText';
              accessvag.innerText = '' + arende.Accessvag;
              description.appendChild(clearWithMargin);
              description.appendChild(accessvagPostfix);
              description.appendChild(accessvag);
          }
          return description;
      }
      function buildLocation(arende) {
          var location = document.createDocumentFragment();
          if (arende.Omrade != null && arende.Niva != null) {
              var omrade = document.createElement("p");
              var omradeNivaOrt = arende.Omrade + '-' + arende.Niva;
              if (arende.Ortar && arende.Ortar.length) {
                  // Ortar inkluderar område-nivå
                  omradeNivaOrt = arende.Ortar.join(', ');
              }
              omrade.innerText = omradeNivaOrt;
              location.appendChild(omrade);
          }
          if (arende.Plats != null) {
              var plats = document.createElement("p");
              plats.innerText = arende.Plats;
              location.appendChild(plats);
          }
          return location;
      }
      var container = document.createDocumentFragment();
      if (arenden != null && arenden.length > 0) {
          for (var i = 0; i < arenden.length; i++) {
              var arende = arenden[i];
              var description = buildDescription(arende);
              var location = buildLocation(arende);
              var contact = buildKontaktperson(arende);
              var listItem = document.createElement("li");
              listItem.className = "arende-item";
              listItem.id = "arende-" + arende.ArendeID;
              var row = document.createElement("ul");
              row.className = "row";
              row.className += " rowBottomBorder";
              var omrade = document.createElement("li");
              omrade.className = "cell";
              omrade.appendChild(location);
              var beskrivning = document.createElement("li");
              beskrivning.className = "cell flex3";
              beskrivning.appendChild(description);
              var kontaktperson = document.createElement("li");
              kontaktperson.className = "cell flex2 contact";
              kontaktperson.appendChild(contact);
              var prioriterad = document.createElement("li");
              prioriterad.className = "cell";
              if (arende.Prioriterad) {
                  prioriterad.className += " prioriterad";
              }
              var bestalld = document.createElement("li");
              bestalld.className = "cell";
              if (arende.Bestalld != null) {
                  bestalld.innerHTML = DateUtils.formatFriendlyTime(arende.Bestalld);
                  bestalld.className += " checked";
              }
              var last = document.createElement("li");
              last.className = "cell";
              if (arende.Last != null) {
                  last.innerHTML = DateUtils.formatFriendlyTime(arende.Last) + ', ' + arende.LastAv;
                  last.className += " checked";
              }
              var bokad = document.createElement("li");
              bokad.className = "cell";
              if (arende.Bokad != null) {
                  bokad.innerHTML = DateUtils.formatFriendlyTime(arende.Bokad) + ', ' + arende.BokadAv;
                  bokad.className += " checked";
              }
              var atgardad = document.createElement("li");
              atgardad.className = "cell";
              if (arende.Avslutad != null) {
                  atgardad.innerHTML = DateUtils.formatFriendlyTime(arende.Avslutad) + ', ' + arende.AvslutadAv;
                  atgardad.className += " checked";
              }
              var kommentar = document.createElement("li");
              kommentar.className = "cell flex2 kommentarText";
              if (arende.Kommentarer != null && arende.Kommentarer.length > 0) {
                  var kommentarer = buildKommentarer(arende.Kommentarer);
                  kommentar.appendChild(kommentarer);
              }
              var registrerad = document.createElement("li");
              registrerad.className = "cell";
              registrerad.innerHTML = DateUtils.formatFriendlyTime(arende.Registrerad);
              var arendeAction = document.createElement("li");
              arendeAction.className = "cell row-button";
              var actionButton = document.createElement("button");
              actionButton.type = "button";
              if (arende.Avslutad != null) {
                  actionButton.className = "archive action floatRight";
                  actionButton.innerHTML = "Arkivera";
              }
              else {
                  actionButton.className = "update action floatRight";
                  actionButton.innerHTML = "Uppdatera";
              }
              arendeAction.appendChild(actionButton);
              row.appendChild(omrade);
              row.appendChild(beskrivning);
              row.appendChild(kommentar);
              row.appendChild(kontaktperson);
              row.appendChild(prioriterad);
              row.appendChild(bestalld);
              row.appendChild(last);
              row.appendChild(bokad);
              row.appendChild(atgardad);
              row.appendChild(registrerad);
              row.appendChild(arendeAction);
              listItem.appendChild(row);
              if (arende.Avslutad != null) {
                  listItem.className += " checked";
              }
              container.appendChild(listItem);
          }
      }
      return container;
  }
  function testFunc() {
      function $h(tagName, attrs, children) {
          if (Array.isArray(attrs)) {
              return $h(tagName, null, attrs);
          }
          var elm = document.createElement(tagName);
          if (attrs) {
              for (var name in attrs) {
                  if (!attrs.hasOwnProperty(name))
                      continue;
                  if (name in elm) {
                      elm[name] = attrs[name];
                  }
                  else {
                      elm.setAttribute(name, attrs[name]);
                  }
              }
          }
          if (children) {
              if (children.length == 1 && typeof children[0] === "string") {
                  elm.innerText = children[0];
              }
              else {
                  for (var _i = 0, children_1 = children; _i < children_1.length; _i++) {
                      var child = children_1[_i];
                      if (!child)
                          continue;
                      if (typeof child === "string") {
                          var text = document.createTextNode(child);
                          elm.appendChild(text);
                      }
                      else {
                          elm.appendChild(child);
                      }
                  }
              }
          }
          return elm;
      }
      function $f(children) {
          var fragment = document.createDocumentFragment();
          if (children) {
              for (var _i = 0, children_2 = children; _i < children_2.length; _i++) {
                  var child = children_2[_i];
                  if (!child)
                      continue;
                  if (typeof child === "string") {
                      var text = document.createTextNode(child);
                      fragment.appendChild(text);
                  }
                  else {
                      fragment.appendChild(child);
                  }
              }
          }
          return fragment;
      }
      function truncate(str, len) {
          if (str && str.length > len)
              return str.substr(0, len) + '...';
          else
              return str;
      }
      return $f(arenden.map(function (arende) {
          return $h("li", {
              "className": "arende-item" + (arende.Avslutad ? ' checked' : ''),
              "id": "arende-" + arende.ArendeID
          }, [
              $h("ul", { "className": "row rowBottomBorder" }, [
                  $h("li", { "className": "cell" }, [
                      arende.Omrade && arende.Niva &&
                          $h("p", [arende.Ortar.length ? arende.Ortar.join(', ') : arende.Omrade + '-' + arende.Niva]),
                      arende.Plats &&
                          $h("p", [arende.Plats])
                  ]),
                  $h("li", { "className": "cell flex3" }, [
                      arende.Arendetyper.length &&
                          $h("span", { "className": "postFixTextDescription" }, ["Ärendetyp: "]),
                      arende.Arendetyper.length &&
                          $h("p", { "className": "descriptionExtraText" }, [arende.Arendetyper.join(', ')]),
                      arende.Beskrivning &&
                          $h("div", { "className": "clearWithMargin" }),
                      arende.Beskrivning &&
                          $h("span", ["Beskrivning: "]),
                      arende.Beskrivning &&
                          $h("p", { "className": 'descriptionText' }, [truncate(arende.Beskrivning.replace(/\s+/g, ' '), 100)]),
                      arende.Accessvag &&
                          $h("div", { "className": "clearWithMargin" }),
                      arende.Accessvag &&
                          $h("span", ["Accessväg: "]),
                      arende.Accessvag &&
                          $h("p", { "className": 'descriptionExtraText' }, [arende.Accessvag])
                  ]),
                  $h("li", { "className": "cell flex2 kommentarText" }, arende.Kommentarer.map(function (text) {
                      return $h("p", { "className": "kommentarText" }, [text]);
                  })),
                  $h("li", { "className": "cell flex2 contact" }, [
                      arende.KontaktNamn &&
                          $h("p", [arende.KontaktNamn]),
                      arende.KontaktTelefon &&
                          $h("p", [arende.KontaktTelefon]),
                      arende.KontaktEpost &&
                          $h("p", [arende.KontaktEpost])
                  ]),
                  $h("li", { "className": "cell" + (arende.Prioriterad ? ' prioriterad' : '') }),
                  $h("li", { "className": "cell" + (arende.Bestalld ? ' checked' : '') }, [
                      arende.Bestalld && DateUtils.formatFriendlyTime(arende.Bestalld)
                  ]),
                  $h("li", { "className": "cell" + (arende.Last ? ' checked' : '') }, [
                      arende.Last && DateUtils.formatFriendlyTime(arende.Last) + ', ' + arende.LastAv
                  ]),
                  $h("li", { "className": "cell" + (arende.Bokad ? ' checked' : '') }, [
                      arende.Bokad && DateUtils.formatFriendlyTime(arende.Bokad) + ', ' + arende.BokadAv
                  ]),
                  $h("li", { "className": "cell" + (arende.Avslutad ? ' checked' : '') }, [
                      arende.Avslutad && DateUtils.formatFriendlyTime(arende.Avslutad) + ', ' + arende.AvslutadAv
                  ]),
                  $h("li", { "className": "cell" }, [
                      DateUtils.formatFriendlyTime(arende.Registrerad)
                  ]),
                  $h("li", { "className": "cell row-button" }, [
                      $h("button", { "type": "button", "className": "action floatRight " + (arende.Avslutad ? 'archive' : 'update') }, [
                          arende.Avslutad ? 'Arkivera' : 'Uppdatera'
                      ]),
                  ])
              ]),
          ]);
      }));
  }
  function testJQuery() {
      function truncate(str, len) {
          if (str && str.length > len)
              return str.substr(0, len) + '...';
          else
              return str;
      }
      return $(arenden.map(function (arende) {
          return $("<li>", {
              "className": "arende-item" + (arende.Avslutad ? ' checked' : ''),
              "id": "arende-" + arende.ArendeID
          }).append([
              $("<ul>", { "className": "row rowBottomBorder" }).append([
                  $("<li>", { "className": "cell" }).append([
                      arende.Omrade && arende.Niva &&
                          $("<p>").text(arende.Ortar.length ? arende.Ortar.join(', ') : arende.Omrade + '-' + arende.Niva),
                      arende.Plats &&
                          $("<p>").text(arende.Plats)
                  ]),
                  $("<li>", { "className": "cell flex3" }).append([
                      arende.Arendetyper.length &&
                          $("<span>", { "className": "postFixTextDescription" }).text("Ärendetyp: "),
                      arende.Arendetyper.length &&
                          $("<p>", { "className": "descriptionExtraText" }).text(arende.Arendetyper.join(', ')),
                      arende.Beskrivning &&
                          $("<div>", { "className": "clearWithMargin" }),
                      arende.Beskrivning &&
                          $("<span>").text("Beskrivning: "),
                      arende.Beskrivning &&
                          $("<p>", { "className": 'descriptionText' }).text(truncate(arende.Beskrivning.replace(/\s+/g, ' '), 100)),
                      arende.Accessvag &&
                          $("<div>", { "className": "clearWithMargin" }),
                      arende.Accessvag &&
                          $("<span>").text("Accessväg: "),
                      arende.Accessvag &&
                          $("<p>", { "className": 'descriptionExtraText' }).text(arende.Accessvag)
                  ]),
                  $("<li>", { "className": "cell flex2 kommentarText" }).append(arende.Kommentarer.map(function (text) {
                      return $("<p>", { "className": "kommentarText" }).append([text]);
                  })),
                  $("<li>", { "className": "cell flex2 contact" }).append([
                      arende.KontaktNamn &&
                          $("<p>").text(arende.KontaktNamn),
                      arende.KontaktTelefon &&
                          $("<p>").text(arende.KontaktTelefon),
                      arende.KontaktEpost &&
                          $("<p>").text(arende.KontaktEpost)
                  ]),
                  $("<li>", { "className": "cell" + (arende.Prioriterad ? ' prioriterad' : '') }),
                  $("<li>", { "className": "cell" + (arende.Bestalld ? ' checked' : '') }).append([
                      arende.Bestalld && DateUtils.formatFriendlyTime(arende.Bestalld)
                  ]),
                  $("<li>", { "className": "cell" + (arende.Last ? ' checked' : '') }).append([
                      arende.Last && DateUtils.formatFriendlyTime(arende.Last) + ', ' + arende.LastAv
                  ]),
                  $("<li>", { "className": "cell" + (arende.Bokad ? ' checked' : '') }).append([
                      arende.Bokad && DateUtils.formatFriendlyTime(arende.Bokad) + ', ' + arende.BokadAv
                  ]),
                  $("<li>", { "className": "cell" + (arende.Avslutad ? ' checked' : '') }).append([
                      arende.Avslutad && DateUtils.formatFriendlyTime(arende.Avslutad) + ', ' + arende.AvslutadAv
                  ]),
                  $("<li>", { "className": "cell" }).append([
                      DateUtils.formatFriendlyTime(arende.Registrerad)
                  ]),
                  $("<li>", { "className": "cell row-button" }).append([
                      $("<button>", { "type": "button", "className": "action floatRight " + (arende.Avslutad ? 'archive' : 'update') }).append([
                          arende.Avslutad ? 'Arkivera' : 'Uppdatera'
                      ]),
                  ])
              ]),
          ]);
      }));
  }
  var DateUtils;
  (function (DateUtils) {
      function formatFriendlyTime(date) {
          var now = new Date();
          var today = new Date(now.getTime() - now.getTime() % 86400000);
          var days = Math.floor((date.getTime() - today.getTime()) / 86400000);
          if (-1 <= days && days < 2) {
              var prefix = ['Igår', 'Idag', 'Imorgon'][days + 1];
              return [
                  prefix,
                  ' kl. ',
                  date.getHours() < 10 ? '0' : '',
                  date.getHours() + 1,
                  ':',
                  date.getMinutes() < 10 ? '0' : '',
                  date.getMinutes()
              ].join('');
          }
          return [
              date.getFullYear(),
              '-',
              date.getMonth() + 1 < 10 ? '0' : '',
              date.getMonth() + 1,
              '-',
              date.getDate() < 10 ? '0' : '',
              date.getDate()
          ].join('');
      }
      DateUtils.formatFriendlyTime = formatFriendlyTime;
  })(DateUtils || (DateUtils = {}));
  

};
</script>

Preparation code output

Test runner

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

Java applet disabled.

Testing in CCBot 2.0.0 / Other 0.0.0
Test Ops/sec
testPlan()
testPlain()
pending…
testFunc()
testFunc()
pending…
testJQuery()
testJQuery()
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