Last active
August 20, 2018 22:56
-
-
Save nolanlawson/dc86c19977de63c49968309fea2f66f3 to your computer and use it in GitHub Desktop.
Cross-tab communication benchmark
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <meta http-equiv="X-UA-Compatible" content="ie=edge"> | |
| <title>Cross-tab communication test</title> | |
| </head> | |
| <body> | |
| <h1>Cross-tab communication test</h1> | |
| <p>Click "open new tab," then in the other tab, click "Run perf test."</p> | |
| <button id="newTabButton">Open new tab</button> | |
| <pre id="display"></pre> | |
| <script> | |
| (function () { | |
| 'use strict' | |
| var $ = document.querySelector.bind(document) | |
| $('#newTabButton').addEventListener('click', function (e) { | |
| window.open('./other.html') | |
| }) | |
| function Communicator() { | |
| this.listeners = [] | |
| } | |
| Communicator.prototype.sendMessage = function (msg) { | |
| this.listeners.forEach(function (listener) { | |
| listener(msg) | |
| }) | |
| } | |
| Communicator.prototype.addMessageListener = function (listener) { | |
| this.listeners.push(listener) | |
| } | |
| window.communicator = new Communicator() | |
| window.communicator.addMessageListener(function (msg) { | |
| //console.log(msg) | |
| }) | |
| })() | |
| </script> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <meta http-equiv="X-UA-Compatible" content="ie=edge"> | |
| <title>Second tab</title> | |
| </head> | |
| <body> | |
| <h1>Second tab</h1> | |
| <button id="runPerfTestButton">Run perf test</button> | |
| <pre id="display"></pre> | |
| <script> | |
| (function () { | |
| 'use strict' | |
| var $ = document.querySelector.bind(document) | |
| $('#runPerfTestButton').addEventListener('click', function (e) { | |
| var ts = Date.now() | |
| performance.mark('start-' + ts) | |
| for (var i = 0; i < 100; i++) { | |
| window.opener.communicator.sendMessage('foo') | |
| } | |
| performance.mark('end-' + ts) | |
| performance.measure('total-' + ts, 'start-' + ts, 'end-' + ts) | |
| var duration = performance.getEntriesByName('total-' + ts)[0].duration | |
| display.innerHTML += 'Duration: ' + duration + 'ms\n' | |
| }) | |
| })() | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment