Skip to content

Commit 03f9e0f

Browse files
stutijain2006stutijain2006
committed
Improve Lighthouse Performance by Deferring Proto Block Initialization
1 parent af23222 commit 03f9e0f

File tree

2 files changed

+83
-53
lines changed

2 files changed

+83
-53
lines changed

‎js/activity.js‎

Lines changed: 53 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -2248,7 +2248,7 @@ class Activity {
22482248
const changeText = () => {
22492249
const randomLoadMessage =
22502250
messages.load_messages[
2251-
Math.floor(Math.random() * messages.load_messages.length)
2251+
Math.floor(Math.random() * messages.load_messages.length)
22522252
];
22532253
document.getElementById("messageText").innerHTML = randomLoadMessage + "...";
22542254
counter++;
@@ -3396,9 +3396,9 @@ class Activity {
33963396
that.blocks.moveBlock(
33973397
newBlock,
33983398
(x || that.blocksContainer.x + 100) -
3399-
that.blocksContainer.x,
3399+
that.blocksContainer.x,
34003400
(y || that.blocksContainer.y + 100) -
3401-
that.blocksContainer.y
3401+
that.blocksContainer.y
34023402
);
34033403
}
34043404
);
@@ -4853,8 +4853,8 @@ class Activity {
48534853
console.log(
48544854
"%cMusic Blocks",
48554855
"font-size: 24px; font-weight: bold; font-family: sans-serif; padding:20px 0 0 110px; background: url(" +
4856-
imgUrl +
4857-
") no-repeat;"
4856+
imgUrl +
4857+
") no-repeat;"
48584858
);
48594859
// eslint-disable-next-line no-console
48604860
console.log(
@@ -4926,10 +4926,10 @@ class Activity {
49264926
typeof flags !== "undefined"
49274927
? flags
49284928
: {
4929-
run: false,
4930-
show: false,
4931-
collapse: false
4932-
};
4929+
run: false,
4930+
show: false,
4931+
collapse: false
4932+
};
49334933
this.loading = true;
49344934
document.body.style.cursor = "wait";
49354935
this.doLoadAnimation();
@@ -5292,9 +5292,8 @@ class Activity {
52925292
[
52935293
"nameddo",
52945294
{
5295-
value: `V: ${parseInt(lineId) + 1} Line ${
5296-
staffBlocksMap[lineId]?.baseBlocks?.length + 1
5297-
}`
5295+
value: `V: ${parseInt(lineId) + 1} Line ${staffBlocksMap[lineId]?.baseBlocks?.length + 1
5296+
}`
52985297
}
52995298
],
53005299
0,
@@ -5303,12 +5302,12 @@ class Activity {
53035302
staffBlocksMap[lineId].baseBlocks.length === 0
53045303
? null
53055304
: staffBlocksMap[lineId].baseBlocks[
5306-
staffBlocksMap[lineId].baseBlocks.length - 1
5307-
][0][
5308-
staffBlocksMap[lineId].baseBlocks[
5309-
staffBlocksMap[lineId].baseBlocks.length - 1
5310-
][0].length - 4
5311-
][0],
5305+
staffBlocksMap[lineId].baseBlocks.length - 1
5306+
][0][
5307+
staffBlocksMap[lineId].baseBlocks[
5308+
staffBlocksMap[lineId].baseBlocks.length - 1
5309+
][0].length - 4
5310+
][0],
53125311
null
53135312
]
53145313
],
@@ -5324,9 +5323,8 @@ class Activity {
53245323
[
53255324
"text",
53265325
{
5327-
value: `V: ${parseInt(lineId) + 1} Line ${
5328-
staffBlocksMap[lineId]?.baseBlocks?.length + 1
5329-
}`
5326+
value: `V: ${parseInt(lineId) + 1} Line ${staffBlocksMap[lineId]?.baseBlocks?.length + 1
5327+
}`
53305328
}
53315329
],
53325330
0,
@@ -5361,14 +5359,14 @@ class Activity {
53615359
staffBlocksMap[staffIndex].startBlock.length - 3
53625360
][4][2] =
53635361
staffBlocksMap[staffIndex].baseBlocks[0][0][
5364-
staffBlocksMap[staffIndex].baseBlocks[0][0].length - 4
5362+
staffBlocksMap[staffIndex].baseBlocks[0][0].length - 4
53655363
][0];
53665364
// Update the first namedo block with settimbre
53675365
staffBlocksMap[staffIndex].baseBlocks[0][0][
53685366
staffBlocksMap[staffIndex].baseBlocks[0][0].length - 4
53695367
][4][0] =
53705368
staffBlocksMap[staffIndex].startBlock[
5371-
staffBlocksMap[staffIndex].startBlock.length - 3
5369+
staffBlocksMap[staffIndex].startBlock.length - 3
53725370
][0];
53735371
const repeatblockids = staffBlocksMap[staffIndex].repeatArray;
53745372
for (const repeatId of repeatblockids) {
@@ -5380,7 +5378,7 @@ class Activity {
53805378
0,
53815379
[
53825380
staffBlocksMap[staffIndex].startBlock[
5383-
staffBlocksMap[staffIndex].startBlock.length - 3
5381+
staffBlocksMap[staffIndex].startBlock.length - 3
53845382
][0] /*setribmre*/,
53855383
blockId + 1,
53865384
staffBlocksMap[staffIndex].nameddoArray[staffIndex][0],
@@ -5389,8 +5387,8 @@ class Activity {
53895387
] === null
53905388
? null
53915389
: staffBlocksMap[staffIndex].nameddoArray[staffIndex][
5392-
repeatId.end + 1
5393-
]
5390+
repeatId.end + 1
5391+
]
53945392
]
53955393
]);
53965394
staffBlocksMap[staffIndex].repeatBlock.push([
@@ -5424,7 +5422,7 @@ class Activity {
54245422
const secondnammedo = _searchIndexForMusicBlock(
54255423
staffBlocksMap[staffIndex].baseBlocks[repeatId.end + 1][0],
54265424
staffBlocksMap[staffIndex].nameddoArray[staffIndex][
5427-
repeatId.end + 1
5425+
repeatId.end + 1
54285426
]
54295427
);
54305428

@@ -5447,31 +5445,31 @@ class Activity {
54475445
const prevnameddo = _searchIndexForMusicBlock(
54485446
staffBlocksMap[staffIndex].baseBlocks[repeatId.start - 1][0],
54495447
staffBlocksMap[staffIndex].baseBlocks[repeatId.start][0][
5450-
currentnammeddo
5448+
currentnammeddo
54515449
][4][0]
54525450
);
54535451
const afternamedo = _searchIndexForMusicBlock(
54545452
staffBlocksMap[staffIndex].baseBlocks[repeatId.end][0],
54555453
staffBlocksMap[staffIndex].baseBlocks[repeatId.start][0][
5456-
currentnammeddo
5454+
currentnammeddo
54575455
][4][1]
54585456
);
54595457
let prevrepeatnameddo = -1;
54605458
if (prevnameddo === -1) {
54615459
prevrepeatnameddo = _searchIndexForMusicBlock(
54625460
staffBlocksMap[staffIndex].repeatBlock,
54635461
staffBlocksMap[staffIndex].baseBlocks[repeatId.start][0][
5464-
currentnammeddo
5462+
currentnammeddo
54655463
][4][0]
54665464
);
54675465
}
54685466
const prevBlockId =
54695467
staffBlocksMap[staffIndex].baseBlocks[repeatId.start][0][
5470-
currentnammeddo
5468+
currentnammeddo
54715469
][4][0];
54725470
const currentBlockId =
54735471
staffBlocksMap[staffIndex].baseBlocks[repeatId.start][0][
5474-
currentnammeddo
5472+
currentnammeddo
54755473
][0];
54765474

54775475
// Needs null checking optmizie
@@ -5485,7 +5483,7 @@ class Activity {
54855483
0,
54865484
[
54875485
staffBlocksMap[staffIndex].baseBlocks[repeatId.start][0][
5488-
currentnammeddo
5486+
currentnammeddo
54895487
][4][0],
54905488
blockId + 1,
54915489
currentBlockId,
@@ -6799,12 +6797,12 @@ class Activity {
67996797
return $j("<li></li>")
68006798
.append(
68016799
'<img src="' +
6802-
(item.artwork || "") +
6803-
'" height = "20px">' +
6804-
"<a>" +
6805-
" " +
6806-
item.label +
6807-
"</a>"
6800+
(item.artwork || "") +
6801+
'" height = "20px">' +
6802+
"<a>" +
6803+
" " +
6804+
item.label +
6805+
"</a>"
68086806
)
68096807
.appendTo(ul.css("z-index", 35000));
68106808
};
@@ -6928,10 +6926,10 @@ class Activity {
69286926
container.setAttribute(
69296927
"style",
69306928
"position: absolute; right:" +
6931-
(document.body.clientWidth - x) +
6932-
"px; top: " +
6933-
y +
6934-
"px;"
6929+
(document.body.clientWidth - x) +
6930+
"px; top: " +
6931+
y +
6932+
"px;"
69356933
);
69366934
document.getElementById("buttoncontainerBOTTOM").appendChild(container);
69376935
return container;
@@ -7513,7 +7511,6 @@ class Activity {
75137511
this.toolbar.renderJavaScriptIcon(toggleJSWindow);
75147512
this.toolbar.renderLanguageSelectIcon(this.languageBox);
75157513
this.toolbar.renderWrapIcon();
7516-
75177514
initPalettes(this.palettes);
75187515

75197516
if (this.planet !== undefined) {
@@ -7524,7 +7521,7 @@ class Activity {
75247521

75257522
window.saveLocally = this.saveLocally;
75267523

7527-
initBasicProtoBlocks(this);
7524+
initCoreProtoBlocks(this);
75287525

75297526
// Load any macros saved in local storage.
75307527
// this.storage.macros = null;
@@ -7541,6 +7538,15 @@ class Activity {
75417538
processPluginData(this, this.pluginData, "localStorage:plugins")
75427539
);
75437540
}
7541+
if ('requestIdleCallback' in window) {
7542+
requestIdleCallback(() => {
7543+
initAdvancedProtoBlocks(this);
7544+
});
7545+
} else {
7546+
setTimeout(() => {
7547+
initAdvancedProtoBlocks(this);
7548+
}, 100);
7549+
}
75447550

75457551
// Load custom mode saved in local storage.
75467552
const custommodeData = this.storage.custommode;
@@ -8191,7 +8197,8 @@ class Activity {
81918197

81928198
// Reinitialize blocks
81938199
if (this.blocks) {
8194-
initBasicProtoBlocks(this);
8200+
initCoreProtoBlocks(this);
8201+
initAdvancedProtoBlocks(this);
81958202
}
81968203

81978204
// Restore palette positions

‎js/basicblocks.js‎

Lines changed: 30 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -81,8 +81,28 @@ const BACKWARDCOMPATIBILIYDICT = {
8181
* @param {Object} blocks
8282
* @returns {void}
8383
*/
84-
const initBasicProtoBlocks = activity => {
84+
const initCoreProtoBlocks = activity => {
8585
activity.blocks.palettes = activity.palettes;
86+
setupFlowBlocks(activity);
87+
setupNumberBlocks(activity);
88+
setupActionBlocks(activity);
89+
setupBoxesBlocks(activity);
90+
setupBooleanBlocks(activity);
91+
92+
// Push protoblocks onto their palettes.
93+
for (const protoblock in activity.blocks.protoBlockDict) {
94+
if (activity.blocks.protoBlockDict[protoblock].palette != null) {
95+
activity.blocks.protoBlockDict[protoblock].palette.add(
96+
activity.blocks.protoBlockDict[protoblock]
97+
);
98+
}
99+
}
100+
};
101+
102+
/**
103+
* Initialize advanced / heavy blocks (deferred).
104+
*/
105+
const initAdvancedProtoBlocks = activity => {
86106
setupRhythmBlockPaletteBlocks(activity);
87107
setupRhythmBlocks(activity);
88108
setupMeterBlocks(activity);
@@ -93,11 +113,6 @@ const initBasicProtoBlocks = activity => {
93113
setupVolumeBlocks(activity);
94114
setupDrumBlocks(activity);
95115
setupWidgetBlocks(activity);
96-
setupFlowBlocks(activity);
97-
setupNumberBlocks(activity);
98-
setupActionBlocks(activity);
99-
setupBoxesBlocks(activity);
100-
setupBooleanBlocks(activity);
101116
setupHeapBlocks(activity);
102117
setupDictBlocks(activity);
103118
setupExtrasBlocks(activity);
@@ -108,7 +123,7 @@ const initBasicProtoBlocks = activity => {
108123
setupSensorsBlocks(activity);
109124
setupEnsembleBlocks(activity);
110125

111-
// Push protoblocks onto their palettes.
126+
// Push newly added protoblocks onto palettes
112127
for (const protoblock in activity.blocks.protoBlockDict) {
113128
if (activity.blocks.protoBlockDict[protoblock].palette != null) {
114129
activity.blocks.protoBlockDict[protoblock].palette.add(
@@ -117,9 +132,17 @@ const initBasicProtoBlocks = activity => {
117132
}
118133
}
119134
};
135+
136+
const initBasicProtoBlocks = activity => {
137+
initCoreProtoBlocks(activity);
138+
initAdvancedProtoBlocks(activity);
139+
};
140+
120141
if (typeof module !== "undefined" && module.exports) {
121142
module.exports = {
122143
initBasicProtoBlocks,
144+
initCoreProtoBlocks,
145+
initAdvancedProtoBlocks,
123146
BACKWARDCOMPATIBILIYDICT
124147
};
125148
}

0 commit comments

Comments
 (0)