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

你可能感兴趣的:(js 为何需要放到底部)