js 为何需要放到底部

浏览器在解析我们页面时，是==从上到下依次解析==，无论是HTML还是CSS，还是我们的Javascript
如果我们站在用户及体验者的角度，我们是希望在打开一个页面时，能够在最短的时间内看到网页内容，而这一要求就需要我们前端开发人员在页面中导入JS时的导入位置有了要求
理论上来说我们可以在页面的任意位置导入script标签，但是对于前端页面优化来讲，还是放在底部是最佳的，因为==如果JS执行出现错误了，最起码页面中的元素还能加载出来==，因为DOM文档是从上往下的顺序执行的
正所谓事有轻重缓急，如果我们将script标签放到body的前面，当浏览器在解析代码时，==会中断我们页面内容的加载==，而先解析script标签中的内容，而后再来加载页面，从而==延缓了页面内容显示的时间，让用户等待的时间延长，降低用户的体验度==

例子：

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="js/delay.js" type="text/javascript" charset="utf-8"></script>
        <style>
            div {
                color: red;
            }
        </style>
    </head>
    <body>
        <div>test</div>
    </body>
</html>

whistle 设置delay延时

http://127.0.0.1:8020/hometext/js/delay.js reqDelay://10000

结果：
在请求完delay.js前，test 显示不出来

总结：

1、浏览器是自上而下地加载的；

2、对于前端优化来讲，先请求加载CSS资源和文本有利于用户体验；

3、==js执行失败或者延时，将导致页面渲染阻塞==；

参考：

网站为什么JavaScript调用尽量放到网页底部？

JS一定要放在Body的最底部么？聊聊浏览器的渲染机制