script放置最佳位置以及html執行順序


  看到知乎上有很多討論關於javascript位置的文章。所以特意留意了這方面的問題。

  首先要了解到的是:

    html文件是自上而下的執行方式,但引入的css和javascript的順序有所不同,css引入執行加載時,程序仍然往下執行,而執行到<script>腳本是則中斷線程,待該script腳本執行結束之后程序才繼續往下執行。

    所以,大部分網上討論是將script腳本放在<body>之后,那樣dom的生成就不會因為長時間執行script腳本而延遲阻塞,加快了頁面的加載速度。

    但又不能將所有的script放在body之后,因為有一些頁面的效果的實現,是需要預先動態的加載一些js腳本。所以這些腳本應該放在<body>之前。

    其次,不能將需要訪問dom元素的js放在body之前,因為此時還沒有開始生成dom,所以在body之前的訪問dom元素的js會出錯,或者無效

    直接上代碼

1 </head>
2  <script type="text/javascript">
3     document.getElementById("text").innerHTML="hello world";
4  </script>
5 <body>
6     <h1 id="text"></h1>
7 </body>
8 </html>

    此時結果空白一片。

    將script腳本放在body之后

<body>
    <h1 id="text"></h1>
</body>
<script type="text/javascript">
    document.getElementById("text").innerHTML="hello world";
 </script>

    有了結果

    所以,我認為script放置位置的原則“頁面效果實現類的js應該放在body之前,動作,交互,事件驅動,需要訪問dom屬性的js都可以放在body之后”。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 html DOM(CSS放置位置的問題) script在html中的擺放位置 HTML執行順序一探究竟 unity 腳本執行順序設置 Script Execution Order Settings js在html中的加載執行順序 Android assets文件夾之位置放置和作用 1.Spring-Boot 靜態文件和頁默認放置位置 ThinkPHP5 與ThinkPHP3.2公共函數放置位置 不能執行已釋放script的代碼