Where is the ideal place to load javascripts in html? [duplicate]

后端未结

关注

 7  1528

再見小時候

相关标签:

7条回答

不要未来只要你来

2021-01-16 07:07

How browsers work: As you can see from here, most of the browsers parsing the html elements top to bottom in elements tree hieararchy.

So, when you put a script just before </body> tag, make sures that most of the elements has been loaded or at least parsed. Or, you just need to wait for document.readyState.

Also, by putting your script below </body> tag is semantically not good. But, you can do it and it won't make a difference for the performance.

0 讨论(0)
发布评论:

提交评论
- 加载中...
耶瑟儿～

2021-01-16 07:14

Important thing to note is the following:

If you put the script in the head tag HTML page rendering is blocked until the script is downloaded. The more scripts you will put there the slower your page will load.

That’s why an advanced approach is to put the scripts at the bottom of the BODY, and in this case the user can start interacting with a page before the Javascript has Loaded.

You will put the scripts in HEAD only if they MUST be available before the page is shown.

0 讨论(0)
发布评论:

提交评论
- 加载中...
感动是毒

2021-01-16 07:15
As noted here, the script tag won't validate outside of the body or head tags. However, you want to place it as far down as possible, so that the rest of the page loads first, to avoid errors. This leaves us with the place furthest down, but inside the body and head tags: just before the closing body tag.
```
<html>
  <head>
  </head>
  <body>
     <p> Foo </p>
     <script></script>
  </body>
</html>
```
0 讨论(0)
发布评论:

提交评论
- 加载中...
南方客

2021-01-16 07:21
If you know how the browsers work it will be easy to know where to put it. First of all it's invalid to include your script after the body or the html element. Only comments and the closing tag for html are allowed after the body. Some browser will do recovery but you shouldn't depend on that.

You may include it any where in the body or the head but you should know that script take the browser attention may be for while and I will stop rendering the dom. That's very bad for user experience so the best place to include it just at the end of the body element.

Like in the example :
```
<html>
  <head>
  </head>
  <body>
     <p> Foo </p>

     


     <script></script>
  </body>
</html>
```
One more thing if you include the script at the top of the page and that script will manipulate the dom that may cause an error if the dom isn't ready yet. The script searching for element which is not exist yet. And it will be very confusing when it runs at time and it doesn't run in another time. You may check the answers for similar questions here and here
0 讨论(0)
发布评论:

提交评论
- 加载中...
甜味超标

2021-01-16 07:31
Best way to load your java-script at the end of body tag, but in some case when you use third party script, it need be load before control initialize.
```
<html>
   <head>
   </head>
   <body>
       ...........
   <script></script>
   </body>
</html>
```
0 讨论(0)
发布评论:

提交评论
- 加载中...
无人共我

2021-01-16 07:31
JavaScript is a render blocking resource. So when browser is parsing HTML document and encounters script in between, the control is passed to js engine. Which runs the script and returns the control to browser again.
```
 <html>
   <head>
      <script src="/main.js" />
    </head>
   <body>
    <script>
              //some inline script
    </script>
   </body>
</html>
```
So when broswer encounters the script tag in header, it passes the control to js engine. Now beacuse the script is being loaded from network, js engine will wait for script to load. After that it will be executed. Then document parsing will resume. (Inline script in head would have worked faster as network delay would be avoided)

Same goes for inline script. Situation gets complex if CSS is also present along with javascript. If a CSS is also being loaded from network in the head, js engines will wait for it too. So there are 2 dependencies now.

So it is best to add js at the bottom and CSS at top generally (to avoid Flash of Unstyled Content).

A good read for the same is present here : Critical Rendering Path
0 讨论(0)
发布评论:

提交评论
- 加载中...

1 2 下一页

热议问题