script 放置最佳位置以及 html 执行顺序

看到知乎上有很多讨论关于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之后”。

转自：http://www.cnblogs.com/iamwangxupeng/p/4950255.html

script 放置最佳位置以及 html 执行顺序

猜你喜欢