发表新帖
发表新帖

Does the [removed] tag position in HTML affects performance of the webpage?

前端 未结
关注
8 1046
清酒与你
清酒与你 2020-11-29 19:39

If the script tag is above or below the body in a HTML page, does it matter for the performance of a website?

And what if used in between like this:
相关标签:
8条回答
  • 无人共我
    2020-11-29 20:10

    Script elements at the top of the document are available sooner (so you can bind event handlers and have JS run as soon as an element becomes available), but they do block parsing of the rest of the page.

    Script elements at the bottom aren't (so you can't) and there isn't any significant page left, so it doesn't matter if that is blocked.

    Which is best depends on the relative importance priority (which has to be determined on a case-by-case basis) of having the JS running Vs. having the HTML rendering.

    Note that a script element at the bottom must appear inside the body element. So it should be:

    <script>...</script></body></html>

    and not

    </body><script>...</script></html>
    0 讨论(0)
  • 梦如初夏
    2020-11-29 20:16

    Yes, it does affect the performance of the webpage loading.

    The problem is, normal <script> tags are blocking so everything after the script tag has to wait till the script tag is done loading and parsing before the rest of the page can load.

    Now someone will probably note that if you use async="true" in your script tag, it won't block. But that's only supported by a couple of browsers yet so that won't help the general case yet.

    Either way, in general it's a good idea to place your script tags at the bottom of the page so they won't hold up other parts of the page.

    0 讨论(0)
  • 执笔经年
    2020-11-29 20:17

    Performance of the script itself will definitely be the same.

    The placement is important though, as explained in the article you linked, since the browser will "halt" (or "freeze") simultaneous downloads and rendering of the page when it encounters and loads the contents of a <script> tag. So it's probably best to let the browser render the page and apply CSS styles, and then include your .js. It will look smoother to the user.

    Also, including the script at the bottom probably means right before you close the <body> tag.

    0 讨论(0)
  • 暖寄归人
    2020-11-29 20:20

    Firstly script tags not inside body/head elements create invalid HTML and might even cause some exceptions in some browsers.

    Script tags inside the head element will be loaded and interpreted before any HTML is rendered, this blocks HTML/CSS rendering.

    Script tags at the bottom of the body tag, will not block HTML/CSS and since you can only play around with the DOM on DomReady, this is the best position to put your JavaScript. As a side note, you won't even need to use a domReady event wrapper.

    Alternatively, you can also use libraries like LABJS and RequireJS to kickstart your JavaScript from the head tag (minimal HTML/CSS blocking). Any scripts loaded through either of these libraries will run in paralel to HTML/CSS rendering.

    <head>
   <script data-main="INITSCRIPT.js" src="require.js"></script>
</head>

    INITSCRIPT.js

    require( [ "jQuery" , "somePlugin" ] , function(){
   $(document).ready(function(){
      $("#someId").somePlugin();   
   });
} );

    In the above example, only the load and interpretation of require.js will block HTML/CSS rendering, which usually is insignificant. After which jQuery and somePlugin will be loaded in paralel, so HTML/CSS renders just nicely.

    0 讨论(0)
  • 迷失自我
    2020-11-29 20:26

    So I know this is an old discussion, but I've been reading about this topic and reading other answers on StackOverflow...

    It actually doesn't matter where you put the jQuery tag anymore:

    Finally, a word about persistent folklore. You may have encountered the frequently repeated advice to “always place JavaScript at the bottom of the page just before the closing tag”. This was once true because web browsers loaded scripts sequentially and blocked loading and rendering until each script was complete. This is no longer true; modern browsers do “preload scanning” and begin loading all scripts in parallel, whether listed in the head element or at the bottom of the page. External JavaScript often is loaded asynchronously and is written so it won’t execute until the page is loaded and the DOM is ready. Loading a script in the head element is no longer a bad practice.

    http://railsapps.github.io/rails-javascript-include-external.html

    0 讨论(0)
  • 囚心锁ツ
    2020-11-29 20:26

    Along with the Performance aspect, you also need to be careful whenever you include the <script> tag inside the <head> tag.

    Let's consider the following example:

    <head>
 <script>document.getElementById("demo").innerHTML="hello";</script>
</head>
<body>
 <p id="demo">The content of the document......</p>
</body>

    Here, notice that the script is loaded before the DOM (or the <p> tag) is loaded, which causes a failure in the script (Since the getElementById cant find the element with name 'demo').

    In such cases you have to use the script within the body tag only.

    Considering the other answers, its better to have the script always before the </body> tag as you never know whether the scripts that you would load externally have any such dependencies on your DOM.

    Reference: Detailed problem description

    0 讨论(0)
 看不清?
提交回复
热议问题