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以后”。