[RFC] Make the use of defer mandatory

Note: We are moving the topics of this forum and it will be deleted at some point

Publish your own request for comments/change or patches for the next version of phpBB. Discuss the contributions and proposals of others. Upcoming releases are 3.2/Rhea and 3.3.
Post Reply
User avatar
callumacrae
Former Team Member
Posts: 1046
Joined: Tue Apr 27, 2010 9:37 am
Location: England
Contact:

Re: [RFC] Make the use of defer mandatory

Post by callumacrae »

Okay, I did some more research…

According to HTML5BP, it is only supported in IE and will block the loading of the page in other browsers.
http://html5boilerplate.com/docs/Script ... ript-defer


According to the Yahoo! Exception Performance team, it isn't supported in Firefox and it's a bit funny in IE. I think they're implying that it's best to have it at the bottom of the page, too.
http://developer.yahoo.com/performance/ ... #js_bottom
Made by developers, for developers!
My blog

igorw
Registered User
Posts: 500
Joined: Thu Jan 04, 2007 11:47 pm

Re: [RFC] Make the use of defer mandatory

Post by igorw »

Well, perhaps those pages just contain outdated information. According to caniuse.com they are supported: http://caniuse.com/script-defer

User avatar
callumacrae
Former Team Member
Posts: 1046
Joined: Tue Apr 27, 2010 9:37 am
Location: England
Contact:

Re: [RFC] Make the use of defer mandatory

Post by callumacrae »

igorw wrote:Well, perhaps those pages just contain outdated information. According to caniuse.com they are supported: http://caniuse.com/script-defer
A few people on IRC (one of which I had heard of) told me that a lot of websites contain incorrect information regarding defer, and the only real way of telling which browsers support it is to test it.

Even if that information is outdated, it won't be that outdated. HTML5 Boilerplate isn't that old, and so it can't be that out of date.
Made by developers, for developers!
My blog

User avatar
brunoais
Registered User
Posts: 964
Joined: Fri Dec 18, 2009 3:55 pm

Re: [RFC] Make the use of defer mandatory

Post by brunoais »

https://developer.mozilla.org/En/HTML/E ... patibility
This website has the proper information.
"Opera Mobile" has a "?" because the js execution is made in a server owned by the opera.

User avatar
callumacrae
Former Team Member
Posts: 1046
Joined: Tue Apr 27, 2010 9:37 am
Location: England
Contact:

Re: [RFC] Make the use of defer mandatory

Post by callumacrae »

Apparently IE7 has some issues with defer.
Made by developers, for developers!
My blog

User avatar
Arty
Former Team Member
Posts: 985
Joined: Wed Mar 06, 2002 2:36 pm
Location: Mars
Contact:

Re: [RFC] Make the use of defer mandatory

Post by Arty »

I've tested it. IE7 is not the only browser that has issues with it: IE8 and IE9 have those issues too. Tested with real browsers, not IE9 in compatibility mode.

Test code #1:

Code: Select all

<head>
<script src="script1.js" defer />
</head>
<body>
<script src="script2.js" defer />
</body>
</html>
Mozilla, Webkit: script1.js and script2.js are loaded AFTER page was loaded, in correct order. It works as intended.
Opera: script1.js and script2.js are loaded DURING page load, as if defer wasn't there.
IE7-IE9: script1.js wasn't loaded at all, script2.js was loaded AFTER page was loaded. It works as intended for script2.js, completely messes up for script1.js

Test code #2:

Code: Select all

<head>
</head>
<body>
<script src="script1.js" defer />
<script src="script2.js" defer />
</body>
</html>
Mozilla, Webkit, IE7-9: script1.js and script2.js are loaded AFTER page was loaded, in correct order. It works as intended.
Opera: script1.js and script2.js are loaded DURING page load, as if defer wasn't there.

I've attached test scripts. Test case #1 is test.html, test case #2 is test_in_body.html

I think there are 3 possibilities:
  1. Do not use defer at all, keep everything as it is. This means scripts loaded before footer will not be able to use jQuery events and mod authors will have to add their scripts to footer.
  2. Include jQuery in header with defer, but limit defer to non-IE browsers using conditional statements. I don't know if this bug is fixed in IE10. If it isn't, this solution will not work. But ether way it forces browser to load jquery before parsing content, so advantage of defer is gone.
  3. Include jQuery directly after <body> tag. That would allow using jQuery in scripts loaded from within custom template files and would not delay page loading to load jQuery.
  4. Do not use defer at all, move jQuery to header. That would allow using jQuery in scripts loaded from within custom template files, in inline code before page is loaded. Downside is it will slightly delay page load because jQuery will have to be loaded before the rest of page is parsed.
I'd go with solution #4 because I think ability to use jQuery outweights tiny load time difference.
If not #4, then #3 is second best solution. Page loads before script, mod authors can use jQuery events in their scripts (also loaded with defer).
Attachments
Archive.zip
test script
(1.52 KiB) Downloaded 324 times

User avatar
callumacrae
Former Team Member
Posts: 1046
Joined: Tue Apr 27, 2010 9:37 am
Location: England
Contact:

Re: [RFC] Make the use of defer mandatory

Post by callumacrae »

#5: Keep everything as it is, introduce a template tag to add JavaScript files after jQuery

I vote #1, but #5 would annoy less people xD
Made by developers, for developers!
My blog

User avatar
Arty
Former Team Member
Posts: 985
Joined: Wed Mar 06, 2002 2:36 pm
Location: Mars
Contact:

Re: [RFC] Make the use of defer mandatory

Post by Arty »

callumacrae wrote:#5: Keep everything as it is, introduce a template tag to add JavaScript files after jQuery

I vote #1, but #5 would annoy less people xD
That would be a good solution too, but it requires someone to code it

User avatar
callumacrae
Former Team Member
Posts: 1046
Joined: Tue Apr 27, 2010 9:37 am
Location: England
Contact:

Re: [RFC] Make the use of defer mandatory

Post by callumacrae »

Arty wrote:
callumacrae wrote:#5: Keep everything as it is, introduce a template tag to add JavaScript files after jQuery

I vote #1, but #5 would annoy less people xD
That would be a good solution too, but it requires someone to code it
I think that it is planned eventually, anyway.
Made by developers, for developers!
My blog

Oleg
Posts: 1150
Joined: Tue Feb 23, 2010 2:38 am
Contact:

Re: [RFC]Make the use of defer mandatory

Post by Oleg »

Arty wrote:
Oleg wrote:How about handling javascript the right way, by which I mean:

1. Separate the notion of requiring javascript from the act of printing script tags in markup, by adding a layer of indirection. The code that requires some javascript file should store that fact somewhere for later use. In the templates read the list of needed javascript files and output them.

2. Subsequently, implement both loading javascripts in the header via defer and in the footer. Use the former version for everything but opera and the latter version for opera.

Asset combining follows fairly naturally, should we need it. It is also rather trivial to output js inline instead of referencing js files for development purposes.

I'm thinking #1 could be implemented via a new template tag.
1. That would require rewriting a lot of code and adding new template tag. It is a good idea for 4.0, but I'm not sure if this is a good idea for 3.x
If you are talking about all the copy pasted jquery references we have, it would be the same amount of work to move them to the header or do it the way I proposed.
Arty wrote: 2. Why complicate things? If browser doesn't support defer, it can load script in header. It is not the end of the world. Loading time difference is tiny, users can barely notice it.
We put scripts in the footer so that pages would render faster. Now you are saying there is no difference?

The other advantage of my proposal is if you discovered, say, that ie did not actually support deferral it would have been a trivial change to switch it to using the footer method.

Post Reply