Home/ Questions/Q 8789639
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-13T22:27:56+00:00

I need to implement javascript and css resources for the framework I’m working on,

  • 0

I need to implement javascript and css resources for the framework I’m working on, but I have a BIG concern.

If you take a look at current websites like Facebook, Google, Youtube and other top-tier sites, their source code show their usage of javascript in various places in the code. The first question coming into my mind is… isn’t supposed for javascript source files to be allocated at the beginning of the document? You can/should be able to place javascript commands enclosed in script blocks, but… source files, too??

The books I’ve been reading suggests (as best practices, I guess) all source files should be allocated in the head section, while displacing all code blocks to the end of the page, right before closing the body section (when possible).

Same applies for CSS. I’ve seen pages where, in the middle of the page, you find a source file inclusion, while the normal declaration is to include all css files in the beginning (as it’s more efficient than in-place inclusion because they load in parallel that way).

In my thoughts, and if I’m to follow the books I’ve been reading, source files (both javascript and css) go always on top, script blocks (when possible) go to the bottom part of the document and CSS inclusions are to be avoided in-place (except for when you want to use the scope attribute or it’s a style declaration inside an html tag, which should also be avoided when possible).

Is that right?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Best practice dictates thus:

    CSS files should go into the <head> of the document, as near to the top as possible. I usually place mine after any <meta> tags.

    JavaScript files should go as close to the end of the <body> as possible, usually directly before the </body> tag.

    This is because JavaScript files load serially and are blocking, so if JavaScript files are included in the <head> of a page, all files must load in their entirety before the main body of the document can load, which often creates the perception of a delay.

    Really, there is little difference between JavaScript files and JavaScript script block. They both use the <script> element, it’s just that externally referenced files have an src attribute. From the point of view of the parser, they are the same.

    From a validity point of view, <script> elements may be placed anywhere in the <head> or <body> of a page, and there are times when <script> files should go in the <head>, such as when using something like typekit, as this will ensure font files are loaded in time for the fonts to be displayed as soon as the page has loaded, preventing a FOUF (flash of unstyled font)

    • 0