From 57e2933a98e462eba5e0e232c84338dbea5035c9 Mon Sep 17 00:00:00 2001 From: Matthias Wirth Date: Tue, 21 May 2024 18:57:48 +0200 Subject: [PATCH] try some webworkers no measurable benefit but maybe useful in the future creates random hangs, just don't use it for the time being some minor loading order adjustments that bring planes on the screen a bit faster --- html/early.js | 49 ++++++++++++++++++++--- html/jsonWorker.js | 15 +++++++ html/layers.js | 2 +- html/script.js | 98 +++++++++++++++++++++++++--------------------- 4 files changed, 114 insertions(+), 50 deletions(-) create mode 100644 html/jsonWorker.js diff --git a/html/early.js b/html/early.js index 6e9b490..f7cec98 100644 --- a/html/early.js +++ b/html/early.js @@ -583,16 +583,54 @@ function get_history() { } historyQueued.resolve(); } +function handleJsonWorker(e) { + const url = e.data.url; + //console.log("url finished: " + url); + const defer = g.jwr[url]; + delete g.jwr[url]; + + defer.resolve(e.data.json); +}; + +function jsonGetWorker(url) { + const defer = jQuery.Deferred(); + g.jwr[url] = defer; + const wid = g.jsonGetId++ % g.jsonWorker.length; + //console.log(`using worker ${wid}`); + g.jsonWorker[wid].postMessage(url); + + return defer; +} + +g.jWorkers = 0; +if (g.jWorkers) { + g.jwr = {}; + + g.jsonWorker = []; + g.jsonGetId = 0; + + for (let i = 0; i < g.jWorkers; i++) { + const worker = new Worker("jsonWorker.js"); + g.jsonWorker.push(worker); + worker.onmessage = handleJsonWorker; + } + +} function get_history_item(i) { let request; if (HistoryChunks) { - let filename = chunkNames[i]; - request = jQuery.ajax({ url: 'chunks/' + filename, - timeout: historyTimeout * 1000, - dataType: 'json' - }); + const url = 'chunks/' + chunkNames[i]; + + if (g.jWorkers) { + request = jsonGetWorker(url); + } else { + request = jQuery.ajax({ url: url, + timeout: historyTimeout * 1000, + dataType: 'json' + }); + } } else { request = jQuery.ajax({ url: 'data/history_' + i + '.json', @@ -608,6 +646,7 @@ function get_history_item(i) { .fail(function(jqxhr, status, error) { jQuery("#loader_progress").attr('value',++HistoryItemsLoaded); }); + deferHistory.push(request); } diff --git a/html/jsonWorker.js b/html/jsonWorker.js new file mode 100644 index 0000000..9209adc --- /dev/null +++ b/html/jsonWorker.js @@ -0,0 +1,15 @@ + +onmessage = (e) => { + const url = e.data; + fetch(new Request(url)) + .then((response) => { + if (!response.ok) { + throw new Error(`HTTP error! Status: ${response.status} ${response.url}`); + } + return response.json(); + }) + .then((data) => { + //console.log("worker posting data with url: " + url); + postMessage({ url: url, json: data }); + }) +}; diff --git a/html/layers.js b/html/layers.js index 26deeee..42570b5 100644 --- a/html/layers.js +++ b/html/layers.js @@ -22,7 +22,7 @@ function createBaseLayers() { let us = new ol.Collection(); let europe = new ol.Collection(); - const tileTransition = onMobile ? 0 : 150; + const tileTransition = onMobile ? 0 : 0; if (loStore['customTiles'] != undefined) { custom_layers.push(new ol.layer.Tile({ diff --git a/html/script.js b/html/script.js index 56266c0..b8c5308 100644 --- a/html/script.js +++ b/html/script.js @@ -508,7 +508,7 @@ function afterFirstFetch() { } console.timeEnd('afterFirstFetch()'); - }, 150); + }, 50); } let debugFetch = false; @@ -720,29 +720,32 @@ function initialize() { processQueryToggles(); - jQuery.when(historyQueued).done(push_history); - - if (nHistoryItems) { - jQuery.when(historyLoaded).done(afterHistoryLoad); - } else { - afterHistoryLoad(); - } + tryStartPage(); }); } -function afterHistoryLoad() { - if (!heatmap) - jQuery("#loader").hide(); - if (!zstdDecode) { +function doHistory() { + + jQuery.when(historyQueued).done(push_history); + + if (nHistoryItems) { + jQuery.when(historyLoaded).done(startPage); + } else { startPage(); + } +} + +function tryStartPage() { + if (!zstdDecode) { + doHistory(); } else { try { zstddec.promise.then(function() { - startPage(); + doHistory(); }); } catch (e) { webAssemblyFail(e); - startPage(); + doHistory(); } } } @@ -1670,6 +1673,29 @@ jQuery('#selected_altitude_geom1') jQuery('#imageConfigLink').text(imageConfigText) jQuery('#imageConfigHeader').show(); } + + + if (!globeIndex) { + jQuery("#lastLeg_cb").parent().hide(); + jQuery('#show_trace').hide(); + } + if (globeIndex) { + toggleTableInView('enable'); + if (icaoFilter) { + toggleTableInView('disable'); + } + } else { + jQuery('#V').show(); + } + + if (hideButtons) { + jQuery('#header_top').hide(); + jQuery('#header_side').hide(); + jQuery('#tabs').hide(); + jQuery('#filterButton').hide(); + jQuery('.ol-control').hide(); + jQuery('.ol-attribution').show(); + } } function initLegend(colors) { @@ -1909,8 +1935,6 @@ function parseHistory() { plane.last_message_time -= 999; } } - refreshFeatures(); - TAR.planeMan.refresh(); } console.timeEnd("Loaded aircraft tracks from History"); @@ -1982,7 +2006,7 @@ function setIntervalTimers() { } if (receiverJson && receiverJson.outlineJson) { timers.drawOutline = window.setInterval(drawOutlineJson, actualOutline.refresh); - drawOutlineJson(); + setTimeout(drawOutlineJson, 50); } if (aiscatcher_server) { @@ -2003,7 +2027,12 @@ function setIntervalTimers() { } timersActive = true; - fetchData(); + + setTimeout(fetchData, 5); + + updateVisible(); + mapRefresh(); + // in case the visibility changed while this was running handleVisibilityChange(); } @@ -2013,28 +2042,8 @@ let dstring; let dresult; function startPage() { - - if (!globeIndex) { - jQuery("#lastLeg_cb").parent().hide(); - jQuery('#show_trace').hide(); - } - if (globeIndex) { - toggleTableInView('enable'); - if (icaoFilter) { - toggleTableInView('disable'); - } - } else { - jQuery('#V').show(); - } - - if (hideButtons) { - jQuery('#header_top').hide(); - jQuery('#header_side').hide(); - jQuery('#tabs').hide(); - jQuery('#filterButton').hide(); - jQuery('.ol-control').hide(); - jQuery('.ol-attribution').show(); - } + if (!heatmap) + jQuery("#loader").hide(); changeZoom("init"); changeCenter("init"); @@ -2076,9 +2085,7 @@ function startPage() { if (pTracks) setTimeout(TAR.planeMan.refresh, 10000); - window.addEventListener("beforeunload", function (event) { - clearIntervalTimers(); - }); + window.addEventListener("beforeunload", clearIntervalTimers); if (heatmap || replay || showTrace || pTracks || inhibitFetch) { afterFirstFetch(); @@ -5489,10 +5496,13 @@ function refresh(redraw) { // before planeman refresh / mapRefresh updateVisible(); + mapRefresh(redraw); + //console.time("refreshTable"); TAR.planeMan.refresh(); //console.timeEnd("refreshTable"); - mapRefresh(redraw); + + refreshSelected(); refreshHighlighted();