When does SCRIPT include file load

[Ed Brandmark]

I have a tag of the form
<SCRIPT LANGUAGE="JavaScript1.1" SRC="foo.js".....

and was wondering if this delays the loading of my page until that
file foo.js downloads.

It seems that if I place this in the HEAD of my document - the page
will wait until it downloads.

If I place it in the BODY of my document - supposedly the page
continues loading.

But what happens if

a) a document.write occurs (is the content pushed around)?

b) a function is called in the page that is defined in the .js file?
Does it then wait?

c) some say that the .js file is scanned for document.writes - but how
is this possible if it doesn't delay the page waiting for the .js
file?

This information will help me plan my site in order to make it as
efficient as possible. I am interested in how all the browsers (both
IE and Netscape including versions back to 4.0) work.

Thanks
Ed

 

[Jerry Park]

I have a tag of the form
<SCRIPT LANGUAGE="JavaScript1.1" SRC="foo.js".....

and was wondering if this delays the loading of my page until that
file foo.js downloads.

It seems that if I place this in the HEAD of my document - the page
will wait until it downloads.

If I place it in the BODY of my document - supposedly the page
continues loading.

But what happens if

a) a document.write occurs (is the content pushed around)?

b) a function is called in the page that is defined in the .js file?
Does it then wait?

c) some say that the .js file is scanned for document.writes - but how
is this possible if it doesn't delay the page waiting for the .js
file?

This information will help me plan my site in order to make it as
efficient as possible. I am interested in how all the browsers (both
IE and Netscape including versions back to 4.0) work.

Thanks
Ed

I can't speak authoritatively, but with anything I have written, it
seems that each element of the page loads in order. That is, a <script>
tag is parsed, then what follows is parsed. It is not just
document.writes which would fail if parsing were delayed, any functions
and variables defined in the source file would also fail if those
defined functions were called before the source file loaded.

 

[Michael Winter]

on 11/11/2003:

I have a tag of the form
<SCRIPT LANGUAGE="JavaScript1.1" SRC="foo.js".....

and was wondering if this delays the loading of my page until that
file foo.js downloads.

It seems that if I place this in the HEAD of my document - the page
will wait until it downloads.

If I place it in the BODY of my document - supposedly the page
continues loading.

But what happens if

a) a document.write occurs (is the content pushed around)?

b) a function is called in the page that is defined in the .js file?
Does it then wait?

c) some say that the .js file is scanned for document.writes - but how
is this possible if it doesn't delay the page waiting for the .js
file?

This information will help me plan my site in order to make it as
efficient as possible. I am interested in how all the browsers (both
IE and Netscape including versions back to 4.0) work.

Thanks
Ed

Disclaimer: I'm not an authority on the subject: this is my
interpretation of the HTML 4.01 specification. I don't normally do
this (a disclaimer), but the HTML specification isn't too explicit in
some areas, so I'm keeping myself covered in case my interpretation is
wrong.

Technically, this is a HTML issue, not a JavaScript one.

Everything in a HTML page is evaluated in the order it is encountered.
With one exception (explained later), the contents of SCRIPT elements
should be evaluated inline. That is, rendering pauses until the
SCRIPT has finished executing.

The document HEAD should be evaluated first, followed by the document
BODY.

If the 'defer' attribute is specified in the SCRIPT element, the
browser is allowed to skip evaluation until the remainder of the
document is rendered. You should not specify 'defer' for any SCRIPT
blocks that contain 'document.write[ln]' statements, or those that
declare functions that are used by scripts that will be evaluated
inline.

I assume that deferred SCRIPT blocks follow the same rules as normal
blocks (head then body), but I've not seen anything specific. I think
that's because 'defer' is only a hint, not an order: the browser could
evaluate it normally if it wished.

A note on your HTML: don't use the 'language' attribute in SCRIPT
elements. It's been depreciated for around five years! Use <SCRIPT
type="text/javascript"> instead.

Direct answers to your questions:

a) The SCRIPT block in which it's used should be evaluated inline. It
will be like you entered the inserted text in the original HTML page.
That's why you shouldn't use 'defer': the text might not be inserted
until everything else has been rendered. Either the text will appear
at the end of the page, or the entire page could be replace by that
text.

b) The .js file should be loaded and compiled as soon as it's
encountered (unless 'defer' is specified).

c) Scanned for write? The only scanning that might occur would be for
functions that need to compiled (in case a function is called before
it's defined). Statements should be executed as they're encountered,
including writes.

To your final paragraph: As I said at the start, this isn't really a
JavaScript issue. All scripting languages (JavaScript, JScript, TCL,
VBScript, etc) follow these rules: it's governed by HTML, not the
script language.

Mike

 

[Thomas 'PointedEars' Lahn]

I have a tag of the form
<SCRIPT LANGUAGE="JavaScript1.1" SRC="foo.js".....

Unless you know what you are doing, don't use the `language' attribute.
User agents may interpret the above as that you want them to support all
language elements of JavaScript up to version 1.1. Version 1.5 is
current, though. Use the `type' attribute instead which also has the
advantage that you have valid HTML 4:

and was wondering if this delays the loading of my page until that
file foo.js downloads.

Most certainly. In both SGML and XML, source code is parsed top-down
the tree, left-to-right. It is highly unlikely that a parser will
continue parsing while the script engine parses the .js file itself as
a following `script' element could (and should) use the code defined
in the .js file (otherwise the .js should not be included in the first
place). Not waiting for the JavaScript engine to finish parsing would
mean to provoke script errors, and I would consider such a user agent
badly broken.

It seems that if I place this in the HEAD of my document - the page
will wait until it downloads.

That is AIUI the correct behavior. The advantage is that you can
be sure (if the JavaScript code is syntactically correct) that
functions defined therein are in fact defined when calling them.

If I place it in the BODY of my document - supposedly the page
continues loading.

Up to the element which sibling is the `script' element. Then
markup parsing should wait for the JavaScript engine to finish
before continuing with the next sibling, or the next sibling of
the parent element, if the `script' element was the last child
element of its parent element.

a) a document.write occurs (is the content pushed around)?

Depends on the implementation. It seems that IE buffers text passed
to document.write(...) until the current block is finished, while
Netscape up to 4.x and Mozilla/5.0 does not. It is therefore best to
do the buffering for yourself, storing the text to write in a string
variable and write the whole lot in one document.write(...) call.

b) a function is called in the page that is defined in the .js file?
Does it then wait?

Yes, it does. There is by definition no asynchronous processing in
ECMAScript implementations, not even setTimeout/Interval triggers such.

c) some say that the .js file is scanned for document.writes

It is not.

- but how is this possible if it doesn't delay the page waiting for
the .js file?

It is not.

This information will help me plan my site in order to make it as
efficient as possible. I am interested in how all the browsers (both
IE and Netscape including versions back to 4.0) work.

I do hope you noted that client-side JavaScript support
can be restricted, disabled or not even be present, so
you create documents that can also be used without it.


PointedEars