<Style> and <Script> Tags Are Displayed Physically on Page

style and script tags are displayed physically on page

In your CSS code, you probably set display: inline-block on head, style, and script elements, possibly due to the use of the universal selector *. By default, those elements are not displayed (they have implied display: none), but on many browsers, this can be changed with CSS. It’s normally not useful, but possible.

placing script tags right before /body doesn't work as expected

...so the script runs after the page content is fully loaded.

Correct, all the elements above it are parsed and in the DOM — but, the browser may or may not have had a chance to render them yet. To give it a chance to do so, through a very small delay into your code.

    <script>
    setTimeout(function() {
        alert('hey there');
    }, 50);
    </script>
</body>

Live Example:

<p>hello world!</p><script>setTimeout(function() {    alert('hey there');}, 50);</script>

Is it bad practice to embed JavaScript into the body of HTML?

It's perfectly valid.

You wouldn't want to put great big blocks of code mixed up in the markup there (better to use external scripts), but it can be useful to:

add extra binding information for progressive-enhancement (where that data is difficult to fit into a classname or other approach to hiding extended information in attributes); or
where it's necessary to kick off a scripted enhancement as quickly as possible (rather than waiting for window-load/document-ready). An example of this would be autofocus, which can irritate if fired too late.

You may be thinking of <style> elements, which aren't allowed in <body> (although most browsers allow it nonetheless).

Script tag works inside the body but doesn't work outside

Try to write you code in $(document).ready() so that you DOM is ready to use, otherwise it may not work

Try it like,

$(function(){
   // your js code
});

How to order script tags vs. style tags in HTML markup for best results

Modern browsers wait with any sort of rendering until the entire <head> section is retrieved (including the files linked within it). The order therefore doesn't matter for performance. For Javascript, the order of the files is the order of execution. For stylesheets, the order determines precedence (the rule that was defined last has precedence if all other things are equal).

If you want to optimise client performance, it is strongly advisable to move your Javascript includes to the very end of the <body> element, instead of putting them in the <head> at all. There are more considerations, Yahoo's list of optimisations is well worth your time to read through. Google has some good advice as well.

Unobtrusive JavaScript: script at the top or the bottom of the HTML code?

There are two possibilities for truly unobtrusive scripts:

including an external script file via a script tag in the head section
including an external script file via a script tag at the bottom of the body (before </body></html>)

The second one can be faster as the original Yahoo research showed some browsers try to load script files when they hit the script tag and therefore don't load the rest of the page until they have finished. However, if your script has a 'ready' portion which must execute as soon as the DOM is ready you may need to have it in the head. Another issue is layout - if your script is going to change the page layout you want it loaded as early as possible so your page does not spend a long time redrawing itself in front of your users.

If the external script site is on another domain (like external widgets) it may be worth putting it at the bottom to avoid it delaying loading of the page.

And for any performance issues do your own benchmarks - what may be true at one time when a study is done might change with your own local setup or changes in browsers.

Browser different rendering behavior with different location of script and link tag

You are almost right.
Except that it is simpler - renderer is passive and does not receive "blocking signal".
It does not render (update display to reflect dom tree) until someone ask it to.

Your HTML is invalid - you may not put <link rel=...> in body. (Living HTML 4.2.4)
as you figured, stylesheet is a render-blocking resource - it will prevents contents from being rendered,
in contrast with script which will pause and render parsed content.

Here is how I'll explain it:

Case B: M1 - stylesheet - M2 - script - M3

Browser gets the HTML. M1 enters DOM tree. M1 is not displayed yet, renderer has not been asked to work.
stylesheet loads. (in effect it prevents M1 from rendering)
stylesheet done. M1 is still not displayed. (two more steps)
M2 enters DOM tree. M1 and M2 is not displayed yet.
script triggers a render, thus displaying M1 and M2, and then loads.
script done. Nothing change (as fas as this case is concerned).
M3 enters DOM tree, not yet displayed.
Document is done, page is rendered, thus M3 is displyed.

These behaviours are intentional.
Once upon a time, js was slow and scripts took long time to run,
whereas stylesheets was (and still is) important for hiding elements by default.
Time may have changed, but these behaviours are unlikely to change.

Case C: M1 - script - M2 - link - M3

Browser gets the HTML. M1 enters DOM tree. M1 is not displayed yet.
script triggers a render, thus displaying M1, and then loads.
script done. Nothing change.
M2 enters DOM tree. It is not displayed yet.
stylesheet loads, in effect blocking M2.
stylesheet done. M2 is still not displayed.
M3 enters DOM tree, not yet displayed.
Document is done, page is rendered, M2 and M3 is displyed.

The actual display process, in term of threads, is very complicated, and in some sense greatly varies by browser.
For example, DOM is not thread safe.
Think about what that means.

To keep it simple, you can imagine browser processing as data and event flowing between the various modules.
Here are some Firefox rendering subsystems:

Why my js function works inside of script tag and why not in an external javascript file django forms

Replace:

<script href="{% static 'js/ajax_ubigeo.js' %}"></script>

With:

<script src="{% static 'js/ajax_ubigeo.js' %}" type="text/javascript"></script>

And see what happens. The rationale is:

href requests a resource such as a webpage, a form handler, a block
quote reference page, or a style sheet. In many cases (save for style
sheets) the link will open a new webpage, from which the back button
should return us to the previous page.
src indicates a resource that is embedded in the current document,
such as, img, video, audio, or script. The browser will allocate
screen real estate depending upon the physical dimensions of the
embedded object. href has no such provision.

Also, make sure that the file is present where you are telling static to look.

If that doesn't fix it, please post your base.html template or make sure that there is an extra_styles block present. When the page is rendered, does the script block show when you View Source for the page?

ref: https://discuss.codecademy.com/t/whats-the-difference-between-href-and-src-attributes/353244

<Style> and <Script> Tags Are Displayed Physically on Page