Where to put my JS code and where / how to download some jQuery plugins?

Question

I have several questions that are somewhat related to each other, so I post them on one question about SO ...

Question 1:

I am currently doing this Facebook application, where I use jQuery UI Tabs, there are only 4, where 2 of them are loaded via Ajax. The main page is index.html, the tab code is located here, and for two tabs downloaded via Ajax, I have two different files: tab1.html and tab2.html.

Currently, jQuery tab initialization and JavaScript initialization in JavaScript is done on index.html. Both tab1.html and tab2.html have JavaScript code that belongs to these pages. For example, tab2.html has a form and there is JS code (with jQuery) for checking the form, this code is not related to tab1.html, since the JS code on tab1.html is not related to tab2.html.

My question is: should I continue to do this or maybe combine all the JS / jQuery code in index.html, tab1.html and tab2.html in one global.js file, and then include it in index.html?

Although I do this, irrelevant code will be loaded if the user never opens tab1 or tab2. The advantage of using a single global.js file is that I can pack / shrink the file, which I could not do by including each block of code in each corresponding tabX.html file.

Question 2:

Since I use jQuery, I also use a lot of plugins (actually only 3 at the moment, but this number can grow). Some of them provide mini JS, and I use those when they are available, when they are not, I use the regular versions, of course.

There is also a problem with queries. If I have many plugins, say 10, then there will be 10 requests for these plugins. And there is also the fact that some plugins are used in tab1.html, but not on tab2.html and vice versa.

How to load all plugins in mini-packaging / packaged version on one web request? Do I have to do this manually before publishing my application (with packaging and merging them into one file), or can I use the PHP version of Dean Edwards Packer and package / combine all the plugins on the fly? Would this be a good approach?

Question 3:

If the answer to Q1 was something like "merge all the code into one global.js file," should I include the global.js file in the packaging / merging script described above in Q2?

It will simplify everything. I could properly configure my development environment with all .js files, for plugins and global.js in the corresponding folders, without worrying about anything else. Packaging / merging should take care of the rest (pull out files from the appropriate folders, send the appropriate JS headers and output one single packed .js file).

The only thing that confuses me is that not all plugins are used for each tab, and not all the code for each tab. However, a piece of code is global for each tab and index. It also simplifies everything: a) I don’t have to worry to add the necessary code to each tabX.html file, and I can just look at them as HTML templates and nothing more; b) I don’t have to worry about including the necessary plugins where I need them, because I am currently using $ .getScript () from jQuery to load the plugins that I need when and only when I need them, but I'm not sure That is a good approach, and the code seems dirty and ugly like that.

Answer 1

Question 1:

Pack them all in one .js file. This will simplify maintenance, and a small portion of the overhead for a user downloading several js that they potentially might not use does not matter. I would also like Google to download the jQuery library for you, and then all the js code in one separate file.

Question 2:

Since these plugins do not really change, I would manually combine them. The Closure Compiler is good at this. When minifying, use the highest setting that does not give any warnings.

Question 3:

Yes, you want to minimize global.js

When the browser loads global.js, it has been cached for some time. Thus, when you again call the entire global.js on another page without overloading it, it first looks at your local copy. This way, you will first work a bit on bootstrapping, but from now on it should be faster.

Answer 2

In general, the best javascript related methods to speed up website loading are:

• Modify all javascript and put all of it in one file (make as much of your external javascript as possible).
• Put javascript at the bottom of the document.
• Having the web server set an expiration date in the future and using a temporary query string to invalidate old versions of javascript files will prevent unnecessary requests for your javascript if it hasn't changed. (i.e. in httpd.conf ExpiresByType application/x-javascript "access plus 1 year" , in your document: <script type="text/javascript" src="/allmy.js?v=1285877202"></script> )
• Configure your web server for gzip all text files.

Answer 3

The main reason you should leave too much javascript outside the tab pages is because it will kill the user. When the user clicks the tab for the first time, he will capture all the components needed on the fly, which makes him curious listless.

You wonder only semi-specific, since we don’t know much about your site, how the exact file sizes, how the modules are really used.

The general idea would be to find a balance between modules and speed .

When you combine modules together, these are general ideas that you should consider:

• how often does this module change?
• how often is this module used?
• How big is this module (file size)?

Then put the most commonly used stable code base and merge it into one. Then you must enable the rest of the site’s functionality on the tabs.

Also, be sure to download javascript asynchronously, as it will not block the display of the page (and tabs).

Answer 4

Another combined answer:

if you add all the JS together in the packed / mini version, it generates no more than 30 thousand file size, which you better combine. One additional connection for a file (provided that it is not cached) costs 10-20 thousand. Additional JS downloads. This is because browsers open and close connections against streaming an additional 20k over the established connection. The threshold also depends on your user distribution. If you have many dial-up or low-bandwidth users, your threshold will be less.

I usually recommend combining and uploading files into 1 file if the library is not very obscure and requires very multiple code to run it on the page. Example: Hover launches Y functionality, but the feedback widget, which receives less than 1% of the traffic, does not interfere with combining.

Minifying and Packing is a bit overrated these days. With the vast majority of browsers supporting gZip, the amount of data consolidation gZip provides for the file over the cable during browser transfer has almost the same effect as min / pack. However, the browser has a small cost to unzip it. Having said that, it’s still good practice for minimal / batch code, since not all browsers support it, maybe you don’t want the file to be included with gZip, etc.

I used online packers against a third-party module, and it works quite well. However, there are times when this can cause a problem, so make sure you check your manually packaged version before deploying.

Alternative

If you feel that your users will rest on your index page for more than 10 seconds, you can pre-load additional libraries individually using the Js Loader prototype template.

Answer 5

Steve Souder Even Faster Websites is a book you should study.

Firstly, one of them slows down, because whenever an external script is connected, the browser waits for the script to load, parse and then execute. After that, it restores only the rest of the request. Therefore, to avoid such slowdowns, you can see the parallel loading of scripts. Few methods are Ajax scripts if the scripts are in the same domain or use the Dom script element or the script in the iframe if the scripts are on external domains

Q1: for me, modulating all content is the best option for further development if the content of the page has to change constantly. Responsibility is very important to the end user. A small global.js file will help get the application and run it. You can usually download tabX.html.

Q2: Since jquery plugins rarely change. Plugins for tabX.html pages can be loaded in parallel and locally cached, so when tabX.html is loaded, the necessary plugins do not need to be retrieved. SO all plugins required by the main page must be in one file, and those used by tabX.html must be in different files.

Q3: his personal choice is here. You want it to be developer friendly or user friendly. I take on friendliness. Making responsive and effective applications is our job !!!. All the advantages of packing everything into same-sex files - you will have ease in development. Well ugly code spawns beautiful applications :). Users are high-speed. E.g. when Google changed its 10 results per page to 20, they saw a significant decrease in search queries. Therefore, my opinion is not to pack all of them into one and load each parallel

Some of the methods and relevant testing links:

XHR eval / ajax: http://stevesouders.com/cuzillion/?ex=10009

XHR Injection: http://stevesouders.com/cuzillion/?ex=10015

Script in Iframe: http://stevesouders.com/cuzillion/?ex=10012

Script DOM Element: http://stevesouders.com/cuzillion/?ex=10010

Answer 6

Question 1:

Best practice would be to place all js files in one global file. This minimizes your HTTP requests. Let's say you have 5 plugins, I need to make 5 requests in which, if you combine them as one, you will only need to request it once. It may be a little difficult on the first download, but next time around this file it will be cached by the browser, so ... do not worry about the size. HOWEVER , be careful with the sequence of scripts when combining them. (IE: The jQuery script must first be placed in the js file before the jQuery user interface)

http://articles.sitepoint.com/article/web-site-optimization-steps/4

http://code.google.com/speed/page-speed/docs/rtt.html

Question 2: You can do this manually or automatically. Edward Packer is a good choice. If you use ASP.NET, you can check MB Compression Handler , if you use APACHE with PHP, maybe you can change the htaccess configuration for its gzip

Question 3: It would be better if you packed the "global" javascript file. This can save bandwidth and save more time for downloading. You understand that combining all the js files needed for the site will save you time, including separate scripts.