能，但只适合极小量静态数据；大量或动态数据应通过fetch异步加载，避免硬编码维护噩梦，并注意XSS防护、CORS处理及加载体验优化。
JSON数据直接内嵌在HTML里行不行？
能，但只适合极小量静态数据（比如配置开关、默认文案）。JSON.parse() 读取 <script type="application/json"> 里的内容确实简单，可一旦数据超过几KB，或需要按需加载、刷新、分页，硬编码就变成维护噩梦——改个字段得重新构建 HTML，缓存失效、CDN 更新延迟全得手动扛。
真正该走异步请求的场景：用户列表、文章摘要、表单选项等动态内容。别图省事往 <script> 里塞几百行 JSON。
fetch() 加载 JSON 后怎么安全渲染到页面？
拿到 response.json() 结果后，别直接用 innerHTML = dataHtmlString 拼接——XSS 风险高，且容易把用户输入的 <script> 或 onerror 属性执行掉。优先用 DOM API 逐个创建元素：
const listEl = document.getElementById('user-list');
data.forEach(user => {
const li = document.createElement('li');
li.textContent = user.name; // 自动转义
listEl.appendChild(li);
});
如果必须插 HTML 片段（比如富文本简介），用 DOMPurify.sanitize() 过滤，而不是靠正则或白名单字符串替换。
立即学习“前端免费学习笔记（深入）”；
常见坑：fetch() 默认不带 credentials，跨域请求带 Cookie 会失败；后端返回非 200-299 状态码时，response.ok 是 false，但 Promise 不 reject，得手动检查。
渲染卡顿或白屏时间太长？几个关键点
用户看到空白页面超过 1 秒就会怀疑出错了。别等 fetch 完再渲染，先放骨架占位符（skeleton）：
- 用 CSS 控制
.loading类显示灰色块，隐藏真实内容区 -
fetch()成功后才移除 loading 类、填入数据 - 加个超时：用
AbortController控制请求最长 8s，超时后显示「加载失败，请重试」按钮 - 避免在循环里反复调用
appendChild()，先用DocumentFragment收集所有节点，最后一次性挂载
本地开发时 fetch 报 CORS 错误怎么办？
浏览器拦的是 file:// 协议下直接双击打开 index.html 的请求——这不是 bug，是安全限制。解决方式只有两个：
① 用轻量服务器启动页面：npx http-server 或 python3 -m http.server 8000，让地址变成 http://localhost:8000；
② 开发时用代理（如 vite.config.js 中配 server.proxy），把 /api/data 转发到真实后端地址；
别去开浏览器 --disable-web-security 参数——这会让整个浏览器裸奔，而且上线前肯定得改回来，纯属自欺欺人。
真实部署时，CORS 头得由后端控制，前端改不了 Access-Control-Allow-Origin。
