---
title: "性能、CSP 与无障碍"
description: "ScriptMapLibreMap 默认会在视口附近加载，并在 SSR 期间保留其配置的尺寸。SDK、样式表、Web Worker、样式和图块在触发条件运行之前都不会访问网络。"
canonical_url: "https://nuxt-scripts.zhcndoc.com/scripts/maplibre/guides/performance-csp-and-accessibility"
last_updated: "2026-09-23T10:33:13.740Z"
---
`ScriptMapLibreMap` 默认会在视口附近加载，并在 SSR 期间保留其配置的尺寸。SDK、样式表、Web Worker、样式和图块在触发条件运行之前都不会访问网络。
## 加载策略
对于位于首屏以下的地图，使用默认的 `visible` 触发器：
```vue
```
当地图是页面的主要内容时立即加载：
```vue
```
始终提供高度，以确保 SSR 和客户端首次渲染使用相同的布局：
```vue
```
## WebGL 和加载失败
MapLibre 需要 WebGL 以及样式所引用的多个资源。对于不支持 WebGL 的浏览器，以及网络或初始化失败的情况，请使用 `error` 插槽：
```vue
路线地图不可用。请改为查看配送状态列表。
```
将重要地点、路线状态和操作保留在常规 HTML 中，而不要依赖画布。
## 无障碍
为每个交互式地图提供有用的 `aria-label`。使用 `description` 插槽描述屏幕阅读器用户需要了解的地点、路线或链接，并为每个标记提供唯一的 `aria-label`。
```vue
快递员目前在码头区，正前往弗林德斯巷。
```
组件的容器是唯一的地标。MapLibre 会将其画布标记为第二个 `region`，因此组件会移除该角色。
当画布获得焦点时，MapLibre 的键盘处理程序会平移、缩放和旋转地图。只有在该处理程序运行时，画布才会保留在 Tab 键顺序中。如果键盘控制对你的用户没有帮助，请将其禁用。此时，画布将退出 Tab 键顺序和无障碍树：
```vue
```
组件会在创建地图时读取处理程序状态。如果你之后调用 `map.keyboard.disable()`{lang="ts"}，请自行更新画布属性。
对于装饰性地图，请设置 `:interactive="false"`。组件会禁用输入、将地图从无障碍树中移除，并使其后代元素处于惰性状态。
## 样式表加载
Nuxt Scripts 会在 SDK 开始加载时从 `maplibre-gl` package 加载样式表。若要改为通过 Nuxt 控制样式表：
```ts [nuxt.config.ts]
export default defineNuxtConfig({
css: ['maplibre-gl/dist/maplibre-gl.css'],
})
```
```vue
```
## 内容安全策略
MapLibre v6 会从由你自己的构建提供的真实 URL 加载其 worker，因此不再需要 `worker-src blob:`。地图仍需要 `img-src data: blob:`，以及样式所使用的来源。
若要从不同路径提供 worker，请设置 `worker-url`：
```vue
```
将样式、切片、精灵图、字形和 worker 的来源添加到策略中相匹配的指令。完整要求请参阅 MapLibre 的 [CSP 指令](https://maplibre.org/maplibre-gl-js/docs/#csp-directives)。
## Sitemap
See the full [sitemap](/sitemap.md) for all pages.