1. JavaScript放在head和body的区别
-
- 在HTML head部分中的JavaScripts会在被调用的时候才执行。
- 在HTML body部分中的JavaScripts会在页面加载的时候被执行。
-
- head 部分中的脚本: 需调用才执行的脚本或事件触发执行的脚本放在HTML的head部分中。当你把脚本放在head部分中时,可以保证脚本在任何调用之前被加载。
- body 部分中的脚本: 当页面被加载时执行的脚本放在HTML的body部分。放在body部分的脚本通常被用来生成页面的内容。
- 个人理解:
-
类似函数、全局变量的可以在head中给出。
-
和页面相关的js,或者需要在页面加载之后再利用js进行操作的js,可以放在body中加载。
2. js文件加载的阻塞
- 在浏览器解析
html
的时候,解析到script
标签,会去请求这个js
文件,此时会阻塞整个页面的加载。
在加载完成之后,会解析该js
文件,此时页面仍被阻塞。
在js
解析执行完成之后,才会继续解析页面。
- 可以使用alert模拟一下阻塞。
可以看到,在alert
的时候,页面并没有显示出test
元素,在alert
结束之后才显示出test
元素。
可见,浏览器在解析script
,执行到alert
的时候,对html
的解析阻塞了。
所以有时候将js
文件放在body
的结尾,可以防止js
的加载执行阻塞到页面的加载,避免页面空白带来不佳的用户体验。
- 解决方式
-
将
js
代码放在最后 -
在
script
标签中添加defer
-
在
script
标签中添加async
解释:
-
defer
: 规定是否对脚本执行进行延迟,直到页面加载为止。 -
async
: 规定异步执行脚本(仅适用于外部脚本)。
async
示例:假设body
内元素很多。
可以发现,在加载到test
元素之前,浏览器一边解析html
,一边执行加载进来的js
。
在js
被完全加载之后,浏览器阻塞html
解析,开始执行js
。
自我介绍一下,小编13年上海交大毕业,曾经在小公司待过,也去过华为、OPPO等大厂,18年进入阿里一直到现在。
深知大多数前端工程师,想要提升技能,往往是自己摸索成长或者是报班学习,但对于培训机构动则几千的学费,着实压力不小。自己不成体系的自学效果低效又漫长,而且极易碰到天花板技术停滞不前!
因此收集整理了一份《2024年Web前端开发全套学习资料》,初衷也很简单,就是希望能够帮助到想自学提升又不知道该从何学起的朋友,同时减轻大家的负担。
既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,基本涵盖了95%以上前端开发知识点,真正体系化!
由于文件比较大,这里只是将部分目录截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且会持续更新!
如果你觉得这些内容对你有帮助,可以扫码获取!!(资料价值较高,非无偿)
![](https://i-blog.csdnimg.cn/blog_migrate/ed6df5525bf78dba9581f1529e54d50d.jpeg)
最后
分享一套阿里大牛整理的前端资料给大家,点击前端校招面试题精编解析大全即可下载
❤️ 谢谢支持,喜欢的话别忘了 关注、点赞哦。
mg src=“https://i-blog.csdnimg.cn/blog_migrate/ed6df5525bf78dba9581f1529e54d50d.jpeg” />
最后
分享一套阿里大牛整理的前端资料给大家,点击前端校招面试题精编解析大全即可下载
❤️ 谢谢支持,喜欢的话别忘了 关注、点赞哦。