如何为动态加载的Script设置fetchpriority？多前端应用优化咨询

关于fetchpriority不显示在DOM中的问题 #

这是正常现象——fetchpriority是DOM对象属性，而非HTML标准属性，浏览器不会把它渲染到HTML标签里，但这不代表它没生效。你可以通过两种方式验证：

1. 打开浏览器开发者工具的「Network」面板，查看对应脚本请求的「Priority」列，会显示你设置的优先级（比如High/Low）；
2. 在控制台中选中该script元素，执行script.fetchpriority，会返回你设置的优先级值。

如果非要让fetchpriority显示在DOM标签里，可以改用setAttribute方法设置：

script.setAttribute('fetchpriority', priority);

不过这纯粹是视觉上的效果，对功能没有影响，一般没必要这么做。

控制脚本加载顺序的方案 #

如果核心需求是保证关键应用脚本优先加载并执行，仅靠fetchpriority可能不够（它只是提示浏览器优先下载，不保证执行顺序），可以结合以下方案：

1. 串行加载关键脚本

利用Promise链式调用或async/await，让关键脚本加载完成后再加载其他脚本，确保顺序：

// 优先加载核心应用
await appendScriptWithPriority('/critical-app.js', 'high');
// 再加载次要应用
appendScriptWithPriority('/secondary-app-1.js', 'low');
appendScriptWithPriority('/secondary-app-2.js', 'low');

这种方式能严格控制关键脚本的执行顺序，适合依赖关系强的场景。

2. 预加载（Preload）+ 动态加载

提前用<link rel="preload">标记关键脚本，让浏览器优先下载，之后动态创建script标签时复用已下载的资源：

<!-- 在HTML头部添加预加载 -->
<link rel="preload" as="script" href="/critical-app.js" fetchpriority="high">

然后在动态加载时直接使用同一个src，浏览器会自动复用预加载的资源，避免重复请求。

3. 使用ES模块动态导入

如果你的脚本支持ES模块，可以用import()函数结合await控制加载顺序，这是现代前端更简洁的方式：

// 先加载并执行核心模块
await import('/critical-app.js');
// 并行加载其他模块
import('/secondary-app-1.js');
import('/secondary-app-2.js');

如果需要给模块设置下载优先级，同样可以结合preload标签实现。

总结 #

• fetchpriority设置后不显示在DOM中是正常的，可通过Network面板验证生效情况；
• 若需要严格的加载/执行顺序，串行加载（Promise/await）是最可靠的方式；
• 预加载+动态加载的组合能进一步优化关键资源的加载优先级，提升页面性能。

内容的提问来源于stack exchange，提问作者Václav Procházka