Skip to content

Commit a878043

Browse files
Ashutoshx7Ashutoshx7
committed
perf: replace Firefox 5s delay with readiness-based initialization
Instead of an arbitrary 5-second setTimeout for Firefox, this change introduces a waitForReadiness() function that polls for actual dependency readiness before initializing the app. The new approach: - Polls every animation frame for critical dependencies (createjs, Howler, jQuery) - Checks for required DOM elements (canvas, loader, toolbars) - Initializes as soon as ready (minimum 500ms for stability) - Falls back to initialization after maximum 10s timeout - Logs actual initialization time for debugging Benefits: - Fast Firefox machines: ~500-800ms instead of 5000ms - Slow Firefox machines: waits appropriately up to 10s - Provides insight via console logging - Future-proof: adapts to actual dependencies This addresses technical debt from 2015 when the arbitrary delay was introduced as a workaround for Firefox hardware acceleration issues.
1 parent da12f94 commit a878043

File tree

2 files changed

+136
-69
lines changed

2 files changed

+136
-69
lines changed

‎js/activity.js‎

Lines changed: 73 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,8 @@
3737
SPECIALINPUTS, STANDARDBLOCKHEIGHT, StatsWindow, STROKECOLORS,
3838
TENOR, TITLESTRING, Toolbar, Trashcan, TREBLE, Turtles, TURTLESVG,
3939
updatePluginObj, ZERODIVIDEERRORMSG, GRAND_G, GRAND_F,
40-
SHARP, FLAT, buildScale, TREBLE_F, TREBLE_G, GIFAnimator
40+
SHARP, FLAT, buildScale, TREBLE_F, TREBLE_G, GIFAnimator,
41+
waitForReadiness
4142
*/
4243

4344
/*
@@ -1900,9 +1901,8 @@ class Activity {
19001901
// Queue and take first step.
19011902
if (!this.turtles.running()) {
19021903
this.logo.runLogoCommands();
1903-
document.getElementById(
1904-
"stop"
1905-
).style.color = this.toolbar.stopIconColorWhenPlaying;
1904+
document.getElementById("stop").style.color =
1905+
this.toolbar.stopIconColorWhenPlaying;
19061906
}
19071907
this.logo.step();
19081908
} else {
@@ -2054,7 +2054,7 @@ class Activity {
20542054
const changeText = () => {
20552055
const randomLoadMessage =
20562056
messages.load_messages[
2057-
Math.floor(Math.random() * messages.load_messages.length)
2057+
Math.floor(Math.random() * messages.load_messages.length)
20582058
];
20592059
document.getElementById("messageText").innerHTML = randomLoadMessage + "...";
20602060
counter++;
@@ -2221,9 +2221,8 @@ class Activity {
22212221
i < this.palettes.dict[this.palettes.activePalette].protoList.length;
22222222
i++
22232223
) {
2224-
const name = this.palettes.dict[this.palettes.activePalette].protoList[i][
2225-
"name"
2226-
];
2224+
const name =
2225+
this.palettes.dict[this.palettes.activePalette].protoList[i]["name"];
22272226
if (name in obj["FLOWPLUGINS"]) {
22282227
// eslint-disable-next-line no-console
22292228
console.log("deleting " + name);
@@ -2998,11 +2997,11 @@ class Activity {
29982997
.data("item.autocomplete", item)
29992998
.append(
30002999
'<img src="' +
3001-
item.artwork +
3002-
'" height="20px">' +
3003-
"<a> " +
3004-
item.label +
3005-
"</a>"
3000+
item.artwork +
3001+
'" height="20px">' +
3002+
"<a> " +
3003+
item.label +
3004+
"</a>"
30063005
)
30073006
.appendTo(
30083007
ul.css({
@@ -4355,8 +4354,8 @@ class Activity {
43554354
console.log(
43564355
"%cMusic Blocks",
43574356
"font-size: 24px; font-weight: bold; font-family: sans-serif; padding:20px 0 0 110px; background: url(" +
4358-
imgUrl +
4359-
") no-repeat;"
4357+
imgUrl +
4358+
") no-repeat;"
43604359
);
43614360
// eslint-disable-next-line no-console
43624361
console.log(
@@ -4428,10 +4427,10 @@ class Activity {
44284427
typeof flags !== "undefined"
44294428
? flags
44304429
: {
4431-
run: false,
4432-
show: false,
4433-
collapse: false
4434-
};
4430+
run: false,
4431+
show: false,
4432+
collapse: false
4433+
};
44354434
this.loading = true;
44364435
document.body.style.cursor = "wait";
44374436
this.doLoadAnimation();
@@ -4794,9 +4793,8 @@ class Activity {
47944793
[
47954794
"nameddo",
47964795
{
4797-
value: `V: ${parseInt(lineId) + 1} Line ${
4798-
staffBlocksMap[lineId]?.baseBlocks?.length + 1
4799-
}`
4796+
value: `V: ${parseInt(lineId) + 1} Line ${staffBlocksMap[lineId]?.baseBlocks?.length + 1
4797+
}`
48004798
}
48014799
],
48024800
0,
@@ -4805,12 +4803,12 @@ class Activity {
48054803
staffBlocksMap[lineId].baseBlocks.length === 0
48064804
? null
48074805
: staffBlocksMap[lineId].baseBlocks[
4808-
staffBlocksMap[lineId].baseBlocks.length - 1
4809-
][0][
4810-
staffBlocksMap[lineId].baseBlocks[
4811-
staffBlocksMap[lineId].baseBlocks.length - 1
4812-
][0].length - 4
4813-
][0],
4806+
staffBlocksMap[lineId].baseBlocks.length - 1
4807+
][0][
4808+
staffBlocksMap[lineId].baseBlocks[
4809+
staffBlocksMap[lineId].baseBlocks.length - 1
4810+
][0].length - 4
4811+
][0],
48144812
null
48154813
]
48164814
],
@@ -4826,9 +4824,8 @@ class Activity {
48264824
[
48274825
"text",
48284826
{
4829-
value: `V: ${parseInt(lineId) + 1} Line ${
4830-
staffBlocksMap[lineId]?.baseBlocks?.length + 1
4831-
}`
4827+
value: `V: ${parseInt(lineId) + 1} Line ${staffBlocksMap[lineId]?.baseBlocks?.length + 1
4828+
}`
48324829
}
48334830
],
48344831
0,
@@ -4863,14 +4860,14 @@ class Activity {
48634860
staffBlocksMap[staffIndex].startBlock.length - 3
48644861
][4][2] =
48654862
staffBlocksMap[staffIndex].baseBlocks[0][0][
4866-
staffBlocksMap[staffIndex].baseBlocks[0][0].length - 4
4863+
staffBlocksMap[staffIndex].baseBlocks[0][0].length - 4
48674864
][0];
48684865
// Update the first namedo block with settimbre
48694866
staffBlocksMap[staffIndex].baseBlocks[0][0][
48704867
staffBlocksMap[staffIndex].baseBlocks[0][0].length - 4
48714868
][4][0] =
48724869
staffBlocksMap[staffIndex].startBlock[
4873-
staffBlocksMap[staffIndex].startBlock.length - 3
4870+
staffBlocksMap[staffIndex].startBlock.length - 3
48744871
][0];
48754872
const repeatblockids = staffBlocksMap[staffIndex].repeatArray;
48764873
for (const repeatId of repeatblockids) {
@@ -4882,7 +4879,7 @@ class Activity {
48824879
0,
48834880
[
48844881
staffBlocksMap[staffIndex].startBlock[
4885-
staffBlocksMap[staffIndex].startBlock.length - 3
4882+
staffBlocksMap[staffIndex].startBlock.length - 3
48864883
][0] /*setribmre*/,
48874884
blockId + 1,
48884885
staffBlocksMap[staffIndex].nameddoArray[staffIndex][0],
@@ -4891,8 +4888,8 @@ class Activity {
48914888
] === null
48924889
? null
48934890
: staffBlocksMap[staffIndex].nameddoArray[staffIndex][
4894-
repeatId.end + 1
4895-
]
4891+
repeatId.end + 1
4892+
]
48964893
]
48974894
]);
48984895
staffBlocksMap[staffIndex].repeatBlock.push([
@@ -4926,7 +4923,7 @@ class Activity {
49264923
const secondnammedo = _searchIndexForMusicBlock(
49274924
staffBlocksMap[staffIndex].baseBlocks[repeatId.end + 1][0],
49284925
staffBlocksMap[staffIndex].nameddoArray[staffIndex][
4929-
repeatId.end + 1
4926+
repeatId.end + 1
49304927
]
49314928
);
49324929

@@ -4937,9 +4934,8 @@ class Activity {
49374934
}
49384935
}
49394936
staffBlocksMap[staffIndex].baseBlocks[0][0][firstnammedo][4][0] = blockId;
4940-
staffBlocksMap[staffIndex].baseBlocks[repeatId.end][0][
4941-
endnammedo
4942-
][4][1] = null;
4937+
staffBlocksMap[staffIndex].baseBlocks[repeatId.end][0][endnammedo][4][1] =
4938+
null;
49434939

49444940
blockId += 2;
49454941
} else {
@@ -4950,31 +4946,31 @@ class Activity {
49504946
const prevnameddo = _searchIndexForMusicBlock(
49514947
staffBlocksMap[staffIndex].baseBlocks[repeatId.start - 1][0],
49524948
staffBlocksMap[staffIndex].baseBlocks[repeatId.start][0][
4953-
currentnammeddo
4949+
currentnammeddo
49544950
][4][0]
49554951
);
49564952
const afternamedo = _searchIndexForMusicBlock(
49574953
staffBlocksMap[staffIndex].baseBlocks[repeatId.end][0],
49584954
staffBlocksMap[staffIndex].baseBlocks[repeatId.start][0][
4959-
currentnammeddo
4955+
currentnammeddo
49604956
][4][1]
49614957
);
49624958
let prevrepeatnameddo = -1;
49634959
if (prevnameddo === -1) {
49644960
prevrepeatnameddo = _searchIndexForMusicBlock(
49654961
staffBlocksMap[staffIndex].repeatBlock,
49664962
staffBlocksMap[staffIndex].baseBlocks[repeatId.start][0][
4967-
currentnammeddo
4963+
currentnammeddo
49684964
][4][0]
49694965
);
49704966
}
49714967
const prevBlockId =
49724968
staffBlocksMap[staffIndex].baseBlocks[repeatId.start][0][
4973-
currentnammeddo
4969+
currentnammeddo
49744970
][4][0];
49754971
const currentBlockId =
49764972
staffBlocksMap[staffIndex].baseBlocks[repeatId.start][0][
4977-
currentnammeddo
4973+
currentnammeddo
49784974
][0];
49794975

49804976
// Needs null checking optmizie
@@ -4988,7 +4984,7 @@ class Activity {
49884984
0,
49894985
[
49904986
staffBlocksMap[staffIndex].baseBlocks[repeatId.start][0][
4991-
currentnammeddo
4987+
currentnammeddo
49924988
][4][0],
49934989
blockId + 1,
49944990
currentBlockId,
@@ -5007,9 +5003,8 @@ class Activity {
50075003
prevnameddo
50085004
][4][1] = blockId;
50095005
} else {
5010-
staffBlocksMap[staffIndex].repeatBlock[
5011-
prevrepeatnameddo
5012-
][4][3] = blockId;
5006+
staffBlocksMap[staffIndex].repeatBlock[prevrepeatnameddo][4][3] =
5007+
blockId;
50135008
}
50145009
if (afternamedo !== -1) {
50155010
staffBlocksMap[staffIndex].baseBlocks[repeatId.end][0][
@@ -5603,7 +5598,7 @@ class Activity {
56035598
this.update = true;
56045599
};
56055600

5606-
this.__showAltoAccidentals = () => {};
5601+
this.__showAltoAccidentals = () => { };
56075602

56085603
/*
56095604
* Shows musical alto staff
@@ -5859,8 +5854,8 @@ class Activity {
58595854
let customName = "custom";
58605855
if (myBlock.connections[1] !== null) {
58615856
// eslint-disable-next-line max-len
5862-
customName = this.blocks.blockList[myBlock.connections[1]]
5863-
.value;
5857+
customName =
5858+
this.blocks.blockList[myBlock.connections[1]].value;
58645859
}
58655860
// eslint-disable-next-line no-console
58665861
console.log(customName);
@@ -6270,12 +6265,12 @@ class Activity {
62706265
.data("item.autocomplete", item)
62716266
.append(
62726267
'<img src="' +
6273-
item.artwork +
6274-
'" height = "20px">' +
6275-
"<a>" +
6276-
" " +
6277-
item.label +
6278-
"</a>"
6268+
item.artwork +
6269+
'" height = "20px">' +
6270+
"<a>" +
6271+
" " +
6272+
item.label +
6273+
"</a>"
62796274
)
62806275
.appendTo(ul.css("z-index", 9999));
62816276
};
@@ -6390,10 +6385,10 @@ class Activity {
63906385
container.setAttribute(
63916386
"style",
63926387
"position: absolute; right:" +
6393-
(document.body.clientWidth - x) +
6394-
"px; top: " +
6395-
y +
6396-
"px;"
6388+
(document.body.clientWidth - x) +
6389+
"px; top: " +
6390+
y +
6391+
"px;"
63976392
);
63986393
document.getElementById("buttoncontainerBOTTOM").appendChild(container);
63996394
return container;
@@ -7692,14 +7687,24 @@ const activity = new Activity();
76927687

76937688
require(["domReady!"], doc => {
76947689
doBrowserCheck();
7695-
if (jQuery.browser.mozilla) {
7696-
setTimeout(() => {
7697-
activity.setupDependencies();
7698-
activity.domReady(doc);
7699-
}, 5000);
7700-
} else {
7690+
7691+
const initializeApp = () => {
77017692
activity.setupDependencies();
77027693
activity.domReady(doc);
7694+
};
7695+
7696+
if (jQuery.browser.mozilla) {
7697+
// Use readiness-based initialization instead of arbitrary 5-second delay
7698+
// This polls for critical dependencies (createjs, Howler, DOM elements)
7699+
// and initializes as soon as they're ready (min 500ms, max 10s)
7700+
waitForReadiness(initializeApp, {
7701+
maxWait: 10000, // Maximum wait time (fallback)
7702+
minWait: 500, // Minimum wait for stability
7703+
checkInterval: 100
7704+
});
7705+
} else {
7706+
// Chromium browsers don't need the delay
7707+
initializeApp();
77037708
}
77047709
});
77057710

0 commit comments

Comments
 (0)