img标签的complete属性与decode方法body img srca.jpg idpic script rchuge.js/script script document.getElementById(pic).onload function() { console.log(document.getElementById(pic).width); } document.titledocument.getElementById(pic).width /script /body如果huge.js执行很久// huge.js let start Date.now(); while (Date.now() - start 10000) { }此时HTML 解析到img开始请求图片。遇到script srchuge.js停止解析 HTML。huge.js 执行 10 秒。huge.js 执行完后HTML 继续解析。执行后面的脚本给图片绑定onload。图片加载完成时触发onload。情况2图片已经加载完成了这是你代码里的一个潜在问题。如果img图片很小,或者已经在浏览器缓存中。而juge.js执行时间很长那么可能发生图片早就下载完成。但后面的 JS 还没执行到。你还没有给图片绑定pic.onload函数,等 huge.js 结束后才绑定。此时图片的 load 事件已经过去了。结果就是pic.onload函数不会触发if (img.decode) { await img.decode(); } else { await new Promise(resolve { if (img.complete) { resolve(); } else { img.onload resolve; } }); }decode()的特点图片已经加载 → 立即返回成功图片未加载 → 等待加载完成图片损坏 → Promise reject不会出现某些浏览器下第一次绘制空白的问题。script标签是否有complete属性如果脚本已经加载完成后面才绑定 onload 呢更高级方案3资源管理器推荐大型项目很多人不知道Google Maps SDK、Stripe SDK、PayPal SDK 都是这么干的。class ResourceManager { static scripts new Map(); static load(url) { if (!this.scripts.has(url)) { this.scripts.set( url, new Promise((resolve, reject) { const s document.createElement(script); s.src url; s.onload resolve; s.onerror reject; document.head.appendChild(s); }) ); } return this.scripts.get(url); } }使用await ResourceManager.load(huge.js);以后任何地方,都不会重复下载,这其实是很多 SDK Loader 的实现思路。