1<!doctype html>
2<html lang="en-us">
3  <head>
4    <meta charset="utf-8">
5    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
6    <link rel="shortcut icon" href="data:image/x-icon;," type="image/x-icon">
7    <link rel="stylesheet" href="common/emscripten.css"/>
8    <link rel="stylesheet" href="common/testing.css"/>
9    <title>speedtest1.wasm Worker</title>
10  </head>
11  <body>
12    <header id='titlebar'>speedtest1.wasm Worker</header>
13    <div>See also: <a href='speedtest1.html'>A main-thread variant of this page.</a></div>
14    <!-- emscripten bits -->
15    <figure id="module-spinner">
16      <div class="spinner"></div>
17      <div class='center'><strong>Initializing app...</strong></div>
18      <div class='center'>
19        On a slow internet connection this may take a moment.  If this
20        message displays for "a long time", intialization may have
21        failed and the JavaScript console may contain clues as to why.
22      </div>
23    </figure>
24    <div class="emscripten" id="module-status">Downloading...</div>
25    <div class="emscripten">
26      <progress value="0" max="100" id="module-progress" hidden='1'></progress>
27    </div><!-- /emscripten bits -->
28    <fieldset id='ui-controls' class='hidden'>
29      <legend>Options</legend>
30      <div id='toolbar'>
31        <div id='toolbar-select'>
32          <select id='select-flags' size='10' multiple></select>
33          <div>The following flags can be passed as URL parameters:
34            vfs=NAME, size=N, journal=MODE, cachesize=SIZE
35          </div>
36        </div>
37        <div class='toolbar-inner-vertical'>
38          <div id='toolbar-selected-flags'></div>
39          <div class='toolbar-inner-vertical'>
40            <span>&rarr; <a id='link-main-thread' href='#' target='speedtest-main'
41                            title='Start speedtest1.html with the selected flags'>speedtest1</a>
42            </span>
43            <span>&rarr; <a id='link-wasmfs' href='#' target='speedtest-wasmfs'
44                            title='Start speedtest1-wasmfs.html with the selected flags'>speedtest1-wasmfs</a>
45            </span>
46            <span>&rarr; <a id='link-kvvfs' href='#' target='speedtest-kvvfs'
47                            title='Start kvvfs speedtest1 with the selected flags'>speedtest1-kvvfs</a>
48            </span>
49          </div>
50        </div>
51        <div class='toolbar-inner-vertical' id='toolbar-runner-controls'>
52          <button id='btn-reset-flags'>Reset Flags</button>
53          <button id='btn-output-clear'>Clear output</button>
54          <button id='btn-run'>Run</button>
55        </div>
56      </div>
57    </fieldset>
58    <div>
59      <span class='input-wrapper'>
60        <input type='checkbox' class='disable-during-eval' id='cb-reverse-log-order' checked></input>
61        <label for='cb-reverse-log-order' id='lbl-reverse-log-order'>Reverse log order</label>
62      </span>
63    </div>
64    <div id='test-output'>
65    </div>
66    <div id='tips'>
67      <strong>Tips:</strong>
68      <ul>
69        <li>Control-click the flags to (de)select multiple flags.</li>
70        <li>The <tt>--big-transactions</tt> flag is important for two
71          of the bigger tests. Without it, those tests create a
72          combined total of 140k implicit transactions, reducing their
73          speed to an absolute crawl, especially when WASMFS is
74          activated.
75        </li>
76        <li>The easiest way to try different optimization levels is,
77          from this directory:
78          <pre>$ rm -f speedtest1.js; make -e emcc_opt='-O2' speedtest1.js</pre>
79          Then reload this page. -O2 seems to consistently produce the fastest results.
80        </li>
81        </ul>
82    </div>
83    <style>
84      #test-output {
85          white-space: break-spaces;
86          overflow: auto;
87      }
88      div#tips { margin-top: 1em; }
89      #toolbar {
90          display: flex;
91          flex-direction: row;
92          flex-wrap: wrap;
93      }
94      #toolbar > * {
95          margin: 0 0.5em;
96      }
97      .toolbar-inner-vertical {
98          display: flex;
99          flex-direction: column;
100          justify-content: space-between;
101      }
102      #toolbar-select {
103          display: flex;
104          flex-direction: column;
105      }
106      .toolbar-inner-vertical > *, #toolbar-select > * {
107          margin: 0.2em 0;
108      }
109      #select-flags > option {
110          white-space: pre;
111          font-family: monospace;
112      }
113      fieldset {
114          border-radius: 0.5em;
115      }
116      #toolbar-runner-controls { flex-grow: 1 }
117      #toolbar-runner-controls > * { flex: 1 0 auto }
118      #toolbar-selected-flags::before {
119        font-family: initial;
120        content:"Selected flags: ";
121      }
122      #toolbar-selected-flags {
123        display: flex;
124        flex-direction: column;
125        font-family: monospace;
126        justify-content: flex-start;
127      }
128    </style>
129    <script>(function(){
130    'use strict';
131    const E = (sel)=>document.querySelector(sel);
132    const eOut = E('#test-output');
133    const log2 = function(cssClass,...args){
134        let ln;
135        if(1 || cssClass){
136            ln = document.createElement('div');
137            if(cssClass) ln.classList.add(cssClass);
138            ln.append(document.createTextNode(args.join(' ')));
139        }else{
140            // This doesn't work with the "reverse order" option!
141            ln = document.createTextNode(args.join(' ')+'\n');
142        }
143        eOut.append(ln);
144    };
145    const log = (...args)=>{
146        //console.log(...args);
147        log2('', ...args);
148    };
149    const logErr = function(...args){
150        console.error(...args);
151        log2('error', ...args);
152    };
153    const logWarn = function(...args){
154        console.warn(...args);
155        log2('warning', ...args);
156    };
157
158    const spacePad = function(str,len=21){
159        if(str.length===len) return str;
160        else if(str.length>len) return str.substr(0,len);
161        const a = []; a.length = len - str.length;
162        return str+a.join(' ');
163    };
164    // OPTION elements seem to ignore white-space:pre, so do this the hard way...
165    const nbspPad = function(str,len=21){
166        if(str.length===len) return str;
167        else if(str.length>len) return str.substr(0,len);
168        const a = []; a.length = len - str.length;
169        return str+a.join('&nbsp;');
170    };
171
172    const urlParams = new URL(self.location.href).searchParams;
173    const W = new Worker(
174        "speedtest1-worker.js?sqlite3.dir=jswasm"+
175            (urlParams.has('opfs-verbose') ? '&opfs-verbose' : '')
176    );
177    const mPost = function(msgType,payload){
178        W.postMessage({type: msgType, data: payload});
179    };
180
181    const eFlags = E('#select-flags');
182    const eSelectedFlags = E('#toolbar-selected-flags');
183    const eLinkMainThread = E('#link-main-thread');
184    const eLinkWasmfs = E('#link-wasmfs');
185    const eLinkKvvfs = E('#link-kvvfs');
186    const getSelectedFlags = ()=>{
187        const f = Array.prototype.map.call(eFlags.selectedOptions, (v)=>v.value);
188        [
189            'size', 'vfs', 'journal', 'cachesize'
190        ].forEach(function(k){
191            if(urlParams.has(k)) f.push('--'+k, urlParams.get(k));
192        });
193        return f;
194    };
195    const updateSelectedFlags = function(){
196        eSelectedFlags.innerText = '';
197        const flags = getSelectedFlags();
198        flags.forEach(function(f){
199            const e = document.createElement('span');
200            e.innerText = f;
201            eSelectedFlags.appendChild(e);
202        });
203        const rxStripDash = /^(-+)?/;
204        const comma = flags.join(',');
205        eLinkMainThread.setAttribute('target', 'speedtest1-main-'+comma);
206        eLinkMainThread.href = 'speedtest1.html?flags='+comma;
207        eLinkWasmfs.setAttribute('target', 'speedtest1-wasmfs-'+comma);
208        eLinkWasmfs.href = 'speedtest1-wasmfs.html?flags='+comma;
209        eLinkKvvfs.setAttribute('target', 'speedtest1-kvvfs-'+comma);
210        eLinkKvvfs.href = 'speedtest1.html?vfs=kvvfs&flags='+comma;
211    };
212    eFlags.addEventListener('change', updateSelectedFlags );
213    {
214        const flags = Object.create(null);
215        /* TODO? Flags which require values need custom UI
216           controls and some of them make little sense here
217           (e.g. --script FILE). */
218        flags["--autovacuum"] = "Enable AUTOVACUUM mode";
219        flags["--big-transactions"] = "Important for tests 410 and 510!";
220        //flags["--cachesize"] = "N       Set the cache size to N pages";
221        flags["--checkpoint"] = "Run PRAGMA wal_checkpoint after each test case";
222        flags["--exclusive"] = "Enable locking_mode=EXCLUSIVE";
223        flags["--explain"] = "Like --sqlonly but with added EXPLAIN keywords";
224        //flags["--heap"] = "SZ MIN       Memory allocator uses SZ bytes & min allocation MIN";
225        flags["--incrvacuum"] = "Enable incremenatal vacuum mode";
226        //flags["--journal"] = "M         Set the journal_mode to M";
227        //flags["--key"] = "KEY           Set the encryption key to KEY";
228        //flags["--lookaside"] = "N SZ    Configure lookaside for N slots of SZ bytes each";
229        flags["--memdb"] = "Use an in-memory database";
230        //flags["--mmap"] = "SZ           MMAP the first SZ bytes of the database file";
231        flags["--multithread"] = "Set multithreaded mode";
232        flags["--nomemstat"] = "Disable memory statistics";
233        flags["--nomutex"] = "Open db with SQLITE_OPEN_NOMUTEX";
234        flags["--nosync"] = "Set PRAGMA synchronous=OFF";
235        flags["--notnull"] = "Add NOT NULL constraints to table columns";
236        //flags["--output"] = "FILE       Store SQL output in FILE";
237        //flags["--pagesize"] = "N        Set the page size to N";
238        //flags["--pcache"] = "N SZ       Configure N pages of pagecache each of size SZ bytes";
239        //flags["--primarykey"] = "Use PRIMARY KEY instead of UNIQUE where appropriate";
240        //flags["--repeat"] = "N          Repeat each SELECT N times (default: 1)";
241        flags["--reprepare"] = "Reprepare each statement upon every invocation";
242        //flags["--reserve"] = "N         Reserve N bytes on each database page";
243        //flags["--script"] = "FILE       Write an SQL script for the test into FILE";
244        flags["--serialized"] = "Set serialized threading mode";
245        flags["--singlethread"] = "Set single-threaded mode - disables all mutexing";
246        flags["--sqlonly"] = "No-op.  Only show the SQL that would have been run.";
247        flags["--shrink-memory"] = "Invoke sqlite3_db_release_memory() frequently.";
248        //flags["--size"] = "N            Relative test size.  Default=100";
249        flags["--strict"] = "Use STRICT table where appropriate";
250        flags["--stats"] = "Show statistics at the end";
251        //flags["--temp"] = "N            N from 0 to 9.  0: no temp table. 9: all temp tables";
252        //flags["--testset"] = "T         Run test-set T (main, cte, rtree, orm, fp, debug)";
253        flags["--trace"] = "Turn on SQL tracing";
254        //flags["--threads"] = "N         Use up to N threads for sorting";
255        /*
256          The core API's WASM build does not support UTF16, but in
257          this app it's not an issue because the data are not crossing
258          JS/WASM boundaries.
259        */
260        flags["--utf16be"] = "Set text encoding to UTF-16BE";
261        flags["--utf16le"] = "Set text encoding to UTF-16LE";
262        flags["--verify"] = "Run additional verification steps.";
263        flags["--without"] = "rowid     Use WITHOUT ROWID where appropriate";
264        const preselectedFlags = [
265            '--big-transactions',
266            '--singlethread'
267        ];
268        if(urlParams.has('flags')){
269            preselectedFlags.push(...urlParams.get('flags').split(','));
270        }
271        if('opfs'!==urlParams.get('vfs')){
272            preselectedFlags.push('--memdb');
273        }
274        Object.keys(flags).sort().forEach(function(f){
275            const opt = document.createElement('option');
276            eFlags.appendChild(opt);
277            const lbl = nbspPad(f)+flags[f];
278            //opt.innerText = lbl;
279            opt.innerHTML = lbl;
280            opt.value = f;
281            if(preselectedFlags.indexOf(f) >= 0) opt.selected = true;
282        });
283        const cbReverseLog = E('#cb-reverse-log-order');
284        const lblReverseLog = E('#lbl-reverse-log-order');
285        if(cbReverseLog.checked){
286            lblReverseLog.classList.add('warning');
287            eOut.classList.add('reverse');
288        }
289        cbReverseLog.addEventListener('change', function(){
290            if(this.checked){
291                eOut.classList.add('reverse');
292                lblReverseLog.classList.add('warning');
293            }else{
294                eOut.classList.remove('reverse');
295                lblReverseLog.classList.remove('warning');
296            }
297        }, false);
298        updateSelectedFlags();
299    }
300    E('#btn-output-clear').addEventListener('click', ()=>{
301        eOut.innerText = '';
302    });
303    E('#btn-reset-flags').addEventListener('click',()=>{
304        eFlags.value = '';
305        updateSelectedFlags();
306    });
307    E('#btn-run').addEventListener('click',function(){
308        log("Running speedtest1. UI controls will be disabled until it completes.");
309        mPost('run', getSelectedFlags());
310    });
311
312    const eControls = E('#ui-controls');
313    /** Update Emscripten-related UI elements while loading the module. */
314    const updateLoadStatus = function f(text){
315        if(!f.last){
316            f.last = { text: '', step: 0 };
317            const E = (cssSelector)=>document.querySelector(cssSelector);
318            f.ui = {
319                status: E('#module-status'),
320                progress: E('#module-progress'),
321                spinner: E('#module-spinner')
322            };
323        }
324        if(text === f.last.text) return;
325        f.last.text = text;
326        if(f.ui.progress){
327            f.ui.progress.value = f.last.step;
328            f.ui.progress.max = f.last.step + 1;
329        }
330        ++f.last.step;
331        if(text) {
332            f.ui.status.classList.remove('hidden');
333            f.ui.status.innerText = text;
334        }else{
335            if(f.ui.progress){
336                f.ui.progress.remove();
337                f.ui.spinner.remove();
338                delete f.ui.progress;
339                delete f.ui.spinner;
340            }
341            f.ui.status.classList.add('hidden');
342        }
343    };
344
345    W.onmessage = function(msg){
346        msg = msg.data;
347        switch(msg.type){
348            case 'ready':
349                log("Worker is ready.");
350                eControls.classList.remove('hidden');
351                break;
352            case 'stdout': log(msg.data); break;
353            case 'stdout': logErr(msg.data); break;
354            case 'run-start':
355                eControls.disabled = true;
356                log("Running speedtest1 with argv =",msg.data.join(' '));
357                break;
358            case 'run-end':
359                log("speedtest1 finished.");
360                eControls.disabled = false;
361                // app output is in msg.data
362                break;
363            case 'error': logErr(msg.data); break;
364            case 'load-status': updateLoadStatus(msg.data); break;
365            default:
366                logErr("Unhandled worker message type:",msg);
367                break;
368        }
369    };
370})();</script>
371  </body>
372</html>
373