[RFC] Make the use of defer mandatory

[brunoais]

This is (somewhat) an opposition to:
viewtopic.php?p=228911#p228911

Introduction
The defer and async is becoming standard in the browsers these days and are compatible with all current implementations of javascript where document.write() and document.writeln() (or equivalent, if exists) is not used.

Idea
(assuming the previous paragraph) If we use defer we can make the code exactly as it didn't have both and it will work perfectly, so it does not matter if the browser supports them or not. If the browser does support them, it's only a gain to the user. If it does not support, tough luck user, you'll have to endure it. not supporting them will not reduce the functionality, just the loading time will be greater.

Changes needed to the styles
PhpBB does not make extensive use of these useful-for-non-web-but-poisonous-for-web methods but unfortunatly it does. Anyway, the adaptation is easy.
The poisonous code I found lies in both prosilver and subsilver2 under the file editor.js in the function colorPalette(). I studied the changes needed and they are minor.

Pros
If the browser supports it:

• Faster page loading caused by parallel loading of the js files.
• If the browser does not support these attributes, it work the same way as it is now.
• Besides removing the document.write() the rest of the code works "as is" (according to my research)

Cons

• Some code has to be executed differently for this to go well. Eg. All write() and writeln() must be removed.
• A new rule has to appear in the coding guidelines. New rule, code changes are needed.

Edit: After some testing I came to the conclusion that async isn't really the best idea. Anyway, defer is really the way to go!

[callumacrae]

As the code is at the bottom of the page, all of your advantages are invalid.

[brunoais]

As the code is at the bottom of the page, all of your advantages are invalid.

If that's true, why is that that in this thread's page (prosilver) there are, at least, 2 script tags with the @src attribute?

[callumacrae]

That's not what I meant, I meant the code includes.

[brunoais]

That's no problem. I'm mentioning the output HTML and the browser execution. Code inclusion is not the problem here.

[Arty]

After short discussion on IRC, I'm convinced that this is a good idea with addition of moving jQuery in header with defer.

There is one big downside to loading jquery in footer: it cannot be used in scripts loaded in templates. With deferred loading of jquery in header and deferred loading of page specific scripts in those pages, those scripts can use jquery.

Example: loading editor.js on editor pages.

Current situation:
- editor.js has to be loaded in footer after jquery OR
- editor.js should not use jQuery (making jquery rather pointless)

With defer:
- editor.js can be loaded from editor template with defer and it can use jquery

It will not affect page loading speed, but it will make it easier to include page specific scripts.

[callumacrae]

This means that we're going to have to rewrite any code that changes anything DOM-wise on page load to use document.ready. Why not use defer, but keep it in the footer? (like html5bp does)

[Arty]

This means that we're going to have to rewrite any code that changes anything DOM-wise on page load to use document.ready.

Nothing changes for that code. onload event isn't going anywhere.
It would make sense to rewrite it, but its not required.

Why not use defer, but keep it in the footer? (like html5bp does)

Using defer in footer makes whole idea of using defer void.

[hanakin]

true i would argue that the size of editor uncompressed is only 12k and the same for forum_fn even. we should first look at combining and compressing and possibly gziping all external js and css anyway to reduce the amount of server requests and overall bandwidth then this one file could be include in the footer thus eliminating the reasoning for it in the jquery in the header. We should never be including any js before the jquery statement in the first place as their should be no inline calls or more than one or two script tags nessecary

[igorw]

Totally missed this topic. After looking into it, this seems like a really good idea. And since it's trivial to implement, we could probably even add it to 3.1. It would make a few things quite a lot easier.

Browser support is pretty good, only opera is not supported. And in cases where it's not supported, the only downside is that it will be a little bit slower. It will not break anything. http://caniuse.com/#feat=script-defer

I'm +1.