Defer loading non-essential components
What does this MR do?
This MR defers loading most of the non-essential components for an initial load of WebIDE for the ~performance sake.
What is the performance gain here?
Here are the results of running the tests against master and this branch. The tests were run with local GDK installation in development mode. The development env doesn't matter much in this case as we care about the comparison to master in the same env and not the absolute numbers. The measurements are taken with User Timing API marks.
WebIDE: repo
BEFORE:
Run 1
Run 2
Run 3
Run 4
Run 5
Average
webide-app-start
3577
2290
1160
1210
1065
1860.4
webide-tree-start
4698
3084
2003
1945
1760
2698
file-tree-start
8315
5785
4052
3781
3981
5182.8
webide-tree-finished
8580
6064
4279
4084
4290
5459.4
file-tree-end
8580
6064
4279
4084
4290
5459.4
AFTER:
Run 1
Run 2
Run 3
Run 4
Run 5
Average
webide-app-start
2728
1302
1087
1041
893
1410.2
webide-tree-start
3481
2157
1903
1657
1606
2160.8
file-tree-start
5353
3903
3631
3490
3505
3976.4
webide-tree-finished
5641
4233
3981
3758
3837
4290
file-tree-end
5641
4233
3981
3758
3837
4290
Comparison (average)
| Before | After | Difference | Mark explanation | |
|---|---|---|---|---|
| webide-app-start | 1860.4 | 1410.2 | -450.2 | Start of the WebIDE Vue application |
| webide-tree-start | 2698 | 2160.8 | -537.2 | Start of the navigation tree rendering |
| file-tree-start | 5182.8 | 3976.4 | -1206.4 | Start of the very first file/folder entry in the tree |
| webide-tree-finished | 5459.4 | 4290 | -1169.4 | Finish of the navigation tree rendering |
| file-tree-end | 5459.4 | 4290 | -1169.4 | Finished rendering the very first file/folder entry in the tree |
WebIDE: file in a repo
BEFORE:
Run 1
Run 2
Run 3
Run 4
Run 5
Average
webide-app-start
2930
1513
1068
1518
1093
1624.4
webide-tree-start
3773
2156
1713
2159
1786
2317.4
repo-editor-start
6080
4406
3836
4333
3648
4460.6
webide-file-start
6107
4430
3853
4354
3671
4483
repo-editor-end
6108
4430
3853
4354
3671
4483.2
file-tree-start
6149
4480
3903
4408
3723
4532.6
webide-tree-finished
6442
4771
4202
4720
3996
4826.2
file-tree-end
6442
4771
4202
4720
3996
4826.2
webide-file-finished
7217
5337
4741
5261
4785
5468.2
AFTER:
Run 1
Run 2
Run 3
Run 4
Run 5
Average
webide-app-start
3030
1490
1189
1012
942
1532.6
webide-tree-start
3613
2037
1910
1832
1721
2222.6
repo-editor-start
5396
3884
3529
3616
3359
3956.8
webide-file-start
5412
3900
3536
3623
3367
3967.6
repo-editor-end
5412
3900
3536
3623
3367
3967.6
file-tree-start
5549
4003
3638
3735
3472
4079.4
webide-tree-finished
5953
4340
3952
4081
3824
4430
file-tree-end
5953
4340
3952
4081
3824
4430
webide-file-finished
6613
4856
4454
4593
4318
4966.8
Comparison (average)
| Before | After | Difference | Mark explanation | |
|---|---|---|---|---|
| webide-app-start | 1624.4 | 1532.6 | -91.8 | Start of the WebIDE Vue application |
| webide-tree-start | 2317.4 | 2222.6 | -94.8 | Start of the navigation tree rendering |
| webide-file-start | 4483 | 3967.6 | -515.4 | Start of the requested file's rendering |
| file-tree-start | 4532.6 | 4079.4 | -453.2 | Start of the very first file/folder entry in the tree |
| webide-tree-finished | 4826.2 | 4430 | -396.2 | Finish of the navigation tree rendering |
| file-tree-end | 4826.2 | 4430 | -396.2 | Finished rendering the very first file/folder entry in the tree |
| webide-file-finished | 5468.2 | 4966.8 | -501.4 | Finish of the requested file's rendering |
Screenshots (strongly suggested)
No visual change
Does this MR meet the acceptance criteria?
Conformity
-
Changelog entry -
Documentation (if required) -
Code review guidelines -
Merge request performance guidelines -
Style guides -
Database guides -
Separation of EE specific content
Availability and Testing
-
Review and add/update tests for this feature/bug. Consider all test levels. See the Test Planning Process. -
Tested in all supported browsers -
Informed Infrastructure department of a default or new setting change, if applicable per definition of done
Related to #268225 (closed)