StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Usually you can use the following pattern:</p> <ol> <li><strong>main.js</strong> - bundle all scripts here that are used by several pages on the website.</li> <li><strong>page.js</strong> - all js specific to the page. This would mean bundling together js of all widgets on a page.</li> </ol> <p>With this practice, you just have <strong>2 requests</strong> for your JS on each page and you get a clear separation/structure in your JS. For all pages except the first one, it will be just one request as <strong>main.js</strong> would be cached.</p> <p>You can use the same principle for the CSS as well. This is effective but as mentioned by another answer, you can actually take this further and bundle everything in 1 js only. Its a preference or style. I like to break it into 2 as it keeps things logical for me.</p> <p>Ensure the following though:</p> <ol> <li>Namespace your JS else you might end up with errors when you bundle them together. </li> <li>Do your pages a favor and push them at the bottom of the page.</li> </ol> <hr> <p><strong>EDIT:</strong> I thought I would update the answer to answer some of your points.</p> <p><strong>Point 2: Is it better to combine only those files which are always used together?</strong></p> <p>Ans: Personally, I don't think so. If you are serving all files which are being used together, it doesn't matter which group they belong to or how they land up on the page.This is because we combine JS files to reduce the amount of HTTP Requests. </p> <p>Once your JS is combined & minified & in PROD, you are not expect to debug or make sense out of it. So to bind together logically related JS files is a moot point. Its in your DEV environment where you would like to have all these logically related code files together.</p> <p><strong>Point 3: What about having one file for all javascripts that should load in the head and one file for all javascripts that should load at the end of body?</strong></p> <p>Ans: There are certain cases where you are somehow forced to inject JS in the <strong>HEAD</strong>. Ideally, you shouldn't do it as <strong>SCRIPT</strong> tags are blocking in nature. So unless you really need to, place all your JS ( 1 or multiple files ) at the end of the <strong>BODY</strong> tag.</p> <p><strong>Point 4: What about having one file for common functions and one for administrative functions which is loaded if the user has specific permissions?</strong></p> <p>Ans: This seems like a reasonable approach to split your JS code. Depending upon the user privileges, you can fork your JS code.</p> <p><strong>Point 6: What is a recommended amount of javascript and css requests for a page?</strong></p> <p>Ans: This is a very subjective question. It depends on what you are building. If you are worried about too much JS being loaded on page load, you can always split it and use on-demand <strong>SCRIPT</strong> injection methods to split the load.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload