今天在练习中碰到“引用外部的一个js文件但是却失效”的情况，实在不懂，百度后才知是引用的位置不对，错误的代码如下：
<head> <meta charset="UTF-8"> <title>Day16</title> <script type="text/javascript" language="javascript" src="Day16.js" charset="utf-8"></script> </head> <body> <input id="first-number" type="number" value="0" placeholder="第一个数字"> <input id="second-number" type="number" value="0" placeholder="第二个数字"> <button id="add-btn">加</button> <button id="minus-btn">减</button> <button id="times-btn">乘</button> <button id="divide-btn">除</button> <p id="result">运算结果</p>
原本是需要没点击一个按钮，相应的运算后的结果要在下方的result中显示，但是结果毫无反应，浏览器报错，但是把引用的位置调到body中就ok了
<head> <meta charset="UTF-8"> <title>Day16</title> </head> <body> <input id="first-number" type="number" value="0" placeholder="第一个数字"> <input id="second-number" type="number" value="0" placeholder="第二个数字"> <button id="add-btn">加</button> <button id="minus-btn">减</button> <button id="times-btn">乘</button> <button id="divide-btn">除</button> <p id="result">运算结果</p> <script type="text/javascript" language="javascript" src="Day16.js" charset="utf-8"></script> </body>
结果就OK了，由于js文件中多次从Body中获取元素，而我们知道，HTML文档在浏览器中的解析顺序是自上而下，所以，如果把js文件放在header中会报错，无效；
再一方面来说，由于浏览器解析的特性，将js文件放在头部中，当我们的js文件中内容很多时加载需要一定时间，意味着后面的内容还未解析在界面，此时浏览器的界面一片空白，容易造成体验差；
如有不对，欢迎指正，谢谢！
，