script 放置最佳位置以及 html 執行順序
阿新 • • 發佈：2018-11-12
看到知乎上有很多討論關於javascript位置的文章。所以特意留意了這方面的問題。
首先要了解到的是：
html檔案是自上而下的執行方式，但引入的css和javascript的順序有所不同，css引入執行載入時，程式仍然往下執行，而執行到<script>指令碼是則中斷執行緒，待該script指令碼執行結束之後程式才繼續往下執行。
所以，大部分網上討論是將script指令碼放在<body>之後，那樣dom的生成就不會因為長時間執行script指令碼而延遲阻塞，加快了頁面的載入速度。
但又不能將所有的script放在body之後，因為有一些頁面的效果的實現，是需要預先動態的載入一些js指令碼。所以這些指令碼應該放在<body>之前。
其次，不能將需要訪問dom元素的js放在body之前，因為此時還沒有開始生成dom，所以在body之前的訪問dom元素的js會出錯，或者無效
直接上程式碼
</head>
<script type="text/javascript">
document.getElementById("text").innerHTML="hello world";
</script>
<body>
<h1 id="text"></h1>
</body>
</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之後”。