[RFC] Make the use of defer mandatory

[brunoais]

@oleg & all
I made many tests.
The last test is on github. All browsers I have (Firefox 3.6 Firefox 10, Chrome, IE9, IE8, IE7 (emulated), Opera) except Opera passes the test. Opera does not pass the test to check for defer to work but it passes the test that checks that everything is set in the order it appears in the page.
See the code here:
https://github.com/brunoais/Testing-defer-in-browsers
There's a test that is not online 24h a day (about 14h hours a day) here: http://brunoaisserver.dtdns.net/test/Te ... Async.html
If you want to refuse this, I need a good reason to refuse.

Note: In IE DOM must not be manipulated before the DOMContentLoaded event is fired (or onload if DOMContentLoaded is not supported (IE7, IE8)). With jQuery just use the ready method ($(window).ready()).

[brunoais]

New testing system was made:
https://github.com/brunoais/Testing-defer-in-browsers
And it produced the following results:
Browsers that passed:
firefox 3.6, firefox 10, Chrome, IE7, IE8, IE9
Browsers that failed:
Opera (worked as expected)

Just because Opera failed doesn't mean that there is a problem with the execution order of the javascript code, it just means that defer is being ignored by Opera. With the use I'm requesting here and we have been discussing in the IRC this problem is not a real problem so the Opera failing the rests is not a reason for us to drop this idea.

Results:
All browsers except Opera:

Code: Select all

[OK] Test #1: object === object
[OK] Test #2: undefined !== boolean
[OK] Test #3: false === false
[OK] Test #4: false === false
[OK] Test #5: true === true
[OK] Test #6: true === true
[OK] Test #7: true === true
[OK] Test #8: true === true
[OK] Test #9: true === true
[OK] Test #10: 3,4,6 === 3,4,6
[OK] Test #11: 1,3,4,5,6,7 === 1,3,4,5,6,7
[11/11] Tests passed

Opera:

Code: Select all

[OK] Test #1: object === object 
[OK] Test #2: undefined !== boolean 
[OK] Test #3: false === false 
[OK] Test #4: false === false 
[FAIL] Test #5: true === false 
[FAIL] Test #6: true === false 
[FAIL] Test #7: true === false 
[OK] Test #8: true === true 
[OK] Test #9: true === true 
[FAIL] Test #10: 3,4,6 === 2,3,4,5,6,7 
[FAIL] Test #11: 1,3,4,5,6,7 === 3,4,5,6,7 
[6/11] Tests passed

[callumacrae]

If multiple tests failed and it took a while to write a test that actually worked, doesn't that suggest that defer is buggy?

[brunoais]

^
no
failing in Opera only means it ignores defer. As long as we follow the 3 rules:

1. All javascript code that is not communication between PHP and javascript must be placed in external files
2. All non inline javascript must have the defer attribute
3. The order of all js code matters! Do not assume a variable declared in line x will work in a js file included in line x-y. (this is already the way we work, anyway)

Communication between PHP and javascript is stuff as simple as this (this is an example):

Code: Select all

<script type="text/javascript">
var someString = "{template_string}"
var someArray = [{template_array}]
</script>

Inline javascript is only used for the javascript code that is dynamic between page loads.

By following this it will not fail for browsers that ignore defer and will work fast and smoothly for the ones that support defer.

The previous tests made to IE, they were failing because IE's DOM is a mess, so, not until one of DOMContentLoaded event or onload event is dispatched trying to change the DOM in IE can create huge problems. According to some tests, it seems like, IE rewrites the whole DOM every x seconds until DOMContentLoaded is fired (IE < 9 does not have that event but just think the equivalent) and if you try to access it in that state elements may not be in the result of the element search. With jQuery this can be very easily solved by using the ready() method, if you don't use jQuery, use addEventListener() if it supports (for DOMContentLoaded) or just use the onload event.

Anyway, as far as I know, jQuery users are used to use the ready method and only start DOM manipulation in code accessed from the callback function in ready() method.

[Arty]

-1

A solution like this is needed, jQuery in its current state being included in footer is almost completely useless, but this solution is not it. Sorry.

Defer is useful, but its not useful and not stable enough. There are bugs with IE, it isn't supported by Opera and the most important part is all js code has to be in external files. This means it is useless for inclusion of small inline script in template files. Template variables can't be used from external js files, so using external js files is not always a good solution and defer can't help with such cases.

[brunoais]

^
Bugs in IE? Where? As long as you don't mess with the DOM while the page is still loading nothing's wrong mate. If people use the .ready or the .load for all the code that messes up with the DOM all works 100% no failure at all. Besides, that does make a lot of sense, actually. Not until the DOM is ready don't mess with it!
About opera's case. How do you know that opera will not implement the defer? By not supporting defer does not mean that it has something wrong. We just need to keep writing and placing the script tags as if defer didn't exist.
I'm still wondering what's wrong with setting js variables using the template vars in inline js... Is that wrong? Is the global scope wrong?
All the reasons you pointed are not reasons or are things already solved in the previous post (yes, see the previous post).

[JoshyPHP]

Just throwing that out there, have you considered using a third party library such as ControlJS if defer/async doesn't pan out?

[brunoais]

^
I read most of the code. It relies on browser cache to be applied. I don't like that. I also don't like that we need that code to block the page's code (no defer to load that) to become of any use.

[brunoais]

K'ay, there are some updates in this subject.
1.
IE<10 has some different rules about defer that do not match the HTML5 spec even though they match the HTML4 spec.
IE<10 Seems to load defered scripts in order they appear in the page + something. That something is treat different origin external scripts (E.g. jQuery in an external domain) with same origin external scripts (E.g. ajax.js).
2.
IE10 Supports defer by the HTML5 spec.
3.
The latest results show the following:
firefox 3.6+, IE10, Chrome -> Pass without problems 15/15
IE<10 does not pass but if the fix is used it passes 14/15.
Opera passes 9/15
Test ourself here:
http://brunoaisserver.dtdns.net/test/Te ... -browsers/
Note: The server is not 24h online.
The source code is in git. Check here: https://github.com/brunoais/Testing-defer-in-browsers

We need to discuss these results with the main idea of this topic. Please join the IRC chatroom or this thread for the complete discussion.

[Oleg]

I am not too stoked to debate whether scripts should be hardcoded in the header, in the footer or in the middle. Right now it seems to me that the optimal solution is different for different browsers, arguing about which suboptimal solution to go with when there is an optimal solution is not something I want to do.

Given that we already are doing the footer approach and it works acceptably well (by which I mean that the contention of this topic was that header+defer was better, not that footer was bad), my inclination would be to stick with the footer.