HTML 中 script 标签的属性和加载顺序

2023-02-26 21:36

script 标签默认是阻塞加载的,也就是先下载src内容,然后执行src内容,然后再往后读文档

head 中的 script 按顺序加载执行,然后再加载 body 的元素。

image

把 script 移动到文档最后,自然就会先加载body,再加载script,页面看上去更快了

image

如果加了 defer 属性,表示这个 script 下载后不急着执行,等到html解析结束后再执行。浏览器会下载a.js和b.js,同时一起加载 dom,加载完后再按顺序执行a.js 和 b.js

image

如果加了 async,就表示下载这两个脚本,下载好了和dom一起执行。浏览器会下载a.js和b.js,js下载时渲染dom,下载完后转到js执行,但一方面此时dom可能还没读完,所以不要操作 dom。一方面两个script的执行顺序可能不一样了,所以他们不能相互依赖;

image

全程不用写代码,我用AI程序员写了一个飞机大战 DeepSeek 开源周回顾「GitHub 热点速览」 记一次.NET内存居高不下排查解决与启示 物流快递公司核心技术能力-地址解析分单基础技术分享 .NET 10首个预览版发布:重大改进与新特性概览!
点击右上角即可分享
微信分享提示