For my webpage http://www.example.com/homepage.html which is the best way to link static resources, such as CSS files?
Add a comment |
3 Answers
Neither is better.
One will survive moving the linking document to a different location. The other will survive moving the entire tree to a different location.
In most cases, the latter is more useful (as it lets the links work between environments (development, staging, test, production)) but your needs may vary.
5 Comments
Kumar
Don't you think in first two cases it will be again a DNS query?
Quentin
Browsers will always construct an absolute URI from a relative URI. Using one or the other in the source makes absolutely no difference to any need to look up the IP address.
Kumar
Thanks for clarifying on the browser part. That was what I wanted to know. Any article/paper/blog post that explains this further?
manzoid
@Kumar: fyi, DNS lookups are cached, in case that influences your thinking about this. You seem to be under the impression that every request will trigger a DNS lookup (e.g., all the requests for static resources like CSS, as in your example). See serverfault.com/questions/171216/…
Kumar
Yes, I have been under impression that every network request on a single domain goes through same life cycle.
Relative path is best way to use.
Ex : http://www.example.com - Absolute path
Relative path
var style="css/base.css"; var style1="css/base1.css"; Then, Absolute path+style; or absolute path+style1 . We can able to change relative path without hard coding.
Comments
For internally-served resources, typically you would use a relative URL, for the reasons stated by Quentin (upvoted accordingly).
However, absolute URL's are useful in some important scenarios that you should be aware of, for example:
- When you use a CDN (content delivery network) to serve your static files (such as the CSS files you mention in your question) more quickly. These are served from other servers than yours, so you have to fully specify the location.
- When you need to change the protocol. The most common case is switching to https, e.g., for actions like signins and purchases.
- If you are putting links into an email, where of course relative paths won't go anywhere. This isn't relevant for loading a CSS file, since styles are inlined in HTML emails, but still it's a case to consider, e.g., for images.
