JS（JavaScript）位置问题个人见解
对于JS文件的位置问题让我迷惑了许久，百度也查了许多，别人也说得很好，我把我的个人心得写在这里仅供参考；
现在的JS运用的地方很多，不仅只是在前端开发会用到，在IOS开发,安卓开发,都会用到，当然移动端也是必不可少的，那么问题来了，我们在实际开发的过程中对待JS文件的引入到底放在什么位置恰当呢？首先我们得知道使用JS有两种方式：内部编写的JS和外部引入的JS，这里我们着重讨论外部引入的情况。
在这里我们默认你引入的JS顺序的恰当的，即被依赖JS在前，依赖JS在后。
一、通常习惯用法
通常我们会习惯性的将JS文件都放在头部(即head标签里面)，这是大家熟知的方法，具体代码就不必演示了，既然你看到这里肯定是比我这个新手更6的了，哈哈~~
怎么可能不放演示代码？哈哈················
<head>部分js脚本
<head>部分js代码将在页面加载完之前被载入，就是说在页面渲染（页面显示）前这部分代码就已经被加载了；
<html>
<head>
<head>
<!--外部引入的依赖JS
-->
<script src="js/jquery-1.11.3.js" type="text/javascript" charset="utf-8"></script>
<script src="js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
<script src="js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
<!--用户自定义JS
-->
<script type="text/javascript">
//用户JS代码放在这儿
</script>
</head>
<body>
<script type="text/javascript">
//用户JS代码放在这儿
</script>
</head>
<body>
<!--内容
-->
</body>
</html>
</body>
</html>
二、放在body底部
在body底部引入JS文件，这可能是大家在百度查到较多的引用位置的说法了，我也习惯这个方法；
<body>部分js代码将在页面载入的时候被执行：
<html>
<head>
</head>
<body>
<head>
</head>
<body>
<!-------内容------->
<!--外部引入的依赖JS
-->
<script src="js/jquery-1.11.3.js" type="text/javascript" charset="utf-8"></script>
<script src="js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
<!--用户自定义JS-->
<script src="js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">alert("<body>中代码被执行")</script>
<!---这段JS会在body内容加载的同时被执行-->
</body>
</html>
</html>
<!-------在HTML标签之后的JS会在整个页面的内容渲染完毕后再执行，包括在头部和body体里面的JS加载完毕------->
<script type="text/javascript" language="Javascript">
document.write("html代码已经全部载入完成");
</script>
<script type="text/javascript" language="Javascript">
document.write("html代码已经全部载入完成");
</script>
三、利弊讨论
（1）我们先谈放在头部的利弊：
1：在头部引入JS文件可能会造成阻断，加入你引入的某个JS因为不小心写错什么，当浏览器在加载的时候就是报错，这时候就会造成悲剧了：下面的页面内容可能不会被渲染，出现一片白的情况；
2：在头部引入JS文件可能会造成页面渲染速度，造成页面加载缓慢，如果你在头部引入的JS文件很大的话就会造成这个问题；
四、个人建议用法
经过我的摸索，
我给的建议（原则）是：按照实际需求合理放置，注意放置顺序---被依赖文件，后插件或者用户文件
一：先小后大原则
将较小的JS文件可以放在头部，教大的放在body底部这样加速页面的渲染速率；
二：先库后插件原则
将被依赖的JS文件放在头部，并且放在靠前位置，便于后续调用，比如将jQuery在头部引入，为后续js提供依赖
三：只针对当前页面的JS就写在body底部
就是用户写的JS只正对当前一个页面有简单操作的JS可以直接写在body底部，当然复杂的，可抽象成通用方法的当然可以写成外部通用JS文件了
四：将被依赖的库放在头部，将对DOM操作的JS文件放在body底部
在第三条的前提下，即将被依赖的库文件放在头部，将插件放在body底部，将对DOM节点有操作的JS放在body底部，这样的好处是当JS在操作DOM节点时，所需的节点已经在页面渲染完毕，避免了页面还没有加载渲染完毕造成JS对DOM节点无法查找操作的情况；还有一种用法是在body体底部外部和底部html标签之间引入JS文件，这里引入的JS文件只有当整个页面全部被加载渲染完毕后才会被加载生效。
以上内容纯为个人见解，不足之处请指正。
158
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
