ChatGPT解决这个技术问题 Extra ChatGPT

Where should I put <script> tags in HTML markup?

When embedding JavaScript in an HTML document, where is the proper place to put the <script> tags and included JavaScript? I seem to recall that you are not supposed to place these in the <head> section, but placing at the beginning of the <body> section is bad, too, since the JavaScript will have to be parsed before the page is rendered completely (or something like that). This seems to leave the end of the <body> section as a logical place for <script> tags.

So, where is the right place to put the <script> tags?

(This question references this question, in which it was suggested that JavaScript function calls should be moved from <a> tags to <script> tags. I'm specifically using jQuery, but more general answers are also appropriate.)

in case you're also just looking for a simple solution and you're using some server side generator like Jekyll, i recommend including the script with it instead. so much simpler!
If coming from a search engine looking for this: Many of the answers are not clear exactly where the 'script tag' should be at the end. If the 'script' tag is after '</body>', HTML validation will result in "Error: Stray start tag script" (check option "source" and click "check" to see the HTML source). It should be before '</body>'. (The result is similar if the 'script' tag is at the very end, after the </html> tag.)
T.L.D.R. put it inside the <head> tag with defer attribute, or even better make your script type='module'. It is 2022 now.

c
chris Frisina

Here's what happens when a browser loads a website with a <script> tag on it:

Fetch the HTML page (e.g. index.html) Begin parsing the HTML The parser encounters a ). If you still want your code to work in Internet Explorer before version 10, don't forget to wrap your code in a window.onload even, though!


In the accepted answer, this is refered to as the “antiquated recommendation”. If you still mean it, you probably should produce some reference to back it.
P
Peter Mortensen

You can place most of <script> references at the end of <body>.

But if there are active components on your page which are using external scripts, then their dependency (.js files) should come before that (ideally in the head tag).


P
Peter Mortensen

The best place to write your JavaScript code is at the end of the document after or right before the </body> tag to load the document first and then execute the JavaScript code.

<script> ... your code here ... </script>
</body>

And if you write in jQuery, the following can be in the head document and it will execute after the document loads:

<script>
    $(document).ready(function(){
        // Your code here...
    });
</script>

it throws SyntaxError
Your answer wasn't wrong but was in dire need of being updated.
It is not a good idea to put the scripts at the end of your body or html code. It is common practice to put this kind of meta information right where it belongs: in the head.
Re "at the end of the document after ... the </body> tag": No, no, no!. If the 'script' tag is after '</body>', HTML validation will result in "Error: Stray start tag script" (check option "source" and click "check" to see the HTML source). If it is before, it validates.
P
Peter Mortensen

I think it depends on the webpage execution.

If the page that you want to display can not displayed properly without loading JavaScript first then you should include the JavaScript file first.

But if you can display/render a webpage without initially download JavaScript file, then you should put JavaScript code at the bottom of the page. Because it will emulate a speedy page load, and from a user's point of view, it would seems like that the page is loading faster.


P
Patel Charul

Always, we have to put scripts before the closing body tag expect some specific scenario.

For Example :

`<html> <body> <script> document.getElementById("demo").innerHTML = "Hello JavaScript!"; </script> </body> </html>`

P
Pedro Soares

Prefer to put it before the </body> closing tag.

Why? As per the official doc: https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/JavaScript_basics#a_hello_world!_example

Note: The reason the instructions (above) place the element near the bottom of the HTML file is that the browser reads code in the order it appears in the file. If the JavaScript loads first and it is supposed to affect the HTML that hasn't loaded yet, there could be problems. Placing JavaScript near the bottom of an HTML page is one way to accommodate this dependency. To learn more about alternative approaches, see Script loading strategies.