Html: Allow running text/javascript directly without a text/html

[samuelgoto]

Some modern websites (e.g. google.com and gmail.com) serve a mostly blank text/html with primarily a mechanism to deliver a text/javascript content. text/javascript is responsible for loading other modules/resources as well as for constructing DOM.

Example (curl google.com):

HTML comes with a set of expectations (e.g. with regards to rendering, responsiveness and dealing with input events), and I'm wondering if allowing browsers to run text/javascript directly, even in the absence of a text/html, to control (explicitly, imperatively) how/when things get executed would speed things up (compared to the amount of guesses that browsers have to do).

Specifically, I'm wondering if a combination of the following would help (in no particular order):

• one less file to download (unlikely to help)
• scheduling network resources before rendering/input/compositing
• other reasons (e.g. i'm wondering if there is a point to be made about ergonomics)?

For example, looking how google.com is loaded, I'm wondering if running scripts first before we get into any rendering at all (e.g. all of the work done in the GPU, compositing, input) would enable authors to parallelize better.

In this trace from google search, the first big script is loaded at 297ms late in the game. It had to wait until about 14 images were loaded and rendering work started.

The browser has to make a lot of assumptions on how things are going to be loaded, and I'm wondering if we left that to the application developer they'd have a more fined grained control and would be able to derive more value from the different threads/processes browsers provide.

e.g. something along the lines of:

// google.com/index.js

// kicks off network requests for resources that we are going to need
let main = import("/dynamically-load-module.js");
let sidebar = import("/not-so-important-module.js");

// maybe kick off loading of images?

// ok, now that we have kicked off the network request and
// the threads/processes are going to be working on them
// lets kick off some UI and play with the DOM
window.document.title = "Google Search"
window.document.body.style = "background-color: white";
window.document.body.appendChild(...)
...

No data to back me up here, just kicking off a thread with an intuition that something useful can come out of it :)