Run results for: Map Code4 - MeasureThat.net

Test name	Executions per second
innerText	346.3 Ops/sec
textContent	391.5 Ops/sec
fragment	140.1 Ops/sec
innerHTML	221.8 Ops/sec

innerText

const places = [
      [-95.712891, 37.09024, "United States", "76.9 million visitors"],
      [-106.346771, 56.130367, "Canada", "76.9 million visitors"],
      [-102.552788, 23.634501, "Mexico", "76.9 million visitors"],
      [-51.925282, -14.235004, "Brazil", "76.9 million visitors"],
      [-63.616673, -38.416096, "Argentina", "76.9 million visitors"],
      [25.748152, 61.92411, "Finland", "76.9 million visitors"],
      [-3.435973, 55.378052, "United Kingdom", "76.9 million visitors"],
      [10.451526, 51.165691, "Germany", "76.9 million visitors"],
      [12.56738, 41.871941, "Italy", "76.9 million visitors"],
      [35.24332, 38.963745, "Turkey", "76.9 million visitors"],
      [-3.74922, 40.463669, "Spain", "76.9 million visitors"],
      [22.937506, -30.559483, "South Africa", "76.9 million visitors"],
      [46.869106, -18.766947, "Madagascar", "76.9 million visitors"],
      [103.846657, 46.862495, "Mongolia", "76.9 million visitors"],
      [78.962883, 20.593683, "India", "76.9 million visitors"],
      [138.25293, 36.204823, "Japan", "76.9 million visitors"],
      [100.992538, 15.870032, "Thailand", "76.9 million visitors"],
      [80.771797, 7.873054, "Sri Lanka", "76.9 million visitors"],
      [101.975769, 4.210484, "Malaysia", "76.9 million visitors"],
      [133.775131, -25.274399, "Australia", "76.9 million visitors"],
      [174.885971, -40.900558, "New Zealand", "76.9 million visitors"]
    ];

for (let i = 0; i < places.length; i++) {
      let marker = document.createElement("div");
      marker.className = "main-marker";

      let tooltip = document.createElement("div");
      tooltip.className = "tooltip";

      let placeName = document.createElement("p");
      placeName.innerText = places[i][2];
      tooltip.appendChild(placeName);

      let placeVisitors = document.createElement("span");
      placeVisitors.innerText = places[i][3];
      tooltip.appendChild(placeVisitors);

      let icomoon = document.createElement("i");
      icomoon.className = "icon icon-ic-location";
      marker.appendChild(tooltip);
      marker.appendChild(icomoon);
    }

textContent

const places = [
      [-95.712891, 37.09024, "United States", "76.9 million visitors"],
      [-106.346771, 56.130367, "Canada", "76.9 million visitors"],
      [-102.552788, 23.634501, "Mexico", "76.9 million visitors"],
      [-51.925282, -14.235004, "Brazil", "76.9 million visitors"],
      [-63.616673, -38.416096, "Argentina", "76.9 million visitors"],
      [25.748152, 61.92411, "Finland", "76.9 million visitors"],
      [-3.435973, 55.378052, "United Kingdom", "76.9 million visitors"],
      [10.451526, 51.165691, "Germany", "76.9 million visitors"],
      [12.56738, 41.871941, "Italy", "76.9 million visitors"],
      [35.24332, 38.963745, "Turkey", "76.9 million visitors"],
      [-3.74922, 40.463669, "Spain", "76.9 million visitors"],
      [22.937506, -30.559483, "South Africa", "76.9 million visitors"],
      [46.869106, -18.766947, "Madagascar", "76.9 million visitors"],
      [103.846657, 46.862495, "Mongolia", "76.9 million visitors"],
      [78.962883, 20.593683, "India", "76.9 million visitors"],
      [138.25293, 36.204823, "Japan", "76.9 million visitors"],
      [100.992538, 15.870032, "Thailand", "76.9 million visitors"],
      [80.771797, 7.873054, "Sri Lanka", "76.9 million visitors"],
      [101.975769, 4.210484, "Malaysia", "76.9 million visitors"],
      [133.775131, -25.274399, "Australia", "76.9 million visitors"],
      [174.885971, -40.900558, "New Zealand", "76.9 million visitors"]
    ];

for (let i = 0; i < places.length; i++) {
      let marker = document.createElement("div");
      marker.className = "main-marker";

      let tooltip = document.createElement("div");
      tooltip.className = "tooltip";

      let placeName = document.createElement("p");
      placeName.textContent = places[i][2];
      tooltip.appendChild(placeName);

      let placeVisitors = document.createElement("span");
      placeVisitors.textContent = places[i][3];
      tooltip.appendChild(placeVisitors);

      let icomoon = document.createElement("i");
      icomoon.className = "icon icon-ic-location";
      marker.appendChild(tooltip);
      marker.appendChild(icomoon);
    }

fragment

const places = [
      [-95.712891, 37.09024, "United States", "76.9 million visitors"],
      [-106.346771, 56.130367, "Canada", "76.9 million visitors"],
      [-102.552788, 23.634501, "Mexico", "76.9 million visitors"],
      [-51.925282, -14.235004, "Brazil", "76.9 million visitors"],
      [-63.616673, -38.416096, "Argentina", "76.9 million visitors"],
      [25.748152, 61.92411, "Finland", "76.9 million visitors"],
      [-3.435973, 55.378052, "United Kingdom", "76.9 million visitors"],
      [10.451526, 51.165691, "Germany", "76.9 million visitors"],
      [12.56738, 41.871941, "Italy", "76.9 million visitors"],
      [35.24332, 38.963745, "Turkey", "76.9 million visitors"],
      [-3.74922, 40.463669, "Spain", "76.9 million visitors"],
      [22.937506, -30.559483, "South Africa", "76.9 million visitors"],
      [46.869106, -18.766947, "Madagascar", "76.9 million visitors"],
      [103.846657, 46.862495, "Mongolia", "76.9 million visitors"],
      [78.962883, 20.593683, "India", "76.9 million visitors"],
      [138.25293, 36.204823, "Japan", "76.9 million visitors"],
      [100.992538, 15.870032, "Thailand", "76.9 million visitors"],
      [80.771797, 7.873054, "Sri Lanka", "76.9 million visitors"],
      [101.975769, 4.210484, "Malaysia", "76.9 million visitors"],
      [133.775131, -25.274399, "Australia", "76.9 million visitors"],
      [174.885971, -40.900558, "New Zealand", "76.9 million visitors"]
    ];

for (let i = 0; i < places.length; i++) {
      let markerFragment = document.createDocumentFragment();
      let marker = document.createElement("div");
      marker.className = "main-marker";

      let mainFragment = document.createDocumentFragment();

      let tooltipFragment = document.createDocumentFragment();
      let tooltip = document.createElement("div");
      tooltip.className = "tooltip";
      tooltipFragment.appendChild(tooltip);

      let textFragment = document.createDocumentFragment();

      let nameFragment = document.createDocumentFragment();
      let placeName = document.createElement("p");
      placeName.textContent = places[i][2];
      nameFragment.appendChild(placeName);

      textFragment.appendChild(nameFragment);

      let visitorFragment = document.createDocumentFragment();
      let placeVisitors = document.createElement("span");
      placeVisitors.textContent = places[i][3];
      visitorFragment.appendChild(placeVisitors);

      textFragment.appendChild(visitorFragment);

      tooltipFragment.appendChild(textFragment);

      mainFragment.appendChild(tooltipFragment);

      markerFragment.appendChild(mainFragment);

      let icomoonFragment = document.createDocumentFragment();
      let icomoon = document.createElement("i");
      icomoon.className = "icon icon-ic-location";
      icomoonFragment.appendChild(icomoon);

      markerFragment.appendChild(icomoonFragment);
      marker.appendChild(markerFragment);
    }

innerHTML

const places = [
      [-95.712891, 37.09024, "United States", "76.9 million visitors"],
      [-106.346771, 56.130367, "Canada", "76.9 million visitors"],
      [-102.552788, 23.634501, "Mexico", "76.9 million visitors"],
      [-51.925282, -14.235004, "Brazil", "76.9 million visitors"],
      [-63.616673, -38.416096, "Argentina", "76.9 million visitors"],
      [25.748152, 61.92411, "Finland", "76.9 million visitors"],
      [-3.435973, 55.378052, "United Kingdom", "76.9 million visitors"],
      [10.451526, 51.165691, "Germany", "76.9 million visitors"],
      [12.56738, 41.871941, "Italy", "76.9 million visitors"],
      [35.24332, 38.963745, "Turkey", "76.9 million visitors"],
      [-3.74922, 40.463669, "Spain", "76.9 million visitors"],
      [22.937506, -30.559483, "South Africa", "76.9 million visitors"],
      [46.869106, -18.766947, "Madagascar", "76.9 million visitors"],
      [103.846657, 46.862495, "Mongolia", "76.9 million visitors"],
      [78.962883, 20.593683, "India", "76.9 million visitors"],
      [138.25293, 36.204823, "Japan", "76.9 million visitors"],
      [100.992538, 15.870032, "Thailand", "76.9 million visitors"],
      [80.771797, 7.873054, "Sri Lanka", "76.9 million visitors"],
      [101.975769, 4.210484, "Malaysia", "76.9 million visitors"],
      [133.775131, -25.274399, "Australia", "76.9 million visitors"],
      [174.885971, -40.900558, "New Zealand", "76.9 million visitors"]
    ];

for (let i = 0; i < places.length; i++) {
      let marker = document.createElement("div");
      marker.className = "main-marker";
	  marker.innerHTML = '<div class="tooltip"><p>'+places[i][2]+'</p><span>'+places[i][3]+'</span></div><i class="icon icon-ic-location"></i>'
    }