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