-1

I am working on a site that calls various different pages and forms through ajax. To save page loading times I'm trying to only load the .js files that I need for each page or form, but during development this causes several issues and errors, like events or elements having to be referenced through $(document). Also, Jquery now throws a deprecation warning for loading inline js through ajax.

I know I can call external scripts through jquery's .getScript() function, and will be able to resolve all errors, but I'm wondering if it wouldn't just be a whole lot easier to include all the required script files in the main header (or footer).

What approach is more efficient in terms of work flow vs user experience? Load all the site js initially, or load scripts dynamically as needed? (In this case, total size of extraneous js files is approx 50kb)

Colin R. Turner
  • 1,323
  • 15
  • 24
  • Including all your scripts at the end of the document should appears to improve the loading performance (since it doesn't need to complete the loading before draw the html page) – Alessandro May 19 '17 at 10:42
  • Conversely, loading your scripts in the head means they're available as the page loads and you get less FOUC ... (hence opinion based) – freedomn-m May 19 '17 at 10:51
  • Load only the most necessary ones in the head (some have dependencies, so make sure their order is correct), load the BL (business logic) scripts in the body. – Plankton May 19 '17 at 10:56
  • Header vs. body is NOT the question. The question is do people generally load all scripts the site needs at inital site load, or load dynamically as required? – Colin R. Turner May 19 '17 at 14:08
  • There is absolutely no reason why Stack Overflow can't handle both opinion-based and specific programming questions - especially when those opinions relate to good practices and efficient work-flow. Blocking questions of this kind is just a way of pushing SO users to Quora. :/ – Colin R. Turner May 21 '17 at 11:58

1 Answers1

1

I recommend you load dynamically when you need it, and put each js file in each file you gonna load, and forget load() wich is actually deprecated, use $.ajax() syntax.

SilverSurfer
  • 4,281
  • 6
  • 24
  • 50
  • I am using `$.ajax()` syntax, but Jquery throws a warning when loading scripts through ajax calls: _"Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/"_ – Colin R. Turner May 19 '17 at 14:11
  • I can use `.getScript()` to load new scripts, but am considering, since the files are probably less than 200k in total, if it's really worth all that extra coding and inconvenience of having to reference elements and events from the `$(document)` object. – Colin R. Turner May 19 '17 at 14:19
  • 1
    You could fix it, setting explicitly async option of xhr request to true, check this answer maybe can help you: http://stackoverflow.com/questions/28322636/synchronous-xmlhttprequest-warning-and-script – SilverSurfer May 19 '17 at 15:10