LocalStorage writing with subscribers

Benchmark created by Bemi Faison on

Description

This tests LocalStorage write performance, when there are storage event listeners. The test code is the same, the setUp and tearDown per test are different.

All subscribers use an empty callback, and exist within generated iFrames. (In general, storage events do not occur in the window setting a value.)

So the test is causing an exception when the iframes are added. I also can't tell how to perform asynchronous setups, to ensure the iframes are loaded.

Having said all that, given the negligible difference in the test results, I'd say the async nature of localStorage events, means any number of listeners may exist.

Preparation HTML

<style>
iframe.test {
  display:none;
}
</style>

<script>
var iframeBox;

window.iframeHTML = '<s' + 'cript>' + 
  'window.addEventListener("storage", function () {parent.console.log("iframe saw this write")}, false);' +
  '</s' + 'cript>';

function addSubscribers(cnt) {
  var iframe;

  iframeBox = document.createElement('div');
  iframeBox.setAttribute('class', 'test');

  while (cnt--) {
    iframe = document.createElement('iframe');
    iframe.src = 'javascript:parent.iframeHTML';
    iframeBox.appendChild(iframe);
  }

  document.body.appendChild(iframeBox);
}
</script>

Setup

// 1 iframe
    ui.benchmarks[1].setup = function () {
      addSubscribers(1);
    };
    
    // 2 iframes
    ui.benchmarks[2].setup = function () {
      addSubscribers(2);
    };
    
    // 5 iframes
    ui.benchmarks[3].setup = function () {
      addSubscribers(5);
    };
    
    // 10 iframes
    ui.benchmarks[4].setup = function () {
      addSubscribers(10);
    };
    
    // 50 iframes
    ui.benchmarks[5].setup = function () {
      addSubscribers(50);
    };

Teardown


    if (iframeBox) {
      document.body.removeChild(iframeBox);
      iframeBox = null;
    }
    localStorage.removeItem('foo');

Test runner

Ready to run.

Testing in
TestOps/sec
Normal (no listeners)
localStorage.setItem('foo', 'bar');
localStorage.getItem('foo');
 
ready
1 listeners
// see test setup
localStorage.setItem('foo', 'bar');
localStorage.getItem('foo');
 
ready
2 listeners
// see test setup
localStorage.setItem('foo', 'bar');
localStorage.getItem('foo');
 
ready
5 listeners
// see test setup
localStorage.setItem('foo', 'bar');
localStorage.getItem('foo');
 
ready
10 listeners
// see test setup
localStorage.setItem('foo', 'bar');
localStorage.getItem('foo');
 
ready
50 listeners
// see test setup
localStorage.setItem('foo', 'bar');
localStorage.getItem('foo');
 
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.

  • Revision 1: published by Bemi Faison on