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