Friday, April 8, 2011

Cons of external JavaScript file over inline JavaScript

What are some of the disadvantages of using an external JS file over including the JS as a part of the ASPX page?

I need to make an architectural decision and heard from coworkers that external JS does not play nice sometimes.

From stackoverflow
  • Ask them to define "play nice". Aside from better logical organization, external js files don't have to be transmitted when already cached.

    We use YUI compressor to automatically minify and combine external scripts into one when doing production/staging builds.

  • The only downside that I am aware of is the extra HTTP request needed. That downside goes away as soon as the Javascript is used by two pages or the page is reloaded by the same user.

  • One con is that the browser can't cache the JS if it's in the page. If you reference it externally the browser will cache that file and not re-download it every time you hit a page. With it embedded it'll just add to the file-size of every page.

    Also maintainability is something to keep in mind. If it's common JS it'll be a bit more of a pain to make a change when you need to update X number of HTML files' script blocks instead of one JS file.

    Personally I've never run into an issue with external files vs embedded. The only time I have JS in the HTML itself is when I have something to bind on document load specifically for that page.

  • The only disadvantage I know is that another request must be made to the server in order to retrieve the external JS file. As was said before me you can use tools like YUI compressor to minimize the effects of this.

    The advantage however would be that you can keep all of your JS code in a separate more maintainable format.

  • Another huge advantage to external javascript is the ability to check your syntax with Jslint. That, added to the ability to minify, combine and cache external scripts, makes internal javascript seem like a poor choice.

  • Caching is both a pro and potentially a con, if you are not handling it properly.

    The pro is obvious, as it will improve page loading on every page load past the first one.

    The con is that when you release new code, it may still be cached by the user's browser, so they may not get the update. This can easily be solved by changing the name on your js file. We automatically version our js with the file's timestamp, and then make sure that points to the create file in the web request through configuration on our web server (mod_rewrite, Apache).

0 comments:

Post a Comment