js 为何需要放到底部

• 浏览器在解析我们页面时，是==从上到下依次解析==，无论是HTML还是CSS，还是我们的Javascript

• 如果我们站在用户及体验者的角度，我们是希望在打开一个页面时，能够在最短的时间内看到网页内容，而这一要求就需要我们前端开发人员在页面中导入JS时的导入位置有了要求

• 理论上来说我们可以在页面的任意位置导入script标签，但是对于前端页面优化来讲，还是放在底部是最佳的，因为==如果JS执行出现错误了，最起码页面中的元素还能加载出来==，因为DOM文档是从上往下的顺序执行的

• 正所谓事有轻重缓急，如果我们将script标签放到body的前面，当浏览器在解析代码时，==会中断我们页面内容的加载==，而先解析script标签中的内容，而后再来加载页面，从而==延缓了页面内容显示的时间，让用户等待的时间延长，降低用户的体验度==

例子：

    
        
        
        
        
    
    
        
test
    

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的最底部么？聊聊浏览器的渲染机制