JS为什么要写在下面

今天写JS的时候遇到了一个报错

原因：在页面还没有加载完成后这段监听的js代码已经执行，所以在执行这段代码的时候监听的DOM节点还没有加载创建，所以根本就找不到监听的元素。所以返回null。

浏览器的基本渲染流程：构建DOM树 => 构建CSSOM树 => 构建Render树 => 布局Render树 => 绘制Render树

浏览器的单线程导致解析渲染和js的执行不能并存

js可以操纵dom遇到js会优先下载解析js，浏览器不知道你会不会在js里面改变dom，若存在改变而dom又未渲染完，而js里没有写相应dom渲染后再执行的逻辑，这里有可能会引起报错，解释性语言机制浏览器是一行一行解释执行代码，因下载执行js还会阻断对页面的渲染，影响用户打开网页到看见内容的时间，降低用户体验。若对js加了async 或 defer 标签，是不受此限制的。

解决办法：把js放在放在网页末尾处