首页 > Web开发 > 详细

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

时间:2015-11-09 17:03:03      阅读:265      评论:0      收藏:0      [点我收藏+]

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

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

原文:http://www.cnblogs.com/iamwangxupeng/p/4950255.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!