每日整理真实提问 356 个问题 · 726 个回答 需要系统性的技术文档?看 Shopify 技术百科 1000 篇 → 400-873-8117
已解决 提问于 1 个月前

主题 JS 怎么加载才不阻塞

2 个回答 3,866 次浏览 性能与 Core Web Vitals 最后活跃 1 个月前
15

主题的 theme.js 有 200KB,放在 <head> 里同步加载,首屏明显变慢。

陈
陈工提问者
Shopify 认证开发者 · 专注主题与 Liquid
1 个月前提问 · 已收到 2 个回答

2 个回答

已采纳 · 提问者确认解决
59

先把判断放在前面:同步脚本会阻塞 HTML 解析,脚本越大阻塞越久。

1处理顺序

  1. 改用 defer,保持执行顺序且不阻塞解析。
  2. 依赖 DOM 的脚本不要用 async,顺序无法保证。
  3. 首屏不需要的模块拆包,按路由或交互加载。
  4. 移除未使用的库(轮播、动画库常见冗余)。
  5. 用覆盖率工具看实际执行了多少代码。
验收:首屏渲染不被 JS 阻塞,交互功能正常。
风 风格技术团队 回答于 1 个月前
8

defer 是最简单的性能优化,改动一个属性就能见效。但要注意依赖顺序,用错 async 会引入竞态 bug。

泽 阿泽 · 前端工程师 · 1 个月前

你的处理方式是什么?

写下你实际验证过的步骤,比「我也有这个问题」有用得多。当前版本为静态展示,提交后会由团队整理并回复。

描述你遇到的现象、店铺环境(主题 / 套餐 / 应用)、已经试过哪些操作……
我要单独提问 工作日 10 分钟内回复,可直接加微信 fenggejishu