On HREF and SRC, finally, what are the differences of application?

Asked

Viewed 7,435 times

4

From what I’ve been reading, HREF serves to point to something external(outside the page) that the user requests, or that the page containing it needs to use it (in the case of style sheets).

That is, in the case of style sheets, when pointed with HREF the browser does not pause the DOM rendering or loading to apply the stylesheet if it is not used at any time.

Already the SRC it pauses the rendering to dump the file contents called.

About that I commented above, I ask you:

  • If I have a function that gives a append of an HTML structure of a Newsletter for example, it would be more efficient to call the stylesheet that makes the "design" of this Newsletter for HREF?

Since at the first moment of the user’s entry on the site, there is no use of this sheet, which will only be used later if the user is requested(click on a button/link to open then the Newsletter), so.. There would be no need to pause the rendering to dump the CSS which at first won’t be used..

Got a little confused?! If I’m confusing something, tell me!

I saw this discussion here: https://stackoverflow.com/questions/3395359/difference-between-src-and-href

And until then I was unaware that the style sheets could be called with the attribute HREF, I always used SRC and never knew the difference of application for both.

html

  • From what little I understand of the linked question, it is the parse (reading, parsing) the page that is interrupted when a script uses src, while with a link using href that does not happen. The processing itself can stop yes. Also, the element img also uses the src, but in that case neither the Parsing nor does processing stop (i.e. the page is displayed first without the image, and then with). I do not think there is a general rule for all cases. Or do you refer specifically to style sheets?

  • 1

    "More efficient" in relation to what? To an inline CSS that would come with append?

  • S[ó a comment that HREF also serves for internal links to the very page that defined it, assigning to it an ID of some existing element in the DOM.

  • -Brunoaugusto, in the case of anchors right? @bfavaretto, the idea is to be more efficient in question performance, user experience(page be faster in loading). Because, as the stylesheet of the Newsletter(news.css for example) will only be used if/if the user actually opened the link/button of the Newsletter (which in turn the script would give an append with the HTML structure)At first you wouldn’t need to have the page dump the CSS into the page, so it wouldn’t be in the way of the page’s Parsing. For small applications I see minimal benefits,.. But for large, just testing?

  • Is that a bad practice? less secure, can compromise not the performance but something more important, as some function of the page, by some bottleneck that may occur?

  • 2

    It’s just that I don’t understand the question. You say you’ve always used src... To load CSS? As I already told Elias in his reply, src link is not valid.

  • Understood, then <style> if using the HREF attribute instead of SRC (no scenario exists for this one), already images make use of SRC, as well as <script> makes use of this. This is because it is necessary to dump the content into the HTML, in case the image loads it into the document, and in case the script is similar to dump the code into the tags <script></script>.. Logo, HREF does a relation of something external, outside the document, with something from the document, and with that, when requested, it ends up loading the styles (in the case of .css) and rather pausing the rendering for application of these.

  • Therefore, HREF does not interfere with Parsing, only in rendering if requested (in the case of style sheets). So if I call the style sheet by @import, which, from what I read, would be similar to pouring the content into the tags styles(actually import), will cause the pause in the page Parsing to apply the styles, that’s right what I’m saying?

  • That is, @import will cause a delay in Parsing, for the loading of the stylesheet, which was imported, even if it was not requested by DOM? Excuse me if I’m traveling in any concept!!

  • 1

    @Alexandrec.Caus I think the @import causes a synchronous request. So I would take the <link href...> in the main document, as Elias has already suggested.

  • I found the title ambiguous because it doesn’t say it’s about css style sheets.. It implies that it refers to the general as <a> and <img>..

Show 6 more comments

1 answer

5

It is quite possible that the most efficient way is to import all the necessary CSS already in the html HEAD, before making any dynamic update via Javascript: if the actualization is via Ajax you save a request (or payload, in the case of HTML embedded CSS).

Having said that, like any question of efficiency, the only way to really know is by measuring for your case. But I wouldn’t worry about optimizing it until it’s a performance bottleneck.

If you’re having performance issues, use your browser tools to check where the bottleneck is -- the most common problems are related to the network (number of requests, file size, etc). Another useful tool is the Pagespeed, that makes an analysis of your page and provides some feedback of what you can do to improve it.

Note: About href vs src, has already been mentioned in the comments, but you use href with <link> and src with <script> (and <img>): src is not a valid attribute for <link>.

Read more:

  • Interestingly, there are so many things to worry about (minification,decrease nr. of requisitions,image sprites,image compression,) that this would be the last and optional concern you should have.. I believe, on second thought, that what I have commented on may not be good practice, or rather, a less "safe" practice that may even compromise the user experience..

Browser other questions tagged html

You are not signed in. Login or sign up in order to post.