Consider using the defer attribute instead of async for script tags [performance]

🚀 Feature Proposal

It seems like the most performant way of loading scripts is to include them with defer instead of async. At least according to this article

We’d be getting the following:

Instead of:

And when it comes to SSR, it would mean the js would only execute in order once the HTML is fully loaded.

[gerardmrk]

I’m doing this for now as a temp workaround till they fix it (doesn’t cover any edge cases):

private _replaceScriptAsyncToDefer = async (scriptTags: string) => {
  if (!scriptTags) {
    return Promise.resolve("");
  }

  return Promise.resolve(scriptTags.replace(/\sasync\s/g, " defer "));
};

https://github.com/gerardmrk/erogen/blob/master/app/client.web/src/renderer/index.tsx#L220

[theKashey]

So - I am pretty sure async is a wrong decision.

• Defer - run scripts, in the right order, after page is fully loaded
• Async - run a script once it is ready. before or after page is fully loaded
• React.hydrate - merge with a existing HTML

The only variant, when react can hydrate is defer. In async mode DOM three could be not complete, by any reason, and the result would be just broken. You might wait for DOM-ready, but it would be equal to defer, but less semantic and safe.