Is there any difference between including external javascript and CSS files and including all javascript and CSS files (even jQuery core!) inside html file, between <style>...</style> and <script>...</script> tags except caching? (I want to do something with that html file locally, so cache doesn't matter)
-
4There's no benefit aside from making your code a monstrosity.Blender– Blender2012-08-04 23:03:18 +00:00Commented Aug 4, 2012 at 23:03
-
2One at least for me core aspect is readability and code management. External Stylesheets and JavaScripts are easier to maintain and can be split up after functionality. Then again, one can overdo it...Kiruse– Kiruse2012-08-04 23:06:51 +00:00Commented Aug 4, 2012 at 23:06
Add a comment
|
7 Answers
The difference is that your browser doesn't make those extra requests, and as you have pointed out, cannot cache them separately from the page.
From a functional standpoint, no, there is no difference once the resources have been loaded.
5 Comments
Mahdi Ghiasi
So you say that there isn't any difference in performance, etc. Right?
Brad
@MahdiGhiasi, Once loaded, no.
Mahdi Ghiasi
What do you mean by
Once loaded? Will loading be longer if I include scripts in html, or shorter?Brad
@MahdiGhiasi, If all the code is on one page, the browser doesn't have to go out to some other server and get it (in the event of an uncached request). With an empty cache, loading the page will be faster since additional overhead of requests do not need to occur. If that script resource is cached outside of your page, it will be slower since the browser still has to download that whole resource inside of your page. If your page is cached as well, then it makes no noticeable difference.
Brad
@MahdiGhiasi, Don't complicate things... while you may find small performance differences for loading resources in-line, it isn't something worth optimizing for either way. Do optimize for requests to the server where possible, however.
The reason most of the time we see external path for CSS and javascript because they are either kept on a CDN or some sort sort cache server now days on a cloud
Very good example is when you include jquery from google
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
here we see that google is hosting it for us and we don't need to worry about maintainance etc
So if you want to keep them locally then you will have to maintain it
2 Comments
Mahdi Ghiasi
As I said, I want to do something with my html page in local computer. not internet. So I can't use CDN of google...
HatSoft
@MahdiGhiasi in that case you can keep it locally but will have update the manually when their is a new version released etc
There isn't any difference once the code is loaded. Of course it wont be cached like you pointed out but since you just need to do something locally, it really isn't that important.
On thing to remember would be that you'd have to make sure dependency chains aren't broken since the browser would be loading the scripts simultaneously.
Edit: Of course your main page would appear to take a longer time to load since it has to download all that extra content before the <body> starts to load. You can avert that by moving your JS at the bottom (near the footer) instead.
Comments
When your css isnt loaded your page appears crappy at first and then it settles after the css styles are applied, thus now you have to declare your css style on top of the page and then wait for all that to be processed by the browser and then start rendering your page or you let your first page load slowly and on further requests your page will load quicker since the style is now cached
and similarly with your script code, now you need to wait for your code to be rendered on the page and then wait for the the execution that you have bound in $(document).ready().. I hope you realize that $(document).ready will now be delayed since there is no caching.
Comments
There is a huge performance issue with this. your load and DOMContentLoaded will fire way slower.
load will fire when browser parses last line of your code. So browser will show waiting circle until all your resources are loaded and parsed. Browsers load multiple resources synchronously. You will lose this performance boost by including JS and CSS code in HTML.
4 Comments
Mahdi Ghiasi
Is it important while I'm doing that locally?
Mohsen
Do both and compare the resources loading timing chart in dev tools.
Mahdi Ghiasi
I think 200-300 kilobytes of file not such big file!
Mohsen
If you have performance concerns then you shouldn't load your resources like that. But if performance, specially loading performance is not your concern and you like to keep file count small then go for it. 200KB in a 1000Mbps network (your local network) will load fast enough to not care about synchronise/asynchronies loading.
No difference on the client side except you'll do less requests, thus loading faster. On the other hand, you won't be caching but you also won't be able to share the style an the JavaScript among several pages.
If you're positive that CSS and JavaScript are only going to be used in this page, inline is fine IMO.
Comments
If you use the script and css only on one page, including them in the html would be the fastest way as the browser needs to make only one request. If you use them on more pages, you should make them external so the browser can cahche them and only has to download them once. Using the jquery from google for example, as mentionned @hatSoft, is even better as the browser is very likly to have them already in cache from othersites that reference them when your user visits for the first time. In real live you rarly use scripts and css on one page only, so making them external is most often the best for performance, and definitly for maintenance. Personaly i always keep HTML, js and css strictly separate!
