CODEWITHSUNDEEP
javascriptjqueryperformance
stephen776
stephen776

Reputation: 9234

One JavaScript File Per Page or Combine when using Jquery and Document Ready Function

Ok So I know it always depends on the situation but I have, thus far, combined my jquery files/plugins into a single compressed file.

Now I am wondering what I should do with my page specific js/jQuery code. Should I have a single file with one Document.Ready function and my entires sites js code inside of it? Or split it up into seperate js files per page with a document ready call in each?

These files will inclide things such as .Click handlers and other jquery code specific to certain pages.

Whats the best practice here to optimize load times and maintainabilty?

Upvotes: 9

Views: 4422

Answers (4)

Andrew Wilkinson
Andrew Wilkinson

Reputation: 10846

Because you're almost certain to want to have different things executed in the Document.Ready function depending on what page you're on I don't think that having one function that is executed on every page is helpful.

Personally I mix my $.ready calls in with my HTML. These are simple calls to functions stored in a single, minimizing javascript file so don't take up too many bytes, and prevent the need for a separate Javascript file per page. It also allows me to initiate the Javascript where I create the markup, so it's all in one place.

If you're minimizing your javascript and serving it with the correct headers you've got most of the benefits already, don't compromise readability more than you have to.

Upvotes: 2

kobe
kobe

Reputation: 15835

We can do this in multiple ways , i did in the following way.

Aggregate your files broadylyas following

1) Aggregate all the files required for all the pages 2) aggregate the pages specific to the page.

Include all the common aggregated file for all the pages , and include other aggregated files conditionally on the page

1) jquery and other plugins common to all pages so // it will go to all files 2) homepage-aggregation /// for homepage 3) gallerypage-aggregation // for gallery page.

If you include the same file for all the pages ,it may not necessary for all the files.

I did it recently , let me know if you need anything else

Upvotes: 2

mdrg
mdrg

Reputation: 3402

It also depends on the server side technology you are using. You may find tools to assist you on this task. If you are coding a Java server side, you may try JAWR. It allows the creation of separated JS/CSS files, merging and compressing them server-side, turning all the separate files into a single file.

About Document.Ready, I prefer to keep specific code page in separate files, avoiding incorrect code execution and behavior. It is also cleaner and easier to maintain.

Upvotes: 1

Seth
Seth

Reputation: 6260

One way to do it would be to use require.js and then have an array with files and page types. Give each body tag an ID and use it to reference what files should be loaded in.

<body id="pageName">

Keep your global files everything you need for the core functionality to work and then lazy load in the features that aren't required for your site to run faster. I've seen huge speed improvements from this technique.

http://requirejs.org/

Upvotes: 8

Related Questions