A few more lecture 20 questions
12 views
Skip to first unread message
Maria Jabon
Dec 8, 2008, 5:08:21 PM12/8/08
to CS193H High Performance Web Sites
I'm stumped on a few of these:
How can you load an external script asynchronously, and have an inline
script execute as soon as the external script is loaded?
Maybe is the answer to use a set timeout function in the onload?
What happens if an external script loaded asynchronously does
document.write?
Not sure
What's the unusual behaviour of a stylesheet, inline script, and image
(in that order)? What would explain why browser developers implemented
this behaviour?
My thoughts:
Stylesheets block || downloads in FX , not ie
Browsers parse css and js sequentially. Normally downloads can happen
while css execute, but not with a script after.
I don't know why browsers chose this.
What do inline scripts block? How can you workaround this blocking?
My thoughts:
Downloads of anything else, although while they execute other things
can happen. You can move them to the bottom, defer them, load
asynchronously, or use a setTimeout function.
How does @import cause downloading problems with stylesheets followed
by inline scripts?
My thoughts:
It blocks parallel downloading of stylesheet
How can you load an external script asynchronously, and have an inline
script execute as soon as the external script is loaded?
Maybe is the answer to use a set timeout function in the onload?
What happens if an external script loaded asynchronously does
document.write?
Not sure
What's the unusual behaviour of a stylesheet, inline script, and image
(in that order)? What would explain why browser developers implemented
this behaviour?
My thoughts:
Stylesheets block || downloads in FX , not ie
Browsers parse css and js sequentially. Normally downloads can happen
while css execute, but not with a script after.
I don't know why browsers chose this.
What do inline scripts block? How can you workaround this blocking?
My thoughts:
Downloads of anything else, although while they execute other things
can happen. You can move them to the bottom, defer them, load
asynchronously, or use a setTimeout function.
How does @import cause downloading problems with stylesheets followed
by inline scripts?
My thoughts:
It blocks parallel downloading of stylesheet
Vibhor Nanavati
Dec 8, 2008, 6:13:30 PM12/8/08
to cs193...@googlegroups.com
Maria- my thoughts inline....
Or use the 'degrading scripts' pattern. If we had control over the external script, we can have a small code snippet at the bottom of the external script that goes through all the script DOM objects and executes the innerHTML of the script in question. (I think it is the google-analytics example where you can find that code snippet).
--
VIBHOR NANAVATI <vib...@stanford.edu>
On Mon, Dec 8, 2008 at 2:08 PM, Maria Jabon <mja...@stanford.edu> wrote:
I'm stumped on a few of these:
How can you load an external script asynchronously, and have an inline
script execute as soon as the external script is loaded?
Maybe is the answer to use a set timeout function in the onload?
Or use the 'degrading scripts' pattern. If we had control over the external script, we can have a small code snippet at the bottom of the external script that goes through all the script DOM objects and executes the innerHTML of the script in question. (I think it is the google-analytics example where you can find that code snippet).
What happens if an external script loaded asynchronously does
document.write?
Not sure
Behavior varies across the browsers. In IE with 'defer' attribute, the document.write is ignored. If script dom approach is used, it completely erases the page.
http://stevesouders.com/tests/delayed-script-execution.php (click 'Load Dynamically'').
http://stevesouders.com/tests/delayed-script-execution.php (click 'Load Dynamically'').
What's the unusual behaviour of a stylesheet, inline script, and image
(in that order)? What would explain why browser developers implemented
this behaviour?
My thoughts:
Stylesheets block || downloads in FX , not ie
Browsers parse css and js sequentially. Normally downloads can happen
while css execute, but not with a script after.
I don't know why browsers chose this.
An inline script between a stylesheet and an image is going to block the download of the image in an unusual way.
at t0 the css starts downloading and finishes downoading and parsing at t1. At t1, the js starts executing and finishes at t2.
The image download then starts at t2.
So it is all sequential.
i) This happens because css download and parsing blocks any inline script execution. ii) The inline script blocks any resourse download that is below it.
First happens because javascript can access a DOM elements style properties and modify it (say, color). The browsers will tend to avoid FOUC (flash effect) hence the sequentializing.
Second is a well known fact from book 1, that scripts block any resource download because script can do a document.write().
at t0 the css starts downloading and finishes downoading and parsing at t1. At t1, the js starts executing and finishes at t2.
The image download then starts at t2.
So it is all sequential.
i) This happens because css download and parsing blocks any inline script execution. ii) The inline script blocks any resourse download that is below it.
First happens because javascript can access a DOM elements style properties and modify it (say, color). The browsers will tend to avoid FOUC (flash effect) hence the sequentializing.
Second is a well known fact from book 1, that scripts block any resource download because script can do a document.write().
What do inline scripts block? How can you workaround this blocking?
My thoughts:
Downloads of anything else, although while they execute other things
can happen. You can move them to the bottom, defer them, load
asynchronously, or use a setTimeout function.
How does @import cause downloading problems with stylesheets followed
by inline scripts?
My thoughts:
It blocks parallel downloading of stylesheet
--
VIBHOR NANAVATI <vib...@stanford.edu>
Julien Wetterwald
Dec 8, 2008, 10:55:51 PM12/8/08
to CS193H High Performance Web Sites
> > How can you load an external script asynchronously, and have an inline
> > script execute as soon as the external script is loaded?
>
> > Maybe is the answer to use a set timeout function in the onload?
>
> Or use the 'degrading scripts' pattern. If we had control over the external
> script, we can have a small code snippet at the bottom of the external
> script that goes through all the script DOM objects and executes the
> innerHTML of the script in question. (I think it is the google-analytics
> example where you can find that code snippet).
should work as well.
Julien
CG
Dec 9, 2008, 1:50:02 AM12/9/08
to cs193...@googlegroups.com
For this question:
What's the unusual behaviour of a stylesheet, inline script, and image
(in that order)? What would explain why browser developers implemented
this behaviour?
(in that order)? What would explain why browser developers implemented
this behaviour?
Inline scripts behave this way due to preserving execution order and document.write dependencies.
(3-Don't Scatter Inline Scripts, pg.1)
CG
Dec 9, 2008, 2:23:17 AM12/9/08
to cs193...@googlegroups.com
Vibhor,
I think you meant FF? In IE w/'defer', the document.write causes the entire page to be overwritten.
For this:
"Behavior varies across the browsers. In IE with 'defer' attribute, the document.write is ignored. If script dom approach is used, it completely erases the page.
http://stevesouders.com/tests/delayed-script-execution.php (click 'Load Dynamically'')."
http://stevesouders.com/tests/delayed-script-execution.php (click 'Load Dynamically'')."
On Mon, Dec 8, 2008 at 3:13 PM, Vibhor Nanavati <nvi...@gmail.com> wrote:
Reply all
Reply to author
Forward
0 new messages