I have a major problem with load time of my sites index.php page. Because there''s so much Ajax/JavaScript placed in the <head> tags the page takes about 10 seconds to load the JS and then a further 5/7 seconds to load the content giving me a total load time of about 17.22 seconds and 170kb. So the theory here is that I load all the JS into the cache first but I''m suffering with a long page load time which is killing me. It wouldn''t be so bad if a user saw some action but right now they have to wait 10 seconds minimum before they evern begin to see the content load which is frustrating. Is there some way in which I can rather load a specific JS code on clicking a link that requires that JS code instead of pre-loading it in the <head> tag? I''m guessing it will have something to do with the onclick event but I really don''t know and any help is really really appreciated. --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Spinoffs" group. To post to this group, send email to rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---
Well, there is currently nothing built in to Prototype.js that will
allow you to do this, but I''ve solved a similar problem at work by
building an additional library just to handle resource management like
this.
My version is extremely complex because I''ve successfully created a
mechanism for just-in-time resource loading (my library will import a
javascript file the first time a function defined in that file will be
used) and also created several mechanisms to allow for resource
destruction and dependancy management. Basically my library works like
this:
top level object:
var CompanyName = {
libs: {}
};
CompanyName.require = function(script,callback) {
if ( ! CompanyName.libs[ script ] ) {
var lib = document.createElement(''script'');
var elemId = ''LIB_'' + (new Date()).getTime();
lib.setAttribute(''id'',elemId);
lib.setAttribute(''src'',script);
lib.setAttribute(''type'',''text/javascript'');
/* Mozilla Load Event Listener */
Event.observe(lib,''load'',function() {
( callback || Prototype.emptyFunction )();
});
/* IE Load Event Listener */
if ( lib.readyState && callback ) {
lib.onreadystatechange = function() {
if ( this.readyState == ''complete'' ||
this.readyState =''loaded'' ) {
( callback || Prototype.emptyFunction )();
}
};
}
document.getElementsByTagName(''head'')[0].appendChild(lib);
CompanyName.libs[ script ] = $(elemId);
} else {
( callback || Prototype.emptyFunction )();
}
return true;
};
/*
on window load, spin through the pre-defined scripts and add them
to our list of "loaded" libraries
*/
Event.observe(window,''load'',function() {
$$(''script'').each(function(elem) {
var elemId = $(elem).getAttribute(''id'');
var src = $(elem).getAttribute(''src'');
if ( ! elemId ) {
elemId = ''LIB_'' + (new Date()).getTime();
$(elem).setAttribute(''id'',elemId);
}
if ( src ) {
CompanyName.libs[ src ] = elemId;
}
});
});
And there you have it, a simple resource loading mechanism. Our
version has a lot more complexity and we have the capability in our
functions to dynamically load CSS files and favicon''s using the same
function, but I took all of that out just to focus on exactly what
you''ll need to load scripts dynamically.
The other (perhaps simpler) option that you can try is to load all of
the scripts outside of the HEAD tag. Put your script definitions near
the bottom of your BODY element which will allow the browser to mostly
finish rendering the content before going out to try to fetch any
JavaScript files. There have been a lot of articles written covering
this concept.
http://developer.mozilla.org/en/docs/Tips_for_Authoring_Fast-loading_HTML_Pages
http://betterexplained.com/articles/speed-up-your-javascript-load-time/
http://www.thinkvitamin.com/features/webapps/serving-javascript-fast
http://roscripts.com/Web_page_optimizer-109.html
http://www.ajaxperformance.com/?p=33
Hope this helps. Good luck!
-E
On 3/29/07, Justin <jjhartman-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org>
wrote:>
> I have a major problem with load time of my sites index.php page.
> Because there''s so much Ajax/JavaScript placed in the <head>
tags the
> page takes about 10 seconds to load the JS and then a further 5/7
> seconds to load the content giving me a total load time of about 17.22
> seconds and 170kb.
>
> So the theory here is that I load all the JS into the cache first but
> I''m suffering with a long page load time which is killing me. It
> wouldn''t be so bad if a user saw some action but right now they
have
> to wait 10 seconds minimum before they evern begin to see the content
> load which is frustrating.
>
> Is there some way in which I can rather load a specific JS code on
> clicking a link that requires that JS code instead of pre-loading it
> in the <head> tag? I''m guessing it will have something to do
with the
> onclick event but I really don''t know and any help is really
really
> appreciated.
>
>
> >
>
--
Eric Ryan Harrison
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---
Thanks Eric, I think this is exactly what I needed. I''m going to check those resources out now to have a look further but I''ll let you know if I was successful or not. Regards Justin On Mar 29, 11:56 am, "Eric Harrison" <blis...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:> Well, there is currently nothing built in to Prototype.js that will > allow you to do this, but I''ve solved a similar problem at work by > building an additional library just to handle resource management like > this. > > My version is extremely complex because I''ve successfully created a > mechanism for just-in-time resource loading (my library will import a > javascript file the first time a function defined in that file will be > used) and also created several mechanisms to allow for resource > destruction and dependancy management. Basically my library works like > this: > > top level object: > > var CompanyName = { > libs: {} > > }; > > CompanyName.require = function(script,callback) { > if ( ! CompanyName.libs[ script ] ) { > var lib = document.createElement(''script''); > var elemId = ''LIB_'' + (new Date()).getTime(); > lib.setAttribute(''id'',elemId); > lib.setAttribute(''src'',script); > lib.setAttribute(''type'',''text/javascript''); > > /* Mozilla Load Event Listener */ > Event.observe(lib,''load'',function() { > ( callback || Prototype.emptyFunction )(); > }); > > /* IE Load Event Listener */ > if ( lib.readyState && callback ) { > lib.onreadystatechange = function() { > if ( this.readyState == ''complete'' || this.readyState => ''loaded'' ) { > ( callback || Prototype.emptyFunction )(); > } > }; > } > > document.getElementsByTagName(''head'')[0].appendChild(lib); > CompanyName.libs[ script ] = $(elemId); > } else { > ( callback || Prototype.emptyFunction )(); > } > > return true; > > }; > > /* > on window load, spin through the pre-defined scripts and add them > to our list of "loaded" libraries > */ > Event.observe(window,''load'',function() { > $$(''script'').each(function(elem) { > var elemId = $(elem).getAttribute(''id''); > var src = $(elem).getAttribute(''src''); > if ( ! elemId ) { > elemId = ''LIB_'' + (new Date()).getTime(); > $(elem).setAttribute(''id'',elemId); > } > if ( src ) { > CompanyName.libs[ src ] = elemId; > } > }); > > }); > > And there you have it, a simple resource loading mechanism. Our > version has a lot more complexity and we have the capability in our > functions to dynamically load CSS files and favicon''s using the same > function, but I took all of that out just to focus on exactly what > you''ll need to load scripts dynamically. > > The other (perhaps simpler) option that you can try is to load all of > the scripts outside of the HEAD tag. Put your script definitions near > the bottom of your BODY element which will allow the browser to mostly > finish rendering the content before going out to try to fetch any > JavaScript files. There have been a lot of articles written covering > this concept. > > http://developer.mozilla.org/en/docs/Tips_for_Authoring_Fast-loading_...http://betterexplained.com/articles/speed-up-your-javascript-load-time/http://www.thinkvitamin.com/features/webapps/serving-javascript-fasthttp://roscripts.com/Web_page_optimizer-109.htmlhttp://www.ajaxperformance.com/?p=33 > > Hope this helps. Good luck! > > -E > > On 3/29/07, Justin <jjhart...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote: > > > > > > > I have a major problem with load time of my sites index.php page. > > Because there''s so much Ajax/JavaScript placed in the <head> tags the > > page takes about 10 seconds to load the JS and then a further 5/7 > > seconds to load the content giving me a total load time of about 17.22 > > seconds and 170kb. > > > So the theory here is that I load all the JS into the cache first but > > I''m suffering with a long page load time which is killing me. It > > wouldn''t be so bad if a user saw some action but right now they have > > to wait 10 seconds minimum before they evern begin to see the content > > load which is frustrating. > > > Is there some way in which I can rather load a specific JS code on > > clicking a link that requires that JS code instead of pre-loading it > > in the <head> tag? I''m guessing it will have something to do with the > > onclick event but I really don''t know and any help is really really > > appreciated. > > -- > Eric Ryan Harrison--~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Spinoffs" group. To post to this group, send email to rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---
Great. I definitely want to hear how everything works out for you, even if you just shoot me an email off-list. Dynamic resource loading is definitely my forte and if you''re interested, once you get the basics working I''d be more than happy to talk to you about some of the even more complex techniques like just-in-time resource allocation. From everything I''ve read on the internet regarding JavaScript development, I have not seen anyone using a technique as complicated as what I have in place. Probably just due to the fact that getting it working in every browser was such an impossible pain in the butt. That and the fact that JavaScript currently doesn''t let you pass references to the String and Number data types (which caused me MAJOR headaches when trying to get a just-in-time loading mechanism working... *sigh*). Anyway, glad I could help. -E On 3/29/07, Justin <jjhartman-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:> > Thanks Eric, I think this is exactly what I needed. I''m going to check > those resources out now to have a look further but I''ll let you know > if I was successful or not. > > Regards > Justin > > On Mar 29, 11:56 am, "Eric Harrison" <blis...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote: > > Well, there is currently nothing built in to Prototype.js that will > > allow you to do this, but I''ve solved a similar problem at work by > > building an additional library just to handle resource management like > > this. > > > > My version is extremely complex because I''ve successfully created a > > mechanism for just-in-time resource loading (my library will import a > > javascript file the first time a function defined in that file will be > > used) and also created several mechanisms to allow for resource > > destruction and dependancy management. Basically my library works like > > this: > > > > top level object: > > > > var CompanyName = { > > libs: {} > > > > }; > > > > CompanyName.require = function(script,callback) { > > if ( ! CompanyName.libs[ script ] ) { > > var lib = document.createElement(''script''); > > var elemId = ''LIB_'' + (new Date()).getTime(); > > lib.setAttribute(''id'',elemId); > > lib.setAttribute(''src'',script); > > lib.setAttribute(''type'',''text/javascript''); > > > > /* Mozilla Load Event Listener */ > > Event.observe(lib,''load'',function() { > > ( callback || Prototype.emptyFunction )(); > > }); > > > > /* IE Load Event Listener */ > > if ( lib.readyState && callback ) { > > lib.onreadystatechange = function() { > > if ( this.readyState == ''complete'' || this.readyState => > ''loaded'' ) { > > ( callback || Prototype.emptyFunction )(); > > } > > }; > > } > > > > document.getElementsByTagName(''head'')[0].appendChild(lib); > > CompanyName.libs[ script ] = $(elemId); > > } else { > > ( callback || Prototype.emptyFunction )(); > > } > > > > return true; > > > > }; > > > > /* > > on window load, spin through the pre-defined scripts and add them > > to our list of "loaded" libraries > > */ > > Event.observe(window,''load'',function() { > > $$(''script'').each(function(elem) { > > var elemId = $(elem).getAttribute(''id''); > > var src = $(elem).getAttribute(''src''); > > if ( ! elemId ) { > > elemId = ''LIB_'' + (new Date()).getTime(); > > $(elem).setAttribute(''id'',elemId); > > } > > if ( src ) { > > CompanyName.libs[ src ] = elemId; > > } > > }); > > > > }); > > > > And there you have it, a simple resource loading mechanism. Our > > version has a lot more complexity and we have the capability in our > > functions to dynamically load CSS files and favicon''s using the same > > function, but I took all of that out just to focus on exactly what > > you''ll need to load scripts dynamically. > > > > The other (perhaps simpler) option that you can try is to load all of > > the scripts outside of the HEAD tag. Put your script definitions near > > the bottom of your BODY element which will allow the browser to mostly > > finish rendering the content before going out to try to fetch any > > JavaScript files. There have been a lot of articles written covering > > this concept. > > > > http://developer.mozilla.org/en/docs/Tips_for_Authoring_Fast-loading_...http://betterexplained.com/articles/speed-up-your-javascript-load-time/http://www.thinkvitamin.com/features/webapps/serving-javascript-fasthttp://roscripts.com/Web_page_optimizer-109.htmlhttp://www.ajaxperformance.com/?p=33 > > > > Hope this helps. Good luck! > > > > -E > > > > On 3/29/07, Justin <jjhart...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote: > > > > > > > > > > > > > I have a major problem with load time of my sites index.php page. > > > Because there''s so much Ajax/JavaScript placed in the <head> tags the > > > page takes about 10 seconds to load the JS and then a further 5/7 > > > seconds to load the content giving me a total load time of about 17.22 > > > seconds and 170kb. > > > > > So the theory here is that I load all the JS into the cache first but > > > I''m suffering with a long page load time which is killing me. It > > > wouldn''t be so bad if a user saw some action but right now they have > > > to wait 10 seconds minimum before they evern begin to see the content > > > load which is frustrating. > > > > > Is there some way in which I can rather load a specific JS code on > > > clicking a link that requires that JS code instead of pre-loading it > > > in the <head> tag? I''m guessing it will have something to do with the > > > onclick event but I really don''t know and any help is really really > > > appreciated. > > > > -- > > Eric Ryan Harrison > > > > >-- Eric Ryan Harrison --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Spinoffs" group. To post to this group, send email to rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---
David Dashifen Kees
2007-Mar-29 12:48 UTC
Re: Hopefully this is an easy question to answer
Another less programming intensive way might be to compress your scripts
with gzip. If you''re using PHP it''s extremely easy. All you
have to do
is change the extension of your javascript file from "js" to
"php."
That will ensure that the file will be shunted through the PHP
interpreter. Then, at the top of the file add this:
<? ob_start("ob_gzhandler");
header("Content-type: text/javascript"); ?>
And to the bottom of the file, add:
<? ob_end_flush(); ?>
That will buffer your output and then, when you flush it, send it
through a gzip compression. The prototype 1.5.1_rc2 goes from 90ish KB
to 25KB for me when I do this. I''m not familiar with techniques to
make
it work in non-PHP languages, but there''s probably a way you can get it
to work. PHP requires the zlib extension be compiled or dynamically
loaded for this to work.
-- Dash --
Justin wrote:> I have a major problem with load time of my sites index.php page.
> Because there''s so much Ajax/JavaScript placed in the <head>
tags the
> page takes about 10 seconds to load the JS and then a further 5/7
> seconds to load the content giving me a total load time of about 17.22
> seconds and 170kb.
>
> So the theory here is that I load all the JS into the cache first but
> I''m suffering with a long page load time which is killing me. It
> wouldn''t be so bad if a user saw some action but right now they
have
> to wait 10 seconds minimum before they evern begin to see the content
> load which is frustrating.
>
> Is there some way in which I can rather load a specific JS code on
> clicking a link that requires that JS code instead of pre-loading it
> in the <head> tag? I''m guessing it will have something to do
with the
> onclick event but I really don''t know and any help is really
really
> appreciated.
>
>
> >
>
>
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---
Eric, I''ve got something very similar to this in my widget framework. JS, CSS, and image resources are lazy loaded as needed during the course of an application''s life cycle, and disposed appropriately. The resources are keyed, so if another widget or process requests the same resource (by id), it''s not loaded again if it has already been loaded by something else. You should contact me off list, as I''d be interested in sharing ideas. On 3/29/07, Eric Harrison <blister-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:> > > Great. I definitely want to hear how everything works out for you, > even if you just shoot me an email off-list. Dynamic resource loading > is definitely my forte and if you''re interested, once you get the > basics working I''d be more than happy to talk to you about some of the > even more complex techniques like just-in-time resource allocation. > > From everything I''ve read on the internet regarding JavaScript > development, I have not seen anyone using a technique as complicated > as what I have in place. Probably just due to the fact that getting it > working in every browser was such an impossible pain in the butt. That > and the fact that JavaScript currently doesn''t let you pass references > to the String and Number data types (which caused me MAJOR headaches > when trying to get a just-in-time loading mechanism working... > *sigh*). > > Anyway, glad I could help. > > -E > > On 3/29/07, Justin <jjhartman-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote: > > > > Thanks Eric, I think this is exactly what I needed. I''m going to check > > those resources out now to have a look further but I''ll let you know > > if I was successful or not. > > > > Regards > > Justin > > > > On Mar 29, 11:56 am, "Eric Harrison" <blis...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote: > > > Well, there is currently nothing built in to Prototype.js that will > > > allow you to do this, but I''ve solved a similar problem at work by > > > building an additional library just to handle resource management like > > > this. > > > > > > My version is extremely complex because I''ve successfully created a > > > mechanism for just-in-time resource loading (my library will import a > > > javascript file the first time a function defined in that file will be > > > used) and also created several mechanisms to allow for resource > > > destruction and dependancy management. Basically my library works like > > > this: > > > > > > top level object: > > > > > > var CompanyName = { > > > libs: {} > > > > > > }; > > > > > > CompanyName.require = function(script,callback) { > > > if ( ! CompanyName.libs[ script ] ) { > > > var lib = document.createElement(''script''); > > > var elemId = ''LIB_'' + (new Date()).getTime(); > > > lib.setAttribute(''id'',elemId); > > > lib.setAttribute(''src'',script); > > > lib.setAttribute(''type'',''text/javascript''); > > > > > > /* Mozilla Load Event Listener */ > > > Event.observe(lib,''load'',function() { > > > ( callback || Prototype.emptyFunction )(); > > > }); > > > > > > /* IE Load Event Listener */ > > > if ( lib.readyState && callback ) { > > > lib.onreadystatechange = function() { > > > if ( this.readyState == ''complete'' || this.readyState => > > ''loaded'' ) { > > > ( callback || Prototype.emptyFunction )(); > > > } > > > }; > > > } > > > > > > document.getElementsByTagName(''head'')[0].appendChild(lib); > > > CompanyName.libs[ script ] = $(elemId); > > > } else { > > > ( callback || Prototype.emptyFunction )(); > > > } > > > > > > return true; > > > > > > }; > > > > > > /* > > > on window load, spin through the pre-defined scripts and add them > > > to our list of "loaded" libraries > > > */ > > > Event.observe(window,''load'',function() { > > > $$(''script'').each(function(elem) { > > > var elemId = $(elem).getAttribute(''id''); > > > var src = $(elem).getAttribute(''src''); > > > if ( ! elemId ) { > > > elemId = ''LIB_'' + (new Date()).getTime(); > > > $(elem).setAttribute(''id'',elemId); > > > } > > > if ( src ) { > > > CompanyName.libs[ src ] = elemId; > > > } > > > }); > > > > > > }); > > > > > > And there you have it, a simple resource loading mechanism. Our > > > version has a lot more complexity and we have the capability in our > > > functions to dynamically load CSS files and favicon''s using the same > > > function, but I took all of that out just to focus on exactly what > > > you''ll need to load scripts dynamically. > > > > > > The other (perhaps simpler) option that you can try is to load all of > > > the scripts outside of the HEAD tag. Put your script definitions near > > > the bottom of your BODY element which will allow the browser to mostly > > > finish rendering the content before going out to try to fetch any > > > JavaScript files. There have been a lot of articles written covering > > > this concept. > > > > > > > http://developer.mozilla.org/en/docs/Tips_for_Authoring_Fast-loading_...http://betterexplained.com/articles/speed-up-your-javascript-load-time/http://www.thinkvitamin.com/features/webapps/serving-javascript-fasthttp://roscripts.com/Web_page_optimizer-109.htmlhttp://www.ajaxperformance.com/?p=33 > > > > > > Hope this helps. Good luck! > > > > > > -E > > > > > > On 3/29/07, Justin <jjhart...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote: > > > > > > > > > > > > > > > > > > > I have a major problem with load time of my sites index.php page. > > > > Because there''s so much Ajax/JavaScript placed in the <head> tags > the > > > > page takes about 10 seconds to load the JS and then a further 5/7 > > > > seconds to load the content giving me a total load time of about > 17.22 > > > > seconds and 170kb. > > > > > > > So the theory here is that I load all the JS into the cache first > but > > > > I''m suffering with a long page load time which is killing me. It > > > > wouldn''t be so bad if a user saw some action but right now they have > > > > to wait 10 seconds minimum before they evern begin to see the > content > > > > load which is frustrating. > > > > > > > Is there some way in which I can rather load a specific JS code on > > > > clicking a link that requires that JS code instead of pre-loading it > > > > in the <head> tag? I''m guessing it will have something to do with > the > > > > onclick event but I really don''t know and any help is really really > > > > appreciated. > > > > > > -- > > > Eric Ryan Harrison > > > > > > > > > > > > -- > Eric Ryan Harrison > > > >-- Ryan Gahl Application Development Consultant Athena Group, Inc. Inquire: 1-920-955-1457 Blog: http://www.someElement.com --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Spinoffs" group. To post to this group, send email to rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---