Benchmark: Macro replacement

Script Preparation code:

var html = `
<div>
  <div class="collapsed">
    <div style="{{COLLAPSED_LAYOUT_1_BG_LAYER_STYLE}}">
    </div>
  
    <div style="{{COLLAPSED_LAYOUT_1_LOGO_LAYER_STYLE}}">
      <img
        src="{{COLLAPSED_LAYOUT_1_LOGO_IMG_SRC}}"
        style="{{COLLAPSED_LAYOUT_1_LOGO_IMG_STYLE}}"
      >
    </div>
  
    <div style="{{COLLAPSED_LAYOUT_1_P1_LAYER_STYLE}}">
      <img
        src="{{COLLAPSED_LAYOUT_1_P1_IMG_SRC}}"
        style="{{COLLAPSED_LAYOUT_1_P1_IMG_STYLE}}"
      >
    </div>
  
    <div style="{{COLLAPSED_LAYOUT_1_P2_LAYER_STYLE}}">
      <img
        src="{{COLLAPSED_LAYOUT_1_P2_IMG_SRC}}"
        style="{{COLLAPSED_LAYOUT_1_P2_IMG_STYLE}}"
      >
    </div>
  
    <div style="{{COLLAPSED_LAYOUT_1_BANNER_LAYER_STYLE}}">
      <img
        src="{{COLLAPSED_LAYOUT_1_BANNER__SRC}}"
        style="{{COLLAPSED_LAYOUT_1_BANNER_IMG_STYLE}}"
      >
    </div>
  
    <div style="{{COLLAPSED_LAYOUT_1_MESSAGE_LAYER_STYLE}}">
    </div>
  
    <div style="{{COLLAPSED_LAYOUT_1_PRICE_LAYER_STYLE}}">
    </div>
  
    <div style="{{COLLAPSED_LAYOUT_1_BUTTON_LAYER_STYLE}}">
    </div>
  </div>
  
  <div class="expanded">
  
    <div style="{{EXPANDED_LAYOUT_1_BG_LAYER_STYLE}}">
    </div>
  
    <div style="{{EXPANDED_LAYOUT_1_LOGO_LAYER_STYLE}}">
      <img
        src="{{EXPANDED_LAYOUT_1_LOGO_IMG_SRC}}"
        style="{{EXPANDED_LAYOUT_1_LOGO_IMG_STYLE}}"
      >
    </div>
  
    <div style="{{EXPANDED_LAYOUT_1_BANNER_LAYER_STYLE}}">
      <img
        src="{{EXPANDED_LAYOUT_1_BANNER__SRC}}"
        style="{{EXPANDED_LAYOUT_1_BANNER_IMG_STYLE}}"
      >
    </div>
  
    <div style="{{EXPANDED_LAYOUT_1_MESSAGE_1_LAYER_STYLE}}">
    </div>
  
    <div style="{{EXPANDED_LAYOUT_1_MESSAGE_2_LAYER_STYLE}}">
    </div>
  
    <div style="{{EXPANDED_LAYOUT_1_BUTTON_LAYER_STYLE}}">
    </div>
    
    <div class="galleryController">
      <button>PREV</button>
    </div>
    
    <div class="galleryContainer">
      <div class="galleryItem">
        <div style="{{EXPANDED_LAYOUT_G1_P1_LAYER_STYLE}}">
          <img
            src="{{COLLAPSED_LAYOUT_G1_P1_IMG_SRC}}"
            style="{{EXPANDED_LAYOUT_G1_P1_IMG_STYLE}}"
          >
        </div>
    
        <div style="{{EXPANDED_LAYOUT_G1_MESSAGE_LAYER_STYLE}}">
        </div>
      </div>
  
      <div class="galleryItem">
        <div style="{{EXPANDED_LAYOUT_G2_P2_LAYER_STYLE}}">
          <img
            src="{{COLLAPSED_LAYOUT_G2_P2_IMG_SRC}}"
            style="{{EXPANDED_LAYOUT_G2_P2_IMG_STYLE}}"
          >
        </div>
    
        <div style="{{EXPANDED_LAYOUT_G2_MESSAGE_LAYER_STYLE}}">
        </div>
      </div>
  
      <div class="galleryItem">
        <div style="{{EXPANDED_LAYOUT_G3_P3_LAYER_STYLE}}">
          <img
            src="{{COLLAPSED_LAYOUT_G3_P3_IMG_SRC}}"
            style="{{EXPANDED_LAYOUT_G3_P3_IMG_STYLE}}"
          >
        </div>
    
        <div style="{{EXPANDED_LAYOUT_G3_MESSAGE_LAYER_STYLE}}">
        </div>
      </div>
  
      <div class="galleryItem">
        <div style="{{EXPANDED_LAYOUT_G4_P4_LAYER_STYLE}}">
          <img
            src="{{COLLAPSED_LAYOUT_G4_P4_IMG_SRC}}"
            style="{{EXPANDED_LAYOUT_G4_P4_IMG_STYLE}}"
          >
        </div>
    
        <div style="{{EXPANDED_LAYOUT_G4_MESSAGE_LAYER_STYLE}}">
        </div>
      </div>
  
      <div class="galleryItem">
        <div style="{{EXPANDED_LAYOUT_G5_P5_LAYER_STYLE}}">
          <img
            src="{{COLLAPSED_LAYOUT_G5_P5_IMG_SRC}}"
            style="{{EXPANDED_LAYOUT_G5_P5_IMG_STYLE}}"
          >
        </div>
    
        <div style="{{EXPANDED_LAYOUT_G5_MESSAGE_LAYER_STYLE}}">
        </div>
      </div>
  
      <div class="galleryItem">
        <div style="{{EXPANDED_LAYOUT_G6_P6_LAYER_STYLE}}">
          <img
            src="{{COLLAPSED_LAYOUT_G6_P6_IMG_SRC}}"
            style="{{EXPANDED_LAYOUT_G6_P6_IMG_STYLE}}"
          >
        </div>
    
        <div style="{{EXPANDED_LAYOUT_G6_MESSAGE_LAYER_STYLE}}">
        </div>
      </div>
  
      <div class="galleryItem">
        <div style="{{EXPANDED_LAYOUT_G7_P7_LAYER_STYLE}}">
          <img
            src="{{COLLAPSED_LAYOUT_G7_P7_IMG_SRC}}"
            style="{{EXPANDED_LAYOUT_G7_P7_IMG_STYLE}}"
          >
        </div>
    
        <div style="{{EXPANDED_LAYOUT_G7_MESSAGE_LAYER_STYLE}}">
        </div>
      </div>
  
      <div class="galleryItem">
        <div style="{{EXPANDED_LAYOUT_G8_P8_LAYER_STYLE}}">
          <img
            src="{{COLLAPSED_LAYOUT_G8_P8_IMG_SRC}}"
            style="{{EXPANDED_LAYOUT_G8_P8_IMG_STYLE}}"
          >
        </div>
    
        <div style="{{EXPANDED_LAYOUT_G8_MESSAGE_LAYER_STYLE}}">
        </div>
      </div>
  
      <div class="galleryItem">
        <div style="{{EXPANDED_LAYOUT_G9_P9_LAYER_STYLE}}">
          <img
            src="{{COLLAPSED_LAYOUT_G9_P9_IMG_SRC}}"
            style="{{EXPANDED_LAYOUT_G9_P9_IMG_STYLE}}"
          >
        </div>
    
        <div style="{{EXPANDED_LAYOUT_G9_MESSAGE_LAYER_STYLE}}">
        </div>
      </div>
  
      <div class="galleryItem">
        <div style="{{EXPANDED_LAYOUT_G10_P10_LAYER_STYLE}}">
          <img
            src="{{COLLAPSED_LAYOUT_G10_P10_IMG_SRC}}"
            style="{{EXPANDED_LAYOUT_G10_P10_IMG_STYLE}}"
          >
        </div>
    
        <div style="{{EXPANDED_LAYOUT_G10_MESSAGE_LAYER_STYLE}}">
        </div>
      </div>
  
      <div class="galleryItem">
        <div style="{{EXPANDED_LAYOUT_G11_P11_LAYER_STYLE}}">
          <img
            src="{{COLLAPSED_LAYOUT_G11_P11_IMG_SRC}}"
            style="{{EXPANDED_LAYOUT_G11_P11_IMG_STYLE}}"
          >
        </div>
    
        <div style="{{EXPANDED_LAYOUT_G11_MESSAGE_LAYER_STYLE}}">
        </div>
      </div>
  
      <div class="galleryItem">
        <div style="{{EXPANDED_LAYOUT_G12_P12_LAYER_STYLE}}">
          <img
            src="{{COLLAPSED_LAYOUT_G12_P12_IMG_SRC}}"
            style="{{EXPANDED_LAYOUT_G12_P12_IMG_STYLE}}"
          >
        </div>
    
        <div style="{{EXPANDED_LAYOUT_G12_MESSAGE_LAYER_STYLE}}">
        </div>
      </div>
  
      <div class="galleryItem">
        <div style="{{EXPANDED_LAYOUT_G13_P13_LAYER_STYLE}}">
          <img
            src="{{COLLAPSED_LAYOUT_G13_P13_IMG_SRC}}"
            style="{{EXPANDED_LAYOUT_G13_P13_IMG_STYLE}}"
          >
        </div>
    
        <div style="{{EXPANDED_LAYOUT_G13_MESSAGE_LAYER_STYLE}}">
        </div>
      </div>
  
      <div class="galleryItem">
        <div style="{{EXPANDED_LAYOUT_G14_P14_LAYER_STYLE}}">
          <img
            src="{{COLLAPSED_LAYOUT_G14_P14_IMG_SRC}}"
            style="{{EXPANDED_LAYOUT_G14_P14_IMG_STYLE}}"
          >
        </div>
    
        <div style="{{EXPANDED_LAYOUT_G14_MESSAGE_LAYER_STYLE}}">
        </div>
      </div>
  
      <div class="galleryItem">
        <div style="{{EXPANDED_LAYOUT_G15_P15_LAYER_STYLE}}">
          <img
            src="{{COLLAPSED_LAYOUT_G15_P15_IMG_SRC}}"
            style="{{EXPANDED_LAYOUT_G15_P15_IMG_STYLE}}"
          >
        </div>
    
        <div style="{{EXPANDED_LAYOUT_G15_MESSAGE_LAYER_STYLE}}">
        </div>
      </div>
  
      <div class="galleryItem">
        <div style="{{EXPANDED_LAYOUT_G16_P16_LAYER_STYLE}}">
          <img
            src="{{COLLAPSED_LAYOUT_G16_P16_IMG_SRC}}"
            style="{{EXPANDED_LAYOUT_G16_P16_IMG_STYLE}}"
          >
        </div>
    
        <div style="{{EXPANDED_LAYOUT_G16_MESSAGE_LAYER_STYLE}}">
        </div>
      </div>
  
      <div class="galleryItem">
        <div style="{{EXPANDED_LAYOUT_G17_P17_LAYER_STYLE}}">
          <img
            src="{{COLLAPSED_LAYOUT_G17_P17_IMG_SRC}}"
            style="{{EXPANDED_LAYOUT_G17_P17_IMG_STYLE}}"
          >
        </div>
    
        <div style="{{EXPANDED_LAYOUT_G17_MESSAGE_LAYER_STYLE}}">
        </div>
      </div>
  
      <div class="galleryItem">
        <div style="{{EXPANDED_LAYOUT_G18_P18_LAYER_STYLE}}">
          <img
            src="{{COLLAPSED_LAYOUT_G18_P18_IMG_SRC}}"
            style="{{EXPANDED_LAYOUT_G18_P18_IMG_STYLE}}"
          >
        </div>
    
        <div style="{{EXPANDED_LAYOUT_G18_MESSAGE_LAYER_STYLE}}">
        </div>
      </div>
  
      <div class="galleryItem">
        <div style="{{EXPANDED_LAYOUT_G19_P19_LAYER_STYLE}}">
          <img
            src="{{COLLAPSED_LAYOUT_G19_P19_IMG_SRC}}"
            style="{{EXPANDED_LAYOUT_G19_P19_IMG_STYLE}}"
          >
        </div>
    
        <div style="{{EXPANDED_LAYOUT_G19_MESSAGE_LAYER_STYLE}}">
        </div>
      </div>
  
      <div class="galleryItem">
        <div style="{{EXPANDED_LAYOUT_G20_P20_LAYER_STYLE}}">
          <img
            src="{{COLLAPSED_LAYOUT_G20_P20_IMG_SRC}}"
            style="{{EXPANDED_LAYOUT_G20_P20_IMG_STYLE}}"
          >
        </div>
    
        <div style="{{EXPANDED_LAYOUT_G20_MESSAGE_LAYER_STYLE}}">
        </div>
      </div>
    </div>
  
    <div class="galleryController">
      <button>NEXT</button>
    </div>
  
  </div>
</div>
`;

var keyList = html.match(/{{.*}}/g).map(s => s.replace(/({{|}})/g, ""));
var data = keyList.reduce((acc, key) => {
  if (key.endsWith('STYLE')) {
    acc[key]= `width: 30px;height: 30px; position: absolute; top: 0px; left: 0px; border: none; padding: 0 0 0 0; margin: 0 0 0 0; backround: black;`
  } else if (key.endsWith('SRC')) {
    acc[key]='https://google.com.whocares.what?!.ok';
  }

  return acc;
}, {});

var segementList = html.split(/{{|}}/g).map((segment, index) => {
  if (index % 2 === 0) {
    return {
      type: 'string',
      value: segment,
    }
  }

  return {
    type: 'macro',
    value: segment,
  }
})

Tests:

Regex replace
html.replace(/{{(.*?)}}/g, (_, key) => data[key]);
String replace each macro separately
let newHtml = html; Object.keys(data).forEach(key => newHtml = newHtml.replace(`{{${key}}}`, data[key]))
Regex keys group
let newHtml = html.replace(new RegExp(`{{(${Object.keys(data).join('|')})}}`, 'g'), (_, key, g) => { return data[key]; })
Search for macro open and close delimiters
let newHtml = ''; let originalHtml = html; while (originalHtml) { const indexUntilOpenMacro = originalHtml.search('{{'); if (indexUntilOpenMacro >= 0) { newHtml += originalHtml.substring(0, indexUntilOpenMacro); originalHtml = originalHtml.substring(indexUntilOpenMacro + 2); const indexUntilCloseMacro = originalHtml.search('}}'); newHtml += data[originalHtml.substring(0, indexUntilCloseMacro)]; originalHtml = originalHtml.substring(indexUntilCloseMacro + 2); } else { break; } }
Segments
segementList .map(segment => { if (segment.type === 'string') { return segment.value; } return data[segment.value]; }) .join('');

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Regex replace
String replace each macro separately
Regex keys group
Search for macro open and close delimiters
Segments

Fastest: N/A

Slowest: N/A

ⓘ Get performance results from real users on your website with Request Metrics.

Website Performance Monitoring by Request Metrics

Latest run results:

Run details: (Test run date: one year ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/109.0.0.0 Safari/537.36

Browser/OS: Chrome 109 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Regex replace	77833.7 Ops/sec
String replace each macro separately	5809.5 Ops/sec
Regex keys group	33043.6 Ops/sec
Search for macro open and close delimiters	14924.2 Ops/sec
Segments	86198.5 Ops/sec

Macro replacement (version: 12)

Comparing performance of: Regex replace vs String replace each macro separately vs Regex keys group vs Search for macro open and close delimiters vs Segments

Created: one year ago by: Registered User

Jump to the latest result

Regex replace

String replace each macro separately

Regex keys group

Search for macro open and close delimiters

Segments

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A