[jQuery] Re: dev tip: combining JS script files
When you load the script, has nothing to do with the dom. The script can modify/alter the dom but the loading sequence is a completely new story. If you use the jQuery ready() method, your script will be processed right after the dom is loaded and before the images are loaded, which is what you want if you want to alter the dom, but don't care about images being shown when you do it. The scripts you want to put in after the body is script that are not run before the user interacts. That does not include behaviors, because you want them to work as soon the user e.g. clicks an element (and he/she can do that as soon as the page render). IMHO you're better of gzipping your files (and of course minimize them) and don't put more library (i.e. scripts) than you need. On 7/17/07, Michael Geary [EMAIL PROTECTED] wrote: My understanding is we put script tags in the head so as to not clutter up the body DOM. I don't think it has anything to do with ready(), and I'm pretty sure ready() doesn't require script tags to be in the head... Yes, but if you put the scripts at the end of the body you don't need to use ready(), e.g. that is literally the same as using ready()... So why don't we just always put script tags at the end of the body? What's the disadvantage of that? One disadvantage is that it can lead to sloppy display behavior when the page loads. The browser will never start rendering a page while the HEAD is loading. But once it starts loading the BODY, the browser is free to render a partial page any time it feels like it. In practice, this doesn't usually happen unless something causes the page loading to stall. In particular, if there is a script tag that loads an external script, the browser is very likely to render the page using whatever it has available at that point. You can see this in action on any typical newspaper site such as www.mercurynews.com. Any time you navigate to a new page, stuff jumps around all over the place while the page loads. This is caused by the script tags that are sprinkled willy-nilly throughout the page. A script tag at the very end of the body is less likely to trigger this behavior, but it could still happen if the script modifies DOM elements earlier in the page. The browser reaches the script tag, and while it waits for the external script to load it decides to render what it has so far. Then the script loads and modifies the page, so things jump around when this happens. -Mike
[jQuery] Re: dev tip: combining JS script files
Well i have to think about that, but i might do some releasing of code. The advantage i have, is that it runs on my own servers, so i get to choose the owner ;) On 21 jul, 09:14, Jon Ege Ronnenberg [EMAIL PROTECTED] wrote: When you load the script, has nothing to do with the dom. The script can modify/alter the dom but the loading sequence is a completely new story. If you use the jQuery ready() method, your script will be processed right after the dom is loaded and before the images are loaded, which is what you want if you want to alter the dom, but don't care about images being shown when you do it. The scripts you want to put in after the body is script that are not run before the user interacts. That does not include behaviors, because you want them to work as soon the user e.g. clicks an element (and he/she can do that as soon as the page render). IMHO you're better of gzipping your files (and of course minimize them) and don't put more library (i.e. scripts) than you need. On 7/17/07, Michael Geary [EMAIL PROTECTED] wrote: My understanding is we put script tags in the head so as to not clutter up the body DOM. I don't think it has anything to do with ready(), and I'm pretty sure ready() doesn't require script tags to be in the head... Yes, but if you put the scripts at the end of the body you don't need to use ready(), e.g. that is literally the same as using ready()... So why don't we just always put script tags at the end of the body? What's the disadvantage of that? One disadvantage is that it can lead to sloppy display behavior when the page loads. The browser will never start rendering a page while the HEAD is loading. But once it starts loading the BODY, the browser is free to render a partial page any time it feels like it. In practice, this doesn't usually happen unless something causes the page loading to stall. In particular, if there is a script tag that loads an external script, the browser is very likely to render the page using whatever it has available at that point. You can see this in action on any typical newspaper site such as www.mercurynews.com. Any time you navigate to a new page, stuff jumps around all over the place while the page loads. This is caused by the script tags that are sprinkled willy-nilly throughout the page. A script tag at the very end of the body is less likely to trigger this behavior, but it could still happen if the script modifies DOM elements earlier in the page. The browser reaches the script tag, and while it waits for the external script to load it decides to render what it has so far. Then the script loads and modifies the page, so things jump around when this happens. -Mike
[jQuery] Re: dev tip: combining JS script files
My understanding is we put script tags in the head so as to not clutter up the body DOM. I don't think it has anything to do with ready(), and I'm pretty sure ready() doesn't require script tags to be in the head... Yes, but if you put the scripts at the end of the body you don't need to use ready(), e.g. that is literally the same as using ready()... So why don't we just always put script tags at the end of the body? What's the disadvantage of that? One disadvantage is that it can lead to sloppy display behavior when the page loads. The browser will never start rendering a page while the HEAD is loading. But once it starts loading the BODY, the browser is free to render a partial page any time it feels like it. In practice, this doesn't usually happen unless something causes the page loading to stall. In particular, if there is a script tag that loads an external script, the browser is very likely to render the page using whatever it has available at that point. You can see this in action on any typical newspaper site such as www.mercurynews.com. Any time you navigate to a new page, stuff jumps around all over the place while the page loads. This is caused by the script tags that are sprinkled willy-nilly throughout the page. A script tag at the very end of the body is less likely to trigger this behavior, but it could still happen if the script modifies DOM elements earlier in the page. The browser reaches the script tag, and while it waits for the external script to load it decides to render what it has so far. Then the script loads and modifies the page, so things jump around when this happens. -Mike
[jQuery] Re: dev tip: combining JS script files
I've build something similar to this; here's how i did it: on my webserver, there are a bunch of JS and CSS files. During each page load, i create an array of CSS and JS files, which have to be included on that page. Currently i store these in session, but that isn't needed. In the header of the page, i have 2 calls, one to / framework/load?css/scriptname and one to /framework/load?js// scriptname. That script (load is a PHP file which reads the array, generates a hash out of it, checks to see if the files are modified since the last time they where build and if so, recombines all files and minifies them (in case of JS: Packer, in case of CSS: remove newlines, comments and tabs). After compiling it writes the generated file to disk and serves that to the browser. It was a lot of work, but it allows me to keep all original JS and CSS files on the server (= greater maintainability) and improves load times drastically. HTH -- Gilles On Jul 16, 7:55 am, Klaus Hartl [EMAIL PROTECTED] wrote: Stephan Beal wrote: Hi, all! i just wanted to take a moment to share a tip which i don't see used too often on live sites: Combine all of your JS scripts into a single file. This helps reduce the load time of the page by reducing the number of separate GET requests. In principal you should be able to do the following to combine the files: cat file1.js file2.js file3.js all.js but some scripts do not work with this because they are missing a trailing semicolon (shame on them!). A simple workaround is: for i in file1.js file2.js file3.js; do cat $i echo ';' done all.js If you're using GNU Make to build your project, here's a bit of Make code which does this: mega.js.inputs := jquery.pack.js interface.js \ jquery.blockUI.pack.js jquery.contextmenu.packed.js \ jquery.idTabs.pack.js \ jquery.colorPicker.js \ jquery.bogoTabs.js $(mega.js.inputs): $(mega.js): $(mega.js.inputs) @echo Creating $@ ...; \ for i in $(mega.js.inputs); do cat $$i; echo ';'; done $@ # ^ without the extra semicolon, the included file doesn't work Obviously, edit $(mega.js.inputs) to suit your project. That is very reasonable. Here's some information why:http://yuiblog.com/blog/2006/11/28/performance-research-part-1/ If you're on Rails, you can use the AssetPackager plugin that does the merging automatically for you depending on the environment. --Klaus
[jQuery] Re: dev tip: combining JS script files
Gilles (Webunity) wrote: I've build something similar to this; here's how i did it: on my webserver, there are a bunch of JS and CSS files. During each page load, i create an array of CSS and JS files, which have to be included on that page. Currently i store these in session, but that isn't needed. In the header of the page, i have 2 calls, one to / framework/load?css/scriptname and one to /framework/load?js// scriptname. That script (load is a PHP file which reads the array, generates a hash out of it, checks to see if the files are modified since the last time they where build and if so, recombines all files and minifies them (in case of JS: Packer, in case of CSS: remove newlines, comments and tabs). After compiling it writes the generated file to disk and serves that to the browser. It was a lot of work, but it allows me to keep all original JS and CSS files on the server (= greater maintainability) and improves load times drastically. HTH -- Gilles You're saying that is done on each page load. Isn't it better to do that once, when deploying the files? How long does it take to merge the files? --Klaus
[jQuery] Re: dev tip: combining JS script files
There is a script at google-code for this: http://code.google.com/p/jscsscomp/ Cheers Muckinger Klaus Hartl schrieb am Montag, 16. Juli 2007, 11:23:57: KH Gilles (Webunity) wrote: I've build something similar to this; here's how i did it: on my webserver, there are a bunch of JS and CSS files. During each page load, i create an array of CSS and JS files, which have to be included on that page. Currently i store these in session, but that isn't needed. In the header of the page, i have 2 calls, one to / framework/load?css/scriptname and one to /framework/load?js// scriptname. That script (load is a PHP file which reads the array, generates a hash out of it, checks to see if the files are modified since the last time they where build and if so, recombines all files and minifies them (in case of JS: Packer, in case of CSS: remove newlines, comments and tabs). After compiling it writes the generated file to disk and serves that to the browser. It was a lot of work, but it allows me to keep all original JS and CSS files on the server (= greater maintainability) and improves load times drastically. HTH -- Gilles KH You're saying that is done on each page load. Isn't it better to do that KH once, when deploying the files? How long does it take to merge the files? KH --Klaus
[jQuery] Re: dev tip: combining JS script files
On Jul 16, 11:23 am, Klaus Hartl [EMAIL PROTECTED] wrote: You're saying that is done on each page load. Isn't it better to do that once, when deploying the files? How long does it take to merge the files? In a sense he IS only doing it once - he wrote the PHP code ONCE. ;) Now PHP gets to do it often. (To be fair: he did add caching.) It's an interesting idea, in any case.
[jQuery] Re: dev tip: combining JS script files
This might be of interest. A php implementation for caching and combining js/css files http://www.ejeliot.com/blog/73
[jQuery] Re: dev tip: combining JS script files
This is a good page on optimzing javascript for speed... http://betterexplained.com/articles/speed-up-your-javascript-load-time/
[jQuery] Re: dev tip: combining JS script files
This is a good page on optimzing javascript for speed... http://betterexplained.com/articles/speed-up-your-javascript-load-time/ This part of the text seems contradictory with jQuery's habits. Why do we load jQuery.js and all its plugins in the head section? (answer: to have .ready()). But should we do it all the time and for all plugins? Optimize Javascript Placement Place your javascript at the end of your HTML file if possible. Notice how Google analytics and other stat tracking software wants to be right before the closing /body tag. This allows the majority of page content (like images, tables, text) to be loaded and rendered first. The user sees content loading, so the page looks responsive. At this point, the heavy javascripts can begin loading near the end. I used to have all my javascript crammed into the head section, but this was unnecessary. Only core files that are absolutely needed in the beginning of the page load should be there. The rest, like cool menu effects, transitions, etc. can be loaded later. You want the page to appear responsive (i.e., something is loading) up front. -- Fil
[jQuery] Re: dev tip: combining JS script files
A couple of weeks ago, I attended a talk by Steve Souders http://stevesouders.com/ He is Chief Performance Yahoo! He has a new book coming out about performance on the web. One of his points was to include Javascript at the bottom of the page. But even he admitted that this is not practical in many cases. Basically, if you can wait to load a script at the bottom of the page or dynamically load it, that is better. But often times you just can't -Original Message- From: jquery-en@googlegroups.com [mailto:[EMAIL PROTECTED] On Behalf Of Fil Sent: Monday, July 16, 2007 10:06 AM To: jquery-en@googlegroups.com Subject: [jQuery] Re: dev tip: combining JS script files This is a good page on optimzing javascript for speed... http://betterexplained.com/articles/speed-up-your-javascript-load-time/ This part of the text seems contradictory with jQuery's habits. Why do we load jQuery.js and all its plugins in the head section? (answer: to have .ready()). But should we do it all the time and for all plugins? Optimize Javascript Placement Place your javascript at the end of your HTML file if possible. Notice how Google analytics and other stat tracking software wants to be right before the closing /body tag. This allows the majority of page content (like images, tables, text) to be loaded and rendered first. The user sees content loading, so the page looks responsive. At this point, the heavy javascripts can begin loading near the end. I used to have all my javascript crammed into the head section, but this was unnecessary. Only core files that are absolutely needed in the beginning of the page load should be there. The rest, like cool menu effects, transitions, etc. can be loaded later. You want the page to appear responsive (i.e., something is loading) up front. -- Fil
[jQuery] Re: dev tip: combining JS script files
A way to do this is to call the php file directly in the script tag or css link tag i.e. link rel=stylesheet href=styles.php / script language=javascript src=scripts.php/script The nice thing about this is you can then specify which plugins or extra css to include in the querystring like this link rel=stylesheet href=styles.php? snippet[]=commonsnippet[]=specificsnippet[]=someTheme / script language=javascript src=scripts.php? file[]=jqueryfile[]=jqTooltipfile[]=jqModal/script etc. The php script would then parse all these together and serve it up as one file for css and one for js. As long as any subsequent pages had the same url, it would get this file from the browser cache instead of the server. It could also check if the browser accepts zipped files and serve them up gzipped, which I think would have better performance implications than packing/unpacking, both in terms of size and speed. It would make for a kick-ass download manager, putting full control in the hands of the developer IMHO. Paul. On Jul 16, 10:00 am, Gilles (Webunity) [EMAIL PROTECTED] wrote: I've build something similar to this; here's how i did it: on my webserver, there are a bunch of JS and CSS files. During each page load, i create an array of CSS and JS files, which have to be included on that page. Currently i store these in session, but that isn't needed. In the header of the page, i have 2 calls, one to / framework/load?css/scriptname and one to /framework/load?js// scriptname. That script (load is a PHP file which reads the array, generates a hash out of it, checks to see if the files are modified since the last time they where build and if so, recombines all files and minifies them (in case of JS: Packer, in case of CSS: remove newlines, comments and tabs). After compiling it writes the generated file to disk and serves that to the browser. It was a lot of work, but it allows me to keep all original JS and CSS files on the server (= greater maintainability) and improves load times drastically. HTH -- Gilles On Jul 16, 7:55 am, Klaus Hartl [EMAIL PROTECTED] wrote: Stephan Beal wrote: Hi, all! i just wanted to take a moment to share a tip which i don't see used too often on live sites: Combine all of your JS scripts into a single file. This helps reduce the load time of the page by reducing the number of separate GET requests. In principal you should be able to do the following to combine the files: cat file1.js file2.js file3.js all.js but some scripts do not work with this because they are missing a trailing semicolon (shame on them!). A simple workaround is: for i in file1.js file2.js file3.js; do cat $i echo ';' done all.js If you're using GNU Make to build your project, here's a bit of Make code which does this: mega.js.inputs := jquery.pack.js interface.js \ jquery.blockUI.pack.js jquery.contextmenu.packed.js \ jquery.idTabs.pack.js \ jquery.colorPicker.js \ jquery.bogoTabs.js $(mega.js.inputs): $(mega.js): $(mega.js.inputs) @echo Creating $@ ...; \ for i in $(mega.js.inputs); do cat $$i; echo ';'; done $@ # ^ without the extra semicolon, the included file doesn't work Obviously, edit $(mega.js.inputs) to suit your project. That is very reasonable. Here's some information why:http://yuiblog.com/blog/2006/11/28/performance-research-part-1/ If you're on Rails, you can use the AssetPackager plugin that does the merging automatically for you depending on the environment. --Klaus
[jQuery] Re: dev tip: combining JS script files
This part of the text seems contradictory with jQuery's habits. Why do we load jQuery.js and all its plugins in the head section? (answer: to have .ready()). But should we do it all the time and for all plugins? My understanding is we put script tags in the head so as to not clutter up the body DOM. I don't think it has anything to do with ready(), and I'm pretty sure ready() doesn't require script tags to be in the head... --Erik
[jQuery] Re: dev tip: combining JS script files
Erik Beeson wrote: This part of the text seems contradictory with jQuery's habits. Why do we load jQuery.js and all its plugins in the head section? (answer: to have .ready()). But should we do it all the time and for all plugins? My understanding is we put script tags in the head so as to not clutter up the body DOM. I don't think it has anything to do with ready(), and I'm pretty sure ready() doesn't require script tags to be in the head... Yes, but if you put the scripts at the end of the body you don't need to use ready(), e.g. that is literally the same as using ready()... --Klaus
[jQuery] Re: dev tip: combining JS script files
My understanding is we put script tags in the head so as to not clutter up the body DOM. I don't think it has anything to do with ready(), and I'm pretty sure ready() doesn't require script tags to be in the head... Yes, but if you put the scripts at the end of the body you don't need to use ready(), e.g. that is literally the same as using ready()... So why don't we just always put script tags at the end of the body? What's the disadvantage of that? --Erik
[jQuery] Re: dev tip: combining JS script files
Stephan Beal wrote: Hi, all! i just wanted to take a moment to share a tip which i don't see used too often on live sites: Combine all of your JS scripts into a single file. This helps reduce the load time of the page by reducing the number of separate GET requests. In principal you should be able to do the following to combine the files: cat file1.js file2.js file3.js all.js but some scripts do not work with this because they are missing a trailing semicolon (shame on them!). A simple workaround is: for i in file1.js file2.js file3.js; do cat $i echo ';' done all.js If you're using GNU Make to build your project, here's a bit of Make code which does this: mega.js.inputs := jquery.pack.js interface.js \ jquery.blockUI.pack.js jquery.contextmenu.packed.js \ jquery.idTabs.pack.js \ jquery.colorPicker.js \ jquery.bogoTabs.js $(mega.js.inputs): $(mega.js): $(mega.js.inputs) @echo Creating $@ ...; \ for i in $(mega.js.inputs); do cat $$i; echo ';'; done $@ # ^ without the extra semicolon, the included file doesn't work Obviously, edit $(mega.js.inputs) to suit your project. That is very reasonable. Here's some information why: http://yuiblog.com/blog/2006/11/28/performance-research-part-1/ If you're on Rails, you can use the AssetPackager plugin that does the merging automatically for you depending on the environment. --Klaus
