Skip to content

Commit 912518e

Browse files
Pankajyadav919Pankajyadav919
committed
Optimize performance: consolidate loader logic, add resource hints, and defer non-critical initialization
1 parent 7a803d4 commit 912518e

File tree

3 files changed

+81
-147
lines changed

3 files changed

+81
-147
lines changed

‎index.html‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,15 @@
1010
<meta name="mobile-web-app-capable" content="yes">
1111
<meta name="viewport" content="width=device-width, initial-scale=1.0">
1212
<meta id="theme-color" name="theme-color" content="#2196F3">
13+
14+
<!-- Resource Hints -->
15+
<link rel="preconnect" href="https://fonts.googleapis.com">
16+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
17+
<link rel="preconnect" href="https://cdnjs.cloudflare.com">
18+
<link rel="preconnect" href="https://cdn.jsdelivr.net">
19+
<link rel="dns-prefetch" href="https://fonts.googleapis.com">
20+
<link rel="dns-prefetch" href="https://cdnjs.cloudflare.com">
21+
<link rel="dns-prefetch" href="https://cdn.jsdelivr.net">
1322

1423
<!-- Icons & PWA -->
1524
<link rel="icon" sizes="192x192" href="favicon.ico">

‎js/activity.js‎

Lines changed: 61 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -377,26 +377,21 @@ class Activity {
377377
*/
378378
this.setupDependencies = () => {
379379
this.cleanupEventListeners();
380-
createDefaultStack();
381-
createHelpContent(this);
382-
window.scroll(0, 0);
383380

384-
/*
385-
try {
386-
meSpeak.loadConfig('lib/mespeak_config.json');
387-
lang = document.webL10n.getLanguage();
381+
// Defer non-critical UI setup to improve initial load time
382+
const deferInit = () => {
383+
if (typeof createDefaultStack === "function") createDefaultStack();
384+
if (typeof createHelpContent === "function") createHelpContent(this);
385+
if (typeof this.setHelpfulSearchDiv === "function") this.setHelpfulSearchDiv();
386+
};
388387

389-
if (['es', 'ca', 'de', 'el', 'eo', 'fi', 'fr', 'hu', 'it', 'kn', 'la', 'lv', 'nl', 'pl', 'pt', 'ro', 'sk', 'sv', 'tr', 'zh'].indexOf(lang) !== -1) {
390-
meSpeak.loadVoice('lib/voices/' + lang + '.json');
391-
} else {
392-
meSpeak.loadVoice('lib/voices/en/en.json');
393-
}
394-
} catch (e) {
395-
// eslint-disable-next-line no-console
396-
console.debug(e);
388+
if (window.requestIdleCallback) {
389+
window.requestIdleCallback(deferInit);
390+
} else {
391+
setTimeout(deferInit, 100);
397392
}
398-
*/
399393

394+
window.scroll(0, 0);
400395
document.title = TITLESTRING;
401396
this.canvas = document.getElementById("myCanvas");
402397

@@ -465,8 +460,6 @@ class Activity {
465460
this.toolbarHeight = document.getElementById("toolbars").offsetHeight;
466461

467462
this.helpfulWheelItems = [];
468-
469-
this.setHelpfulSearchDiv();
470463
};
471464

472465
/*
@@ -2054,7 +2047,7 @@ class Activity {
20542047
const changeText = () => {
20552048
const randomLoadMessage =
20562049
messages.load_messages[
2057-
Math.floor(Math.random() * messages.load_messages.length)
2050+
Math.floor(Math.random() * messages.load_messages.length)
20582051
];
20592052
document.getElementById("messageText").innerHTML = randomLoadMessage + "...";
20602053
counter++;
@@ -2998,11 +2991,11 @@ class Activity {
29982991
.data("item.autocomplete", item)
29992992
.append(
30002993
'<img src="' +
3001-
item.artwork +
3002-
'" height="20px">' +
3003-
"<a> " +
3004-
item.label +
3005-
"</a>"
2994+
item.artwork +
2995+
'" height="20px">' +
2996+
"<a> " +
2997+
item.label +
2998+
"</a>"
30062999
)
30073000
.appendTo(
30083001
ul.css({
@@ -4348,8 +4341,8 @@ class Activity {
43484341
console.log(
43494342
"%cMusic Blocks",
43504343
"font-size: 24px; font-weight: bold; font-family: sans-serif; padding:20px 0 0 110px; background: url(" +
4351-
imgUrl +
4352-
") no-repeat;"
4344+
imgUrl +
4345+
") no-repeat;"
43534346
);
43544347
// eslint-disable-next-line no-console
43554348
console.log(
@@ -4421,10 +4414,10 @@ class Activity {
44214414
typeof flags !== "undefined"
44224415
? flags
44234416
: {
4424-
run: false,
4425-
show: false,
4426-
collapse: false
4427-
};
4417+
run: false,
4418+
show: false,
4419+
collapse: false
4420+
};
44284421
this.loading = true;
44294422
document.body.style.cursor = "wait";
44304423
this.doLoadAnimation();
@@ -4787,9 +4780,8 @@ class Activity {
47874780
[
47884781
"nameddo",
47894782
{
4790-
value: `V: ${parseInt(lineId) + 1} Line ${
4791-
staffBlocksMap[lineId]?.baseBlocks?.length + 1
4792-
}`
4783+
value: `V: ${parseInt(lineId) + 1} Line ${staffBlocksMap[lineId]?.baseBlocks?.length + 1
4784+
}`
47934785
}
47944786
],
47954787
0,
@@ -4798,12 +4790,12 @@ class Activity {
47984790
staffBlocksMap[lineId].baseBlocks.length === 0
47994791
? null
48004792
: staffBlocksMap[lineId].baseBlocks[
4801-
staffBlocksMap[lineId].baseBlocks.length - 1
4802-
][0][
4803-
staffBlocksMap[lineId].baseBlocks[
4804-
staffBlocksMap[lineId].baseBlocks.length - 1
4805-
][0].length - 4
4806-
][0],
4793+
staffBlocksMap[lineId].baseBlocks.length - 1
4794+
][0][
4795+
staffBlocksMap[lineId].baseBlocks[
4796+
staffBlocksMap[lineId].baseBlocks.length - 1
4797+
][0].length - 4
4798+
][0],
48074799
null
48084800
]
48094801
],
@@ -4819,9 +4811,8 @@ class Activity {
48194811
[
48204812
"text",
48214813
{
4822-
value: `V: ${parseInt(lineId) + 1} Line ${
4823-
staffBlocksMap[lineId]?.baseBlocks?.length + 1
4824-
}`
4814+
value: `V: ${parseInt(lineId) + 1} Line ${staffBlocksMap[lineId]?.baseBlocks?.length + 1
4815+
}`
48254816
}
48264817
],
48274818
0,
@@ -4856,14 +4847,14 @@ class Activity {
48564847
staffBlocksMap[staffIndex].startBlock.length - 3
48574848
][4][2] =
48584849
staffBlocksMap[staffIndex].baseBlocks[0][0][
4859-
staffBlocksMap[staffIndex].baseBlocks[0][0].length - 4
4850+
staffBlocksMap[staffIndex].baseBlocks[0][0].length - 4
48604851
][0];
48614852
// Update the first namedo block with settimbre
48624853
staffBlocksMap[staffIndex].baseBlocks[0][0][
48634854
staffBlocksMap[staffIndex].baseBlocks[0][0].length - 4
48644855
][4][0] =
48654856
staffBlocksMap[staffIndex].startBlock[
4866-
staffBlocksMap[staffIndex].startBlock.length - 3
4857+
staffBlocksMap[staffIndex].startBlock.length - 3
48674858
][0];
48684859
const repeatblockids = staffBlocksMap[staffIndex].repeatArray;
48694860
for (const repeatId of repeatblockids) {
@@ -4875,7 +4866,7 @@ class Activity {
48754866
0,
48764867
[
48774868
staffBlocksMap[staffIndex].startBlock[
4878-
staffBlocksMap[staffIndex].startBlock.length - 3
4869+
staffBlocksMap[staffIndex].startBlock.length - 3
48794870
][0] /*setribmre*/,
48804871
blockId + 1,
48814872
staffBlocksMap[staffIndex].nameddoArray[staffIndex][0],
@@ -4884,8 +4875,8 @@ class Activity {
48844875
] === null
48854876
? null
48864877
: staffBlocksMap[staffIndex].nameddoArray[staffIndex][
4887-
repeatId.end + 1
4888-
]
4878+
repeatId.end + 1
4879+
]
48894880
]
48904881
]);
48914882
staffBlocksMap[staffIndex].repeatBlock.push([
@@ -4919,7 +4910,7 @@ class Activity {
49194910
const secondnammedo = _searchIndexForMusicBlock(
49204911
staffBlocksMap[staffIndex].baseBlocks[repeatId.end + 1][0],
49214912
staffBlocksMap[staffIndex].nameddoArray[staffIndex][
4922-
repeatId.end + 1
4913+
repeatId.end + 1
49234914
]
49244915
);
49254916

@@ -4943,31 +4934,31 @@ class Activity {
49434934
const prevnameddo = _searchIndexForMusicBlock(
49444935
staffBlocksMap[staffIndex].baseBlocks[repeatId.start - 1][0],
49454936
staffBlocksMap[staffIndex].baseBlocks[repeatId.start][0][
4946-
currentnammeddo
4937+
currentnammeddo
49474938
][4][0]
49484939
);
49494940
const afternamedo = _searchIndexForMusicBlock(
49504941
staffBlocksMap[staffIndex].baseBlocks[repeatId.end][0],
49514942
staffBlocksMap[staffIndex].baseBlocks[repeatId.start][0][
4952-
currentnammeddo
4943+
currentnammeddo
49534944
][4][1]
49544945
);
49554946
let prevrepeatnameddo = -1;
49564947
if (prevnameddo === -1) {
49574948
prevrepeatnameddo = _searchIndexForMusicBlock(
49584949
staffBlocksMap[staffIndex].repeatBlock,
49594950
staffBlocksMap[staffIndex].baseBlocks[repeatId.start][0][
4960-
currentnammeddo
4951+
currentnammeddo
49614952
][4][0]
49624953
);
49634954
}
49644955
const prevBlockId =
49654956
staffBlocksMap[staffIndex].baseBlocks[repeatId.start][0][
4966-
currentnammeddo
4957+
currentnammeddo
49674958
][4][0];
49684959
const currentBlockId =
49694960
staffBlocksMap[staffIndex].baseBlocks[repeatId.start][0][
4970-
currentnammeddo
4961+
currentnammeddo
49714962
][0];
49724963

49734964
// Needs null checking optmizie
@@ -4981,7 +4972,7 @@ class Activity {
49814972
0,
49824973
[
49834974
staffBlocksMap[staffIndex].baseBlocks[repeatId.start][0][
4984-
currentnammeddo
4975+
currentnammeddo
49854976
][4][0],
49864977
blockId + 1,
49874978
currentBlockId,
@@ -5597,7 +5588,7 @@ class Activity {
55975588
this.update = true;
55985589
};
55995590

5600-
this.__showAltoAccidentals = () => {};
5591+
this.__showAltoAccidentals = () => { };
56015592

56025593
/*
56035594
* Shows musical alto staff
@@ -6264,12 +6255,12 @@ class Activity {
62646255
.data("item.autocomplete", item)
62656256
.append(
62666257
'<img src="' +
6267-
item.artwork +
6268-
'" height = "20px">' +
6269-
"<a>" +
6270-
" " +
6271-
item.label +
6272-
"</a>"
6258+
item.artwork +
6259+
'" height = "20px">' +
6260+
"<a>" +
6261+
" " +
6262+
item.label +
6263+
"</a>"
62736264
)
62746265
.appendTo(ul.css("z-index", 9999));
62756266
};
@@ -6384,10 +6375,10 @@ class Activity {
63846375
container.setAttribute(
63856376
"style",
63866377
"position: absolute; right:" +
6387-
(document.body.clientWidth - x) +
6388-
"px; top: " +
6389-
y +
6390-
"px;"
6378+
(document.body.clientWidth - x) +
6379+
"px; top: " +
6380+
y +
6381+
"px;"
63916382
);
63926383
document.getElementById("buttoncontainerBOTTOM").appendChild(container);
63936384
return container;
@@ -7684,15 +7675,13 @@ class Activity {
76847675

76857676
const activity = new Activity();
76867677

7687-
require(["domReady!"], doc => {
7688-
setTimeout(() => {
7689-
activity.setupDependencies();
7690-
activity.domReady(doc);
7691-
}, 5000);
7692-
});
7693-
7678+
// Use a single initialization path
76947679
define(MYDEFINES, () => {
76957680
activity.setupDependencies();
76967681
activity.doContextMenus();
76977682
activity.doPluginsAndPaletteCols();
76987683
});
7684+
7685+
require(["domReady!"], doc => {
7686+
activity.domReady(doc);
7687+
});

0 commit comments

Comments
 (0)