JavaScript文件为什么放在Html底部
更新:HHH   时间:2023-1-7


JavaScript文件为什么放在Html底部?很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。

这个问题有两个考虑:

  • 如果是外部加载的js, 也就是通过src加载的外部js,  这种方式调用的js之所以要放到底部是因为浏览器渲染网页是从上往下,页面是用户能看到的也能直观感受到的,而js代码是用户看不到的,属于“幕后”的东西, 把“幕后”的东西放到最下面,那么用户能看得见的页面加载速度就会更快,让用户感觉页面打开速度很快,提高用户体验。

  • js一般会用于对页面DOM的操作,如果将js代码放到页面顶部, 基于浏览器从上往下加载的机制,有可能被操作的DOM节点还未加载完毕,JS就去操作DOM了,这明显会导致出错,放到页面底部会保险一些。

主要考虑是第一条, 第二条现在为了百分百保证DOM树渲染完毕执行JS, 基本都用load检测了。

JavaScript写在尾部,这是因为JS主要扮演事件处理的功能。这样的话,页面渲染的时候和JS没有关系,放在后面慢慢加载,不要影响更重要的CSS和HTML的加载。

但是,现在随着JS技术的发展,JS也开始承担起页面渲染的工作了,比如JQuery UI之类。如果这类JS加载需要很长时间,就会影响用户的体验,因为用户看到的是一个渲染不完全的界面。

所以,需要把JS区分看待,承担页面渲染工作的JS和承担事件处理的JS要区分看待。

我的建议是,缓存类似JQuery UI这样的静态文件,剥离渲染页面的JS和事务处理的JS。

渲染页面的JS放在前面,事务处理的JS放在后面,HTML代码可以放在两者中间,或者两者之前,只要保证DOM加载后能迅速进行JS渲染就可以了。

看完上述内容是否对您有帮助呢?如果还想对相关知识有进一步的了解或阅读更多相关文章,请关注天达云行业资讯频道,感谢您对天达云的支持。

返回web开发教程...