Support perf metrics for web

[jrieken]

Goal is to have the ITimerService and the Performance View (F1 > Startup Performance) working for the web. Not all values we currently have apply but things like loading the the main bundle or digesting contributions does apply.

[jrieken]

with ea59ae2 and 2e802eb the timer service and the perf view is available in the web. What's missing is some critical perf marks to measure startup

[jrieken]

@bpasero can you help me to get equivalent marks for willLoadWorkbenchMain and didLoadWorkbenchMain ( see here)

[bpasero]

@jrieken I would think that you can add didLoadWorkbenchMain here:

vscode/src/vs/code/browser/workbench/workbench.ts

Line 281 in c70ac01

performance.mark('workbench-start');

As for willLoadWorkbenchMain the only solution I can think of is adding it into the script tag of the HTML before we load other scripts (this would not make them appear for Codespaces though as they have their own HTML entry file):

vscode/src/vs/code/browser/workbench/workbench.html

Line 30 in c70ac01

// NOTE: Changes to inline scripts require update of content security policy

and

vscode/src/vs/code/browser/workbench/workbench-dev.html

Line 29 in c70ac01

// NOTE: Changes to inline scripts require update of content security policy

This needs tweaks to our CSP though (refs).

[jrieken]

vscode/src/vs/code/browser/workbench/workbench.html

How does that case work? There is no require call in that one

[bpasero]

I actually do not remember anymore, quite sure I did this together with @alexdima. Is that relevant, I think we just need to ensure to put the perf-start-marker as early as possible, no?

[alexdima]

In the case of src/vs/code/browser/workbench/workbench.html, we use manual <script> tags to load the workbench, which is faster than creating script tags from the loader.js. The requests can be made in parallel by the browser as soon as the browser parses the .html and the evaluation still happens sequentially, but that is OK.

So if you want to know the time it takes to "require" workbench.main.js, I think you could try adding a <script> tag in the header and recording the Date.now() or perhaps use some special purpose HTML5 API -- https://www.html5rocks.com/en/tutorials/webperformance/basics/.

[jrieken]

@alexdima where would I put the "after" mark? What's the signal that all of the workbench.main has been loaded?

[jrieken]

What's the signal that all of the workbench.main has been loaded

nvm - figured that out

[jrieken]

Adding renderer ready which is purely focused on the renderer and allows us to compare browser perf vs electron-renderer perf

[bpasero]

@jrieken I like. I see that for web this is the very first entry in the HTML, but for desktop it is not. Shouldn't we put the renderer/started very high up into src/vs/code/electron-browser/workbench/workbench.html to compare the same thing?