More importantly, since as few HTTP requests as possible or to split files for easy development?
Many times when you read about web development on the internet, I hear that you should split your javascript and css files into multiple files.
How to split your css files into:
- clear.css
- base.css
- page_specific.css
Or you have to break them down into files containing location, color and typography information.
But isn't it true that the browser is only allowed to make two simultaneous HTTP requests? Splitting the files into many of them would create the whole load of HTTP requests. Isn't it better to just split them into two files, a specific page and a base / clean css file? and then send them with loading headers cache?
I understand that splitting files is easier for development, but shouldn't speed be more important?
source to share
Premature optimization is the root of all evil. First, make your code easy to write and maintain. If you later find that the number of files is a bottleneck, you can add a step to your build process that will combine them into a single file. This step can also remove comments and spaces.
source to share
I split them sparingly, as required for normal service; Multiple HTTP 1.1 connection requests, pipelining, and caching go a long way in mitigating interception of multiple files. However, I wouldn't want to have hundreds of little buggers. But, 3-7 CSS files, of course. And completely separate JS and CSS from HTML.
source to share
This is a premature optimization.
I think it's best to organize your code in a way that makes the most sense to you, and then find a tool to merge the files when you host the site live. There are several scripts that will do this for you.
Having a lot of files on a page will certainly lead to poor performance.
IE7 - Supports two simultaneous HTTP connections per server, IE8 bumps this up to 6 .
I would suggest that pipelining , as supported in HTTP 1.1, will reduce the connection limiting issue, but by default it is disabled by FF and IE, Opera is allowed.
MS Ajax Control Toolkit actually has an inline script connection to the ToolkitScriptManager control.
A good MSDN article , Tool for ASP.NET and more .
source to share
Why not have the best of both worlds?
What I do with my projects is to store multiple CSS and JS files in a directory src
, and then script to combine them and compress (package) each one into "myproject.pack.js" or "myproject.pack.css". Creating a shortcut to run this script in my IDE makes it completely painless and gives you the benefits of heavily commented and logically separated JS and CSS files, combined with the benefits of separate HTTP requests and minified code.
source to share
G'day,
I was going to recommend taking a look at the rules developed at Yahoo by Steve Souder and maybe installing the associated YSlow plugin, but ...
Googling YSlow led me to an interesting article by Jeff Atwood on his Coding Horror site about tailoring YSlow recommendations based on what Jeff puts it
... Problems with Yahoo are not necessarily your problems.
In this article, you will find useful information on your subject and offer more than just "use the YSlow plugin and follow the guidelines".
Definitely adding value. Thanks to Jeff.
amuses,
Rob
source to share
Here's my two cents: it doesn't matter if you have 100 JS / CSS files, each weighs 1MB. It will only slow down the first time you open your page. After that, they will be cached on the client and everything will be fine. So definitely go for maintainability and logical separation.
source to share