About HREF and SRC, what are the differences in application?

Navigation
4

As I've been reading, HREF is meant 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 to with HREF the browser does not pause rendering or DOM loading to apply the style sheet if it is not used at some point.

While SRC it pauses rendering to dump the contents of the called file.

On what I have said 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 style sheet do you design this Newsletter by HREF ?

Since at the first moment of the user's entry in the site, there is no use of this sheet, which will only be used if the user requests it (click on a button / link to open the Newsletter ), so .. There would be no need to pause the rendering to dump the CSS which at first will not be used ..

Did you get confused ?! If I'm confusing something, tell me!

I saw this discussion here: link

And until then I did not know that stylesheets could be called with the HREF attribute, I've always used SRC and I never really knew the difference in application for both.

    
asked by anonymous 11.01.2015 / 02:50

1 answer

5

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

Having said this, like any efficiency question, the only way to truly know is to measure for your case. But I would not worry about optimizing this until it's a performance bottleneck.

If you're having performance issues, use your browser's tools to check where the bottleneck is - the most common problems are related to network (number of requests, size of files, etc). Another useful tool is PageSpeed , which does a your page and provides some feedback on what you can do to improve it.

Note: About href vs src , was already 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:

11.01.2015 / 04:54
How to generate timestamp in milliseconds in PHP? Pass values from a JSON to the html via Jquery