---
url: /docs/guide/usage/linter/rules/nextjs/no-sync-scripts.md
---

### 它的作用

阻止在 Next.js 应用中使用同步 `<script>` 标签。
要求任何带有 `src` 属性的 `<script>` 标签同时具有
`async` 或 `defer` 属性。

### 这为什么不好？

同步脚本会阻塞页面渲染并对性能产生负面影响。
在 Next.js 应用中，建议使用 `async` 或 `defer` 属性
以异步方式加载脚本，从而提升页面加载时间和用户体验。

### 示例

以下是此规则的**错误**代码示例：

```javascript
// 没有 async/defer 的同步脚本
<script src="https://example.com/script.js"></script>

// 没有 async/defer 的动态 src
<script src={dynamicSrc}></script>
```

以下是此规则的**正确**代码示例：

```javascript
// 带有 async 属性的脚本
<script src="https://example.com/script.js" async></script>

// 带有 defer 属性的脚本
<script src="https://example.com/script.js" defer></script>

// 带有展开属性的脚本（允许，因为其中可能包含 async/defer）
<script {...props}></script>
```

## How to Use

## 版本

此规则是在 v0.2.0 中添加的。

## 参考资料