Placement of boot script in body vs. head

82 views
Skip to first unread message

Michael Allan

unread,
Nov 7, 2012, 8:00:34 PM11/7/12
to Google Web Toolkit
Why place the boot script in the document body, instead of the head?
https://developers.google.com/web-toolkit/doc/latest/DevGuideOrganizingProjects#DevGuideHostPage
https://developers.google.com/web-toolkit/doc/latest/DevGuideOrganizingProjects#DevGuideBootstrap

I've ignored the instructions and placed it in the head (std, xs and
xsiframe linkers) with no apparent problems. What am I missing?

--
Michael Allan

Toronto, +1 416-699-9528
http://zelea.com/

Matthew Dempsky

unread,
Nov 7, 2012, 8:22:48 PM11/7/12
to google-web-toolkit
My understanding is that when the browser sees a <script> tag, it needs to block until the script resource is available before it can resume parsing and displaying the rest of the page's contents.  Putting the <script> tag at the end helps avoid this so the page renders faster.

Now that HTML has the async script attribute, that would be another option if you want to keep your script tags in the header.  (Note that there's a semantics difference since scripts might execute out of order depending on caching and network speeds.)


--
You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group.
To post to this group, send email to google-we...@googlegroups.com.
To unsubscribe from this group, send email to google-web-tool...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-web-toolkit?hl=en.


Michael Allan

unread,
Nov 7, 2012, 9:50:36 PM11/7/12
to google-web-toolkit
Hi Matthew,

> My understanding is that when the browser sees a <script> tag, it
> needs to block until the script resource is available before it can
> resume parsing and displaying the rest of the page's contents.
> Putting the <script> tag at the end helps avoid this so the page
> renders faster.

I was thinking along the same lines at first. But then the guide
says, "You want to put the GWT selection script as early as possible
within the body, so that it begins fetching the compiled script before
other scripts (because it won't block any other script requests)."
https://developers.google.com/web-toolkit/doc/latest/DevGuideOrganizingProjects#DevGuideBootstrap

So best is top of body. But why not even earlier in the head?

Michael


> Now that HTML has the async script
> attribute<http://www.whatwg.org/specs/web-apps/current-work/multipage/scripting-1.html#attr-script-async>,

Thomas Broyer

unread,
Nov 8, 2012, 4:10:59 AM11/8/12
to google-we...@googlegroups.com


On Thursday, November 8, 2012 3:50:47 AM UTC+1, Michael Allan wrote:
Hi Matthew,

> My understanding is that when the browser sees a <script> tag, it
> needs to block until the script resource is available before it can
> resume parsing and displaying the rest of the page's contents.
> Putting the <script> tag at the end helps avoid this so the page
> renders faster.

I was thinking along the same lines at first.  But then the guide
says, "You want to put the GWT selection script as early as possible
within the body, so that it begins fetching the compiled script before
other scripts (because it won't block any other script requests)."
https://developers.google.com/web-toolkit/doc/latest/DevGuideOrganizingProjects#DevGuideBootstrap


It really depends on your use case and the user experience you want to have during loading.
For instance, a very easy way to have a "Loading..." text on the page:

<body>
<noscript>
  You must have JavaScript enabled blah blah blah
</noscript>
<script>
  document.write("<div id='loading'>Loading…<" + "/div>");
</script>
<script src="myapp/myapp.nocache.js"></script>

With the first thing you do in the onModuleLoad is Document.get().getElementById('loading').removeFromParent();

The "bootstrap script" is "as early as possible within the body" yet not at the very beginning.
 
> Now that HTML has the async script
> attribute<http://www.whatwg.org/specs/web-apps/current-work/multipage/scripting-1.html#attr-script-async>,
> that would be another option if you want to keep your script tags in
> the header.  (Note that there's a semantics difference since scripts
> might execute out of order depending on caching and network speeds.)

Also, it might only work with the xsiframe linker, as the others use document.write() which IIRC could destroy the document when run async.
 

Michael Allan

unread,
Nov 9, 2012, 9:08:34 PM11/9/12
to google-we...@googlegroups.com
Hi Thomas,

> <body>
> <noscript>
> You must have JavaScript enabled blah blah blah
> </noscript>
> <script>
> document.write("<div id='loading'>Loading…<" + "/div>");
> </script>
> <script src="myapp/myapp.nocache.js"></script>
>
> With the first thing you do in the onModuleLoad is
> Document.get().getElementById('loading').removeFromParent();
>
> The "bootstrap script" is "as early as possible within the body" yet not at
> the very beginning.

Okay, so body placement is required in this case. OTOH if we don't
write to the document before the boot script, then I guess there's no
reason to avoid placing it in the head if that works (as it seems to),
despite what the guide recommends.

Michael
Reply all
Reply to author
Forward
0 new messages