js在前端页面的位置引发的小问题，到底是放head里还是body里呢

最近再用bootstrap垒前端，今天解决了一个困扰了许久的问题

起因是因为要加一个时间选择的控件，直接用datetimepicker，这东西都是官方提供的，所以奉行拿来主义，直接去官网下载，按照说明一步一步的贴就行了，结果总是不能正常使用，这个东西只显示，点击输入框有反馈，告诉你不能输入（正确），就是按钮无反应。

既然出了问题就要去解决，解决问题什么的最爽了（鬼信）

起初以为是引入的文件位置不对，但是经过一番检查，发现引入的文件每一个都可以通过点击路径去打开，说明文件引入是正确的

<link href="css/bootstrap.min.css" rel="stylesheet">
	<link href="css/font-awesome.min.css" rel="stylesheet" >
	<link href="css/bootstrapValidator.min.css" rel="stylesheet" >
	<link href="css/city-picker.css" rel="stylesheet" type="text/css" />
	<link href="css/main.css" rel="stylesheet" type="text/css" />
	<link href="css/search.css" rel="stylesheet">
    <link href="css/bootstrap-datetimepicker.css" rel="stylesheet" >
    
	<script type="text/javascript" src="./js/jquery-1.12.4.js" charset="UTF-8"></script>
	<script type="text/javascript" src="./js/bootstrap.min.js"></script>
	<script type="text/javascript" src="./js/bootstrap-datetimepicker.js" charset="UTF-8"></script>
	<script type="text/javascript" src="./js/bootstrap.min.js"></script>
	<script type="text/javascript" src="./js/bootstrapValidator.min.js"></script>
	<script type="text/javascript" src="./js/city-picker.data.js"></script>
	<script type="text/javascript" src="./js/city-picker.js"></script>
	<script type="text/javascript" src="./js/main.js"></script>

那接下来就是检查js了，因为用的都是基础的东西，所以把每一个参数都按照人家的要求去检查，发现没有什么问题，也没有报错，但就是不执行

$('.form_datetime').datetimepicker({
            weekStart: 1,
            todayBtn:  1,
        	autoclose: 1,
        	todayHighlight: 1,
        	startView: 2,
        	forceParse: 0,
            showMeridian: 1
        });  

那么问题来了，为什么不执行js语句呢？浏览器的控制台也没有报错。。。看了好久，然后发现了一个问题

别人用的js都是写在body里面的，然鹅，我写的都在head里。。于是我试着把js块放在了body里面，发现错误解决，所有模块正常使用

至此，问题解决

那么问题来了，为啥呢？

原因：

因为文档还没加载，就读了js，js就不起作用了想在head里用的话，用window.onload = function(){//这里包裹你的代码}

js可以分为外部的和内部的，外部的js一般放到head内。内部的js也叫本页面的JS脚本，内部的js一般放到body内，这样做的目的有很多：

1.不阻塞页面的加载(事实上js会被缓存)。

2.可以直接在js里操作dom，这时候dom是准备好的，即保证js运行时dom是存在的。

3.建议的方式是放在页面底部，监听window.onload 或 readystate 来触发js。

4.延伸：

head内的js会阻塞页面的传输和页面的渲染。head 内的 JavaScript 需要执行结束才开始渲染 body，所以尽量不要将 JS 文件放在 head 内。可以选择在 document 完成时，或者特定区块后引入和执行 JavaScript。head 内的 JavaScript 需要执行结束才开始渲染 body，所以尽量不要将 JS 文件放在 head 内。可以选择在 document 完成时，或者特定区块后引入和执行 JavaScript。所以在head内的js一般要先执行完后，才开始渲染body页面。为了避免head引入的js脚本阻塞流浪器中主解析引擎对dom的解析工作，对dom的渲染，一般原则是，样式在前面，dom文档，脚本在最后面。遵循先解析再渲染再执行script这个顺序。

也就是说一般head里面只放引入js，需要在本页面的内部js触发用的一般放在body里面的最后。

最后看下垃圾效果：

好嘞，去改样子去了