Why script-tags are placed at the bottom of the page in Prosilver?

Discuss requests for comments/changes posted in the Issue Tracker for the development of phpBB's style.
Forum rules
Please do not post support questions regarding installing, updating, or upgrading phpBB or modifying styles of released phpBB versions. If you need support for phpBB please visit the Support Forums on phpbb.com.

If you have questions regarding creating styles please post in Styles Support & Discussion to receive proper guidance from our staff and community.
Sectoid
Registered User
Posts: 15
Joined: Wed Sep 13, 2017 1:41 pm

Why script-tags are placed at the bottom of the page in Prosilver?

Post by Sectoid »

In Prosilver, script-tags are placed at the bottom of the page. This allows static content of the page to be shown a little bit faster to a user who doesn't have necessary resources yet in his browser cache. On some sites, this may be beneficial. For example, if the site has mostly random users who are not loading several pages during a visit.

But are there any other advantages?

The major drawback is that the DOM cannot be modified until it has been loaded completely. If you need to modify DOM but can't do it until the ONLOAD event, the page may flicker, element positions may change etc. This is annoying and confusing to a user.

A forum is usually such a website where most visitors are returning users who have all the resources already in browser cache most of the time. Therefore, I'm suggesting that the scripts, especially jQuery, would be loaded in the head-tag.

PS. 504, 504, 504...

User avatar
hanakin
Front-End Dev Team Lead
Front-End Dev Team Lead
Posts: 968
Joined: Sat Dec 25, 2010 9:02 pm
Contact:

Re: Why script-tags are placed at the bottom of the page in Prosilver?

Post by hanakin »

It's done was done to also account for async. Not to mention most of the js has to wait. If there is js that does not then it can be placed in the header but this is a case by case basis. The real issue is that the js needs completely rewritten modularly and packaged into header/footer files but that is a massive undertaking. One that would be best held for the new theme and not something that will happen for prosilver most likely except retroactively. However your example is flawed as jquery should always be in the footer as it implicitly requires the son to be built. This is a standard practice
Donations welcome via Paypal Image

Sectoid
Registered User
Posts: 15
Joined: Wed Sep 13, 2017 1:41 pm

Re: Why script-tags are placed at the bottom of the page in Prosilver?

Post by Sectoid »

Thanks for the explanation.
hanakin wrote: Wed Sep 13, 2017 4:40 pm jquery should always be in the footer as it implicitly requires the son to be built. This is a standard practice
I don't understand this. Son? Standard? Are you talking about jQuery in general or jQuery in phpBB? In my knowledge there's no requirements about where to put the jQuery.

User avatar
hanakin
Front-End Dev Team Lead
Front-End Dev Team Lead
Posts: 968
Joined: Sat Dec 25, 2010 9:02 pm
Contact:

Re: Why script-tags are placed at the bottom of the page in Prosilver?

Post by hanakin »

Son was an autocorrect apologies I meant dom. As far as a standard yes it requires the dom to be ready that is what document.ready means
Donations welcome via Paypal Image

Sectoid
Registered User
Posts: 15
Joined: Wed Sep 13, 2017 1:41 pm

Re: Why script-tags are placed at the bottom of the page in Prosilver?

Post by Sectoid »

hanakin wrote: Wed Sep 13, 2017 8:38 pm As far as a standard yes it requires the dom to be ready that is what document.ready means
I don't buy this. Only difference between script tags in <head> and <body> is the amount of markup above the script tag, right?

Even if the script tag for jQuery is at the bottom of the page there's still at least </body> and </html> tags below it. You can start manipulating the unfinished DOM if the browser supports it but the DOM is definitely not ready at that point. So, in any case (scripts in <head> or <body>), you should use listeners to test if the DOM is ready. And when you start doing that, it does not matter where to put the script tag.

User avatar
DavidIQ
Customisations Team Leader
Customisations Team Leader
Posts: 1903
Joined: Thu Mar 02, 2006 4:29 pm
Location: Earth
Contact:

Re: Why script-tags are placed at the bottom of the page in Prosilver?

Post by DavidIQ »

I echo the comment already mentioned: loading jQuery near the bottom of pages is fairly standard practice and isn't anything new.
Image

Sectoid
Registered User
Posts: 15
Joined: Wed Sep 13, 2017 1:41 pm

Re: Why script-tags are placed at the bottom of the page in Prosilver?

Post by Sectoid »

DavidIQ wrote: Wed Sep 13, 2017 9:56 pm I echo the comment already mentioned: loading jQuery near the bottom of pages is fairly standard practice and isn't anything new.
I'm not sure do we have some kind of a language barrier here but to me "standard" sounds like "this is how it should be done".

I agree many sites put jQuery at the end but disagree it should be there always. Even https://jquery.com/ loads jQuery in <head>!

User avatar
DavidIQ
Customisations Team Leader
Customisations Team Leader
Posts: 1903
Joined: Thu Mar 02, 2006 4:29 pm
Location: Earth
Contact:

Re: Why script-tags are placed at the bottom of the page in Prosilver?

Post by DavidIQ »

Ok then let me go a different route you can maybe understand better: exactly what in phpBB flickers when loading that is caused by jQuery being near the bottom of the page?
Image

Sectoid
Registered User
Posts: 15
Joined: Wed Sep 13, 2017 1:41 pm

Re: Why script-tags are placed at the bottom of the page in Prosilver?

Post by Sectoid »

DavidIQ wrote: Wed Sep 13, 2017 10:20 pm Ok then let me go a different route you can maybe understand better: exactly what in phpBB flickers when loading that is caused by jQuery being near the bottom of the page?
If, for example, I want to made an extension that automatically shows a mobile version of the page or changes the width of the page or something like that... The only way to do that without user seeing unnecessary flickering and element re-sizing is to manipulate the DOM as early as possible.

User avatar
DavidIQ
Customisations Team Leader
Customisations Team Leader
Posts: 1903
Joined: Thu Mar 02, 2006 4:29 pm
Location: Earth
Contact:

Re: Why script-tags are placed at the bottom of the page in Prosilver?

Post by DavidIQ »

So you haven't actually run into this issue developing an extension or doing something with phpBB?

The way jQuery is loaded in prosilver has not changed in over 6 years, that's pre-3.1.0-Alpha. The pros and the cons were weighed here:
viewtopic.php?f=84&t=41199
Image

Post Reply