# 性能

> 优化 Shoplazza 主题的性能：减少 JavaScript、避免阻塞解析的脚本与重型框架，并把打包体积控制在预算之内。

性能是商家选择在线商店 theme 时的重要考量因素。在构建或自定义 theme 时，您应始终将性能放在首位。优化 theme 性能是您所支持的商家成功与否以及其客户体验质量的关键。

## 性能优化

在优化 theme 性能时，请参考以下最佳实践。

### 优化 JavaScript

遵循以下原则优化 theme 中的 JavaScript。

#### 减少 JavaScript 用量

建议优先使用 HTML 和 CSS 构建 theme。theme 的基本功能（例如内容查找）不应依赖 JavaScript。您应仅将 JavaScript 作为渐进增强手段，且仅在没有可用的 HTML 或 CSS 方案时才使用。

CSS 的解析和渲染速度远快于 JavaScript，因此在构建交互功能时，应尽可能使用 CSS 特性。您可以在互联网上搜索"using CSS instead of JavaScript"获取更多相关信息。例如 Juan Martín García 撰写的博客文章 [5 things you can do with CSS instead of JavaScript](https://blog.logrocket.com/5-things-you-can-do-with-css-instead-of-javascript/)。

您的 JavaScript 压缩包大小应控制在 16 KB 以内。

#### 减少对外部框架和库的依赖

如果必须使用 JavaScript，请尽量避免引入第三方框架、库和依赖项。应尽可能使用浏览器原生特性和现代 DOM API。在项目中引入 JavaScript 库会导致包体积过大、加载缓慢，进而损害客户体验。React、Angular、Vue 等框架以及 jQuery 等大型工具库都会带来显著的性能开销。请避免为过旧的浏览器（即不支持 `async`/`await` 的浏览器）引入 polyfill 库。

#### 避免阻塞解析器的脚本

阻塞解析器的脚本会阻碍 DOM 的构建和渲染，直到脚本加载、解析并执行完毕。它们还会造成网络拥堵，严重延迟页面渲染，影响 [First Contentful Paint](https://web.dev/fcp/) 和 [Largest Contentful Paint](https://web.dev/lcp/) 等指标。请在 [script tags](/api/script-tag) 上使用 `defer` 或 `async` 属性来避免此问题。

### 预加载关键资源，延迟或避免加载其他资源

预加载资源使浏览器能够在发现资源之前提前下载。选择延迟加载部分资源并合理利用系统资源，有助于减少客户与页面进行有效交互前需要下载的初始资源包大小。

#### 使用资源提示预加载关键资源

您可以在每个 template 的代码中最多添加两个资源提示，方法如下：

* 使用 [preload\_tag](/docs/theme/references/liquid/filters/html#preload_tag) 过滤器

当 Shoplazza 渲染包含预加载指令的页面时，将在后续请求中以 Link 响应头的形式发送预加载资源提示。

请谨慎使用资源提示。例如，仅考虑预加载页面初始功能所需的阻塞渲染样式表，如首屏内容所使用的样式表。

### 优化 Liquid 代码

您可以编辑几乎所有用于渲染商店的 Liquid 代码。编写 Liquid 代码有高效和低效之分。反复执行复杂操作会增加 Liquid 渲染时间，进而影响整体店铺速度。

在优化 Liquid 代码时，请参考以下最佳实践：

#### 减少重复计算

使用 `assign` 或 `capture` 标签存储计算结果，然后在后续引用该变量，而非在模板中多次重复计算同一表达式。

#### 减少嵌套循环

嵌套的 `for` 循环会使迭代次数成倍增加。尝试在迭代前扁平化数据结构或预先过滤集合，以减少渲染时间。

#### 限制集合迭代范围

在遍历大型集合时，使用 `limit` 参数限制处理的项目数量。避免在只需部分数据时遍历整个商品目录。

#### 避免在静态资源中使用 Liquid

在 CSS 或 JavaScript 文件中嵌入 Liquid 标签会迫使服务器在每次请求时重新渲染这些资源，阻止浏览器缓存。应改为在 HTML 模板中通过 `data-` 属性或内联 JSON 将动态数据传递给 JavaScript。