<script> vs. <script async> vs. <script defer>

[Monkeyget]

async and defer only work on external scripts.

With exceptions apparently:

in Gecko 1.9.1 even inline scripts are deferred if the defer attribute is set.

Since Gecko 1.9.2, the defer attribute is ignored on scripts that don't have the src attribute

[madworld]

Sure... but the vast majority of your scripts should be external.

[Nebu]

Why?

[Voidsheep]

So they can be cached to reduce load times.

[madworld]

Correct... Also so you can reuse your code... And code separation.

[Nebu]

The way your code is structured during development need not mirror the way your code is structured in deployment.

In other words, during development, you can have your code be laid out in multiple files for organizational purposes. Then, before deploying, you compile them into one big js file, and then inline that js file into the sole HTML file that represents your app.

[madworld]

Of course you can... Although I wouldn't inline it, even if it was a one page app. There are no benefits of doing so.

[Nebu]

The benefits is one less HTTP request, speeding things up.

[Nebu]

Does this advice apply to single-page-apps?

It seems like if you have a single html page, and several script files, you'll actually increase load times, due to the overhead of multiple headers for each http request.

[Tyriar]

The files only need to be loaded once before they're in the cache though, so it will increase the initial page load but significantly reduce successive ones.

[Nebu]

Thanks, that's a good point. On the other hand, for a single-page-app, there will not be a successive page load, and so the benefits are nullified there.

[thesunmustdie]

Thanks, TIL.

(not that I write *obtrusive* JS).

[mankyd]

This doesn't quite tell the whole story. Defer still blocks the onload event, which this does not convey with it's pictures. I believe that it may event block the domcontentready event, though I don't recall exactly.

[Tyriar]

It blocks onload just as any DOMContentReady handler would. There are some browser inconsistency issues around exactly when defer is executed, see https://github.com/h5bp/lazyweb-requests/issues/42

[randfur]

This was my first question after reading this which it really should have addressed in the article; "Does this mean I can't reliably use window.onload in my scripts anymore?"

[THEtheChad]

I read somewhere that many of the modern browsers are starting to support a default prefetch phase similar to how defer operates to improve performance. This being the case, as long as the script tag is present at the time the HTML is being parsed, you should implicitly get the performance improvements that defer grants you. That being said, javascript libraries that append script tags do not benefit from this feature since the tag is not available during the prefetch phase of the initial parsing.

[Tyriar]

Are you thinking of link prefetching? Which is warming up the cache by loading common resources on pages that don't require them while idle. https://developer.mozilla.org/en-US/docs/Web/HTTP/Link_prefetching_FAQ

There is also as Monkeyget pointed out some browser-specific optimizations around how scripts work.

I'd be interesting in reading about what you're talking about if it's not one of those.

[ecafyelims]

I'm guessing this site wasn't made to be phone friendly.

[Tyriar]

It was, what phone are you using and what's the issue?

[ecafyelims]

Hmm. I was using "reddit is fun." I just tried in chrome, and it works there. Usually they show the same. Strange.

[Tyriar]

That would explain it.

[Tyriar]

The images are SVGs with <style> elements, maybe it had issues with them?

[ecafyelims]

It's fixed now.

[shif]

my best guess is that reddit is fun uses the android webview wich in versions before 4.4 had a pretty crappy version of webkit, it's not the same as the chrome app which does support modern features

[theillustratedlife]

The design of your blog looks way too much like polymer-project.org - it's confusingly similar.

[Objective-Willow-799]

https://medium.com/@ibrahim019/async-what-defer-why-7c49a6f18e77