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 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>→ <a id='link-main-thread' href='#' target='speedtest-main' 41 title='Start speedtest1.html with the selected flags'>speedtest1.html</a> 42 </span> 43 <span>→ <a id='link-wasmfs' href='#' target='speedtest-wasmfs' 44 title='Start speedtest1-wasmfs.html with the selected flags'>speedtest1-wasmfs.html</a> 45 </span> 46 <span>→ <a id='link-kvvfs' href='#' target='speedtest-kvvfs' 47 title='Start speedtest1-kvvfs.html with the selected flags'>speedtest1-kvvfs.html</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 src="common/SqliteTestUtil.js"></script> 130 <script>(function(){ 131 'use strict'; 132 const E = (sel)=>document.querySelector(sel); 133 const eOut = E('#test-output'); 134 const log2 = function(cssClass,...args){ 135 let ln; 136 if(1 || cssClass){ 137 ln = document.createElement('div'); 138 if(cssClass) ln.classList.add(cssClass); 139 ln.append(document.createTextNode(args.join(' '))); 140 }else{ 141 // This doesn't work with the "reverse order" option! 142 ln = document.createTextNode(args.join(' ')+'\n'); 143 } 144 eOut.append(ln); 145 }; 146 const log = (...args)=>{ 147 //console.log(...args); 148 log2('', ...args); 149 }; 150 const logErr = function(...args){ 151 //console.error(...args); 152 log2('error', ...args); 153 }; 154 const logWarn = function(...args){ 155 //console.warn(...args); 156 log2('warning', ...args); 157 }; 158 159 const spacePad = function(str,len=21){ 160 if(str.length===len) return str; 161 else if(str.length>len) return str.substr(0,len); 162 const a = []; a.length = len - str.length; 163 return str+a.join(' '); 164 }; 165 // OPTION elements seem to ignore white-space:pre, so do this the hard way... 166 const nbspPad = function(str,len=21){ 167 if(str.length===len) return str; 168 else if(str.length>len) return str.substr(0,len); 169 const a = []; a.length = len - str.length; 170 return str+a.join(' '); 171 }; 172 173 const W = new Worker("speedtest1-worker.js"+self.location.search); 174 const mPost = function(msgType,payload){ 175 W.postMessage({type: msgType, data: payload}); 176 }; 177 178 const eFlags = E('#select-flags'); 179 const eSelectedFlags = E('#toolbar-selected-flags'); 180 const eLinkMainThread = E('#link-main-thread'); 181 const eLinkWasmfs = E('#link-wasmfs'); 182 const eLinkKvvfs = E('#link-kvvfs'); 183 const urlParams = new URL(self.location.href).searchParams; 184 const getSelectedFlags = ()=>{ 185 const f = Array.prototype.map.call(eFlags.selectedOptions, (v)=>v.value); 186 [ 187 'size', 'vfs' 188 ].forEach(function(k){ 189 if(urlParams.has(k)) f.push('--'+k, urlParams.get(k)); 190 }); 191 return f; 192 }; 193 const updateSelectedFlags = function(){ 194 eSelectedFlags.innerText = ''; 195 const flags = getSelectedFlags(); 196 flags.forEach(function(f){ 197 const e = document.createElement('span'); 198 e.innerText = f; 199 eSelectedFlags.appendChild(e); 200 }); 201 const rxStripDash = /^(-+)?/; 202 const comma = flags.map((v)=>v.replace(rxStripDash,'')).join(','); 203 eLinkMainThread.setAttribute('target', 'speedtest1-main-'+comma); 204 eLinkMainThread.href = 'speedtest1.html?flags='+comma; 205 eLinkWasmfs.setAttribute('target', 'speedtest1-wasmfs-'+comma); 206 eLinkWasmfs.href = 'speedtest1-wasmfs.html?flags='+comma; 207 eLinkKvvfs.setAttribute('target', 'speedtest1-kvvfs-'+comma); 208 eLinkKvvfs.href = 'speedtest1-kvvfs.html?flags='+comma; 209 }; 210 eFlags.addEventListener('change', updateSelectedFlags ); 211 { 212 const flags = Object.create(null); 213 /* TODO? Flags which require values need custom UI 214 controls and some of them make little sense here 215 (e.g. --script FILE). */ 216 flags["autovacuum"] = "Enable AUTOVACUUM mode"; 217 flags["big-transactions"] = "Important for tests 410 and 510!"; 218 //flags["cachesize"] = "N Set the cache size to N"; 219 flags["checkpoint"] = "Run PRAGMA wal_checkpoint after each test case"; 220 flags["exclusive"] = "Enable locking_mode=EXCLUSIVE"; 221 flags["explain"] = "Like --sqlonly but with added EXPLAIN keywords"; 222 //flags["heap"] = "SZ MIN Memory allocator uses SZ bytes & min allocation MIN"; 223 flags["incrvacuum"] = "Enable incremenatal vacuum mode"; 224 //flags["journal"] = "M Set the journal_mode to M"; 225 //flags["key"] = "KEY Set the encryption key to KEY"; 226 //flags["lookaside"] = "N SZ Configure lookaside for N slots of SZ bytes each"; 227 flags["memdb"] = "Use an in-memory database"; 228 //flags["mmap"] = "SZ MMAP the first SZ bytes of the database file"; 229 flags["multithread"] = "Set multithreaded mode"; 230 flags["nomemstat"] = "Disable memory statistics"; 231 flags["nomutex"] = "Open db with SQLITE_OPEN_NOMUTEX"; 232 flags["nosync"] = "Set PRAGMA synchronous=OFF"; 233 flags["notnull"] = "Add NOT NULL constraints to table columns"; 234 //flags["output"] = "FILE Store SQL output in FILE"; 235 //flags["pagesize"] = "N Set the page size to N"; 236 //flags["pcache"] = "N SZ Configure N pages of pagecache each of size SZ bytes"; 237 //flags["primarykey"] = "Use PRIMARY KEY instead of UNIQUE where appropriate"; 238 //flags["repeat"] = "N Repeat each SELECT N times (default: 1)"; 239 flags["reprepare"] = "Reprepare each statement upon every invocation"; 240 //flags["reserve"] = "N Reserve N bytes on each database page"; 241 //flags["script"] = "FILE Write an SQL script for the test into FILE"; 242 flags["serialized"] = "Set serialized threading mode"; 243 flags["singlethread"] = "Set single-threaded mode - disables all mutexing"; 244 flags["sqlonly"] = "No-op. Only show the SQL that would have been run."; 245 flags["shrink"] = "memory Invoke sqlite3_db_release_memory() frequently."; 246 //flags["size"] = "N Relative test size. Default=100"; 247 flags["strict"] = "Use STRICT table where appropriate"; 248 flags["stats"] = "Show statistics at the end"; 249 //flags["temp"] = "N N from 0 to 9. 0: no temp table. 9: all temp tables"; 250 //flags["testset"] = "T Run test-set T (main, cte, rtree, orm, fp, debug)"; 251 flags["trace"] = "Turn on SQL tracing"; 252 //flags["threads"] = "N Use up to N threads for sorting"; 253 /* 254 The core API's WASM build does not support UTF16, but in 255 this app it's not an issue because the data are not crossing 256 JS/WASM boundaries. 257 */ 258 flags["utf16be"] = "Set text encoding to UTF-16BE"; 259 flags["utf16le"] = "Set text encoding to UTF-16LE"; 260 flags["verify"] = "Run additional verification steps."; 261 flags["without"] = "rowid Use WITHOUT ROWID where appropriate"; 262 const preselectedFlags = [ 263 'big-transactions', 264 'memdb', 265 'singlethread' 266 ]; 267 Object.keys(flags).sort().forEach(function(f){ 268 const opt = document.createElement('option'); 269 eFlags.appendChild(opt); 270 const lbl = nbspPad('--'+f)+flags[f]; 271 //opt.innerText = lbl; 272 opt.innerHTML = lbl; 273 opt.value = '--'+f; 274 if(preselectedFlags.indexOf(f) >= 0) opt.selected = true; 275 }); 276 277 const cbReverseLog = E('#cb-reverse-log-order'); 278 const lblReverseLog = E('#lbl-reverse-log-order'); 279 if(cbReverseLog.checked){ 280 lblReverseLog.classList.add('warning'); 281 eOut.classList.add('reverse'); 282 } 283 cbReverseLog.addEventListener('change', function(){ 284 if(this.checked){ 285 eOut.classList.add('reverse'); 286 lblReverseLog.classList.add('warning'); 287 }else{ 288 eOut.classList.remove('reverse'); 289 lblReverseLog.classList.remove('warning'); 290 } 291 }, false); 292 updateSelectedFlags(); 293 } 294 E('#btn-output-clear').addEventListener('click', ()=>{ 295 eOut.innerText = ''; 296 }); 297 E('#btn-reset-flags').addEventListener('click',()=>{ 298 eFlags.value = ''; 299 updateSelectedFlags(); 300 }); 301 E('#btn-run').addEventListener('click',function(){ 302 log("Running speedtest1. UI controls will be disabled until it completes."); 303 mPost('run', getSelectedFlags()); 304 }); 305 306 const eControls = E('#ui-controls'); 307 /** Update Emscripten-related UI elements while loading the module. */ 308 const updateLoadStatus = function f(text){ 309 if(!f.last){ 310 f.last = { text: '', step: 0 }; 311 const E = (cssSelector)=>document.querySelector(cssSelector); 312 f.ui = { 313 status: E('#module-status'), 314 progress: E('#module-progress'), 315 spinner: E('#module-spinner') 316 }; 317 } 318 if(text === f.last.text) return; 319 f.last.text = text; 320 if(f.ui.progress){ 321 f.ui.progress.value = f.last.step; 322 f.ui.progress.max = f.last.step + 1; 323 } 324 ++f.last.step; 325 if(text) { 326 f.ui.status.classList.remove('hidden'); 327 f.ui.status.innerText = text; 328 }else{ 329 if(f.ui.progress){ 330 f.ui.progress.remove(); 331 f.ui.spinner.remove(); 332 delete f.ui.progress; 333 delete f.ui.spinner; 334 } 335 f.ui.status.classList.add('hidden'); 336 } 337 }; 338 339 W.onmessage = function(msg){ 340 msg = msg.data; 341 switch(msg.type){ 342 case 'ready': 343 log("Worker is ready."); 344 eControls.classList.remove('hidden'); 345 break; 346 case 'stdout': log(msg.data); break; 347 case 'stdout': logErr(msg.data); break; 348 case 'run-start': 349 eControls.disabled = true; 350 log("Running speedtest1 with argv =",msg.data.join(' ')); 351 break; 352 case 'run-end': 353 log("speedtest1 finished."); 354 eControls.disabled = false; 355 // app output is in msg.data 356 break; 357 case 'error': logErr(msg.data); break; 358 case 'load-status': updateLoadStatus(msg.data); break; 359 default: 360 logErr("Unhandled worker message type:",msg); 361 break; 362 } 363 }; 364 })();</script> 365 </body> 366</html> 367