Javascript at the end of a page
|
View:
New views
7 Messages
—
Rating Filter:
Alert me
|
 |
Javascript at the end of a page
by dear_stephen
::
Rate this Message:
Hi
I have been reading "High Performance Web Sites" from O'Reilly in which they state that putting javascripts at the top of your html page prevents the browser from rendering until the scripts are downloaded. This is illustrated at http://stevesouders.com/hpws/js-middle.php Of course I can move them down the bottom in the layout, but then I can't add dependant scripts in a decorated page. Example Decorated Page <html> <head> <meta name="layout" content="myLayout" /> </head> <body>Page to be decorated <script src="thisPageSpecificScriptDependantOnGlobal.js"></script> </body> </html> Example decorator layout: <html> <head> <g:layoutHead /> </head> <body><g:layoutBody /> <script src="global.js" /> </body> </html> This results in: <html> <head> </head> <body>Page to be decorated <script src="thisPageSpecificScriptDependantOnGlobal.js"></script> <script src="global.js" /> </body> </html> The problem is that the first script needs to be below the second script. Does anyone have a possible solution? Cheers, Stephen |
|
|
Re: Javascript at the end of a page
by Richard Hart
::
Rate this Message:
Sadly this doesn't answer your question, but personally I think if it takes 10seconds for the server to return a simple JS file (as in that example) of only a few hundred KB, then the impact on your pages loading time is the least of a web developers worries. I say, just include them at the top of your page. If they are large, then look into compressing or packing them. You can get JS filesizes down to tiny sizes using those techniques. After which the loading time impact will be negligible.
If you need to run some code, which is blocking for longer then you'd like, then use something like jQuery to run the code once the page has finished rendering: $(document).ready { // Call your function here. } |
|
|
Re: Javascript at the end of a page
by Burt Beckwith
::
Rate this Message:
The problem isn't that the files are huge and take a long time to download -
it's that the script is evaluated as it's loaded, and if that isn't necessary at that point in the page (i.e. if there's no document.write statements) then it's best to let that 10 seconds happen after the page is visible in the browser rather than holding up the display unnecessarily. It's all about perceived page load time. Burt On Tuesday 12 August 2008 7:33:16 pm Hates_ wrote: > Sadly this doesn't answer your question, but personally I think if it takes > 10seconds for the server to return a simple JS file (as in that example) of > only a few hundred KB, then the impact on your pages loading time is the > least of a web developers worries. I say, just include them at the top of > your page. If they are large, then look into compressing or packing them. > You can get JS filesizes down to tiny sizes using those techniques. After > which the loading time impact will be negligible. > > If you need to run some code, which is blocking for longer then you'd like, > then use something like jQuery to run the code once the page has finished > rendering: > > $(document).ready { > // Call your function here. > } --------------------------------------------------------------------- To unsubscribe from this list, please visit: http://xircles.codehaus.org/manage_email |
|
|
Re: Javascript at the end of a page
by Richard Hart
::
Rate this Message:
Ah yes. I hadn't taken the actual evaluation time of the script into consideration. It's just one of those things I take for granted (and really shouldn't) as I've never noticed a perceivable impact on loading times by my scripts.
You could always roll your own javascript tag that will include the global.js file before appending your dependant one to the page. But it would get messy if you have multiple JS includes and isn't an ideal solution in my mind: <g:dependantJavascript src="thisPageSpecificScriptDependantOnGlobal.js" /> and plain <g:javascript src="thisPageSpecificScriptNotDependantOnGlobal.js" /> Or use Javascript to include the Global.js file within itself. |
|
|
Re: Javascript at the end of a page
by dear_stephen
::
Rate this Message:
I have come up with a solution that works well. I created the following tags.
def dependantJavascript = { attrs, body -> flash.dependantJavascript = body() } def renderDependantJavascript = { out << flash.dependantJavascript } In my desorated page I have ... <g:dependantJavascript> <script src="thisPageSpecificScriptDependantOnGlobal.js"></script> </g:dependantJavascript> In my decorator page I put the following. <script src="global.js" /> <g:renderDependantJavascript />
|
|
|
Re: Javascript at the end of a page
by Burt Beckwith
::
Rate this Message:
Very slick, I'm definitely borrowing that.
Burt On Wednesday 13 August 2008 4:08:46 am dear_stephen wrote: > I have come up with a solution that works well. I created the following > tags. > > def dependantJavascript = { attrs, body -> > flash.dependantJavascript = body() > } > def renderDependantJavascript = { > out << flash.dependantJavascript > } > > > In my desorated page I have ... > <g:dependantJavascript> > <script src="thisPageSpecificScriptDependantOnGlobal.js"></script> > </g:dependantJavascript> > > In my decorator page I put the following. > <script src="global.js" /> > <g:renderDependantJavascript /> > > Hates_ wrote: > > Ah yes. I hadn't taken the actual evaluation time of the script into > > consideration. It's just one of those things I take for granted (and > > really shouldn't) as I've never noticed a perceivable impact on loading > > times by my scripts. > > > > You could always roll your own javascript tag that will include the > > global.js file before appending your dependant one to the page. But it > > would get messy if you have multiple JS includes and isn't an ideal > > solution in my mind: > > > > <g:dependantJavascript src="thisPageSpecificScriptDependantOnGlobal.js" > > /> > > > > and plain > > > > <g:javascript src="thisPageSpecificScriptNotDependantOnGlobal.js" /> > > > > Or use Javascript to include the Global.js file within itself. --------------------------------------------------------------------- To unsubscribe from this list, please visit: http://xircles.codehaus.org/manage_email |
|
|
Re: Javascript at the end of a page
by mdepasquale
::
Rate this Message:
You can actually accomplish this using Sitemesh Content blocks, instead of writing custom Grails tags:
On your layout page put this (to replace renderDependantJavascript): <g:pageProperty name="page.javascript"/> And on the decorated page put this (to replace dependantJavascript): <content tag="javascript"> <script src="thisPageSpecificScriptDependantOnGlobal.js"></script> </content> Note that you will need to use the SiteMesh HTMLPageParser in place of FastPageParser (which has been deprecated). HTMLPageParser is used as of Grails 1.1.1, but if you don't want to upgrade Grails, you can go to sitemesh.xml and replace all instances of FastPageParser with HTMLPageParser ie: <parser content-type="text/html" class="com.opensymphony.module.sitemesh.parser.HTMLPageParser" />
|
| Free embeddable forum powered by Nabble | Forum Help |
