Geek Answers Handbook

Only javascript is executed for the current page, best methods?

Therefore, I know that it is best to have one javascript file for the entire site to limit HTTP requests. Thus, for some pages only some javascript is required. What is the best way to work with only javascript needed for the current page?

EG.

if(page=='home'){ //run javascript require for the home page }

Maybe this is not a problem, and if the targeting elements are not found on the page, will javascript just fail? I just would like to learn about the best practice for this javascript structure.

+4
source share
3 answers

Encapsulate your logic in a function. Then simply call the necessary functions on each page, either via "onload" or the built-in function call on the page:

 <script type="text/javascript"> yourFunctionForThisPage(); </script>

Edit: Just for clarification: my answer involves a (implied) limitation of a single .js file. As others noted, although you save HTTP requests, this is not necessarily a good idea: the browser still needs to parse all the code in the file for each page, regardless of whether it is used or not. Honestly, it's pretty unusual to have a global js resource for the whole site. Probably a much better idea is to logically split your js into different files, i.e. libraries. These libraries can be page-oriented - that is, specific code for a specific page or algorithm / task that you can include in any pages that they need.

+5
source

Is it possible?

While it is best to have only one Javascript file per page to reduce the number of requests, this may not be possible. Especially how you would like to do this.

If you ask how to join different scripts of different pages in one script, and then run only those parts that are associated with a specific page, then this is what you should not do. What good is it for you to have one huge file with a lot of scripts (also think about maintainability) compared to a few short integrated scripts? If you keep the number of scenarios low (i.e. below 10), you should not worry.

The big disadvantage is that the browser will download the full script file, which means that it will take more time to analyze them, and also use a lot more resources to use it. I would highly recommend against your technique , although this may seem interesting ...

Other features

The fact is that the number of Javascript files on the page is small. Depending on the technology you are using, there are tools on the server side that can combine several script files into one, so that each page will only request one script file that will combine all the scripts that this particular page will use. There is a bit of overhead on the server to complete this task, but there will be only one script request.

What are you getting?

  • On each page there are only scripts that he needs.
  • individual script files are smaller, so it’s easier to maintain
  • script request size is small
  • Browser parsing and resource consumption remain low.
+3
source

Know what you need on the page and use a script loader like labjs .

Also, remember that your particular case may differ from what others have found, so you can do some tests to check if, for example, 5 small files are better (or worse) than one large file.
The only way to make sure that you yourself are testing various options and come up with a suitable solution.

0
source

More articles:


All Articles