因绝大多数天气API默认不支持CORS，浏览器会拦截fetch请求并报错；可行方案仅两个：后端代理或选用明确支持CORS的API。
天气看板为什么不能直接用 fetch 调第三方 API 渲染？
因为绝大多数公开天气 API（如 OpenWeather、WeatherAPI）默认不支持跨域请求（CORS），浏览器会直接拦截 fetch 请求并抛出 TypeError: Failed to fetch。这不是你代码写错了，是浏览器在帮你拦住非法跨域。
- 本地开发时开 HTTP 服务（如
python3 -m http.server）仍会触发 CORS —— 协议、端口、域名任一不同即算跨域 - 少数 API 提供 JSONP 支持，但现代浏览器已逐步弃用，且
fetch不支持 JSONP - 真正能跑通的方案只有两个：后端代理（推荐）或使用明确声明支持 CORS 的 API（如某些带
Access-Control-Allow-Origin: *的测试接口）
如何用纯 HTML + JS 搭一个可配置的城市天气看板？
核心是把城市 ID 或坐标作为参数传入，避免硬编码。OpenWeather 的 weather 接口要求传 lat/lon 或 q（城市名）+ appid，但后者对中文城市名支持不稳定，建议优先用经纬度。
-
appid必须申请，免费版有调用频率限制（1000 次/天），别写死在前端源码里（会被爬走滥用）—— 实际应由你的代理接口透传 - 城市坐标建议存在
data-city属性里：<div id="weather-widget" data-city='{"lat":39.90,"lon":116.40,"name":"北京"}'></div> - 渲染前先检查
navigator.onLine，离线时 fallback 到 localStorage 缓存的上一次数据（缓存有效期建议设为 30 分钟）
display: grid 布局怎么让温度、图标、湿度分区域自适应？
别用浮动或绝对定位，用 CSS Grid 控制语义区块。天气看板通常分三块：主温区（大字号）、状态图标（居中）、次要信息（小字号右对齐）。关键不是“怎么好看”，而是“断点变化时信息不挤叠”。
- 容器设
display: grid; grid-template-areas: "temp icon" "desc desc";，再用grid-area给子元素分配区域 - 图标用
<img>加loading="lazy"，URL 来自 API 返回的icon字段（如"04d"→"https://openweathermap.org/img/wn/04d@2x.png"） - 温度数字用
<span class="temp">23</span><sup class="unit">°C</sup>分离单位，方便单独控制字号和行高
为什么每次刷新都卡顿？几个真实性能坑
不是网络慢，是 DOM 更新没节流 + 图标资源未预加载。尤其移动端，连续快速切换城市时容易触发重排。
立即学习“前端免费学习笔记（深入）”；
- API 响应后，用
requestIdleCallback包裹 DOM 更新逻辑，避免阻塞主线程渲染 - 提前在
<head>里加<link rel="preload" as="image" href="https://.../01d@2x.png">预加载常用图标（晴/多云/雨） - 不要在
success回调里直接改innerHTML—— 用textContent设文字，src设图片，减少解析开销 - 如果用户频繁操作（比如轮播多个城市），给 API 调用加 500ms 去抖，避免重复请求
天气数据本身变化慢，但 UI 响应要快。重点不是“显示最新”，而是“不卡、不闪、不丢状态”。
