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

時間 2019-11-17

標籤 script 放置最佳位置以及 html 執行順序欄目 HTML 简体版

原文原文鏈接

　　看到知乎上有不少討論關於javascript位置的文章。因此特地留意了這方面的問題。javascript

　　首先要了解到的是：css

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

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

　　　　但又不能將全部的script放在body以後，由於有一些頁面的效果的實現，是須要預先動態的加載一些js腳本。因此這些腳本應該放在<body>以前。dom

　　　　其次，不能將須要訪問dom元素的js放在body以前，由於此時尚未開始生成dom，因此在body以前的訪問dom元素的js會出錯，或者無效spa

　　　　直接上代碼線程

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>

　　　　此時結果空白一片。code

　　　　將script腳本放在body以後htm

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

　　　　有告終果blog

　　　　因此，我認爲script放置位置的原則「頁面效果實現類的js應該放在body以前，動做，交互，事件驅動，須要訪問dom屬性的js均可以放在body以後」。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。