There seems to be a general conclusion floating around the internet that external js files are better.
The main reasons are caching, maintenance, and debugability.
However there does not seem to be much discussion on the overhead of the 304 http requests. I went to yahoo.com, and noticed that 304’s for each javascript file has an overhead of around 30 ms per file (mostly connection & response overhead).
I have separate javascript files (solving the maintenance problem). I don’t have much need for debugability (automated tests are very helpful).
I’m considering whether or not to package and inline them into a single script tag on top of the html document. I’m aware there is a point where this does not make sense (when my javascript is very large) and I should benchmark this.
I’m just wondering if anybody has already done benchmarks on this on what sort of results have they gotten?
i also don’t have benchmarks, it really depends on your connection latency also. but subjectively i never felt this latency much.
still i would recommend to split the dynamic content (html you render on server) and the static content (css, js). first of all the payload of your html gets much less (you save server render time + payload is lower) and further more it is a clean separation and from code perspective better maintainable.
if you want to avoid conditional GET (e.g. through Modified-Since or Etags headers), you can also use Expires header. Conformant browsers then don’t make a http call at all.