表单资源该上CDN，但仅限JS/CSS等静态资源；必须固定版本、加SRI校验、禁用@latest；表单action和文件上传目标不可用CDN，CDN仅加速上传前后环节；需规避缓存陷阱并实测TTFB。
表单资源该不该上 CDN？先看这三点
绝大多数 HTML 表单本身不需要 CDN 加速——form 标签、input、submit 这些原生元素不走网络请求，CDN 对它们完全无效。真正能被 CDN 加速的，只有表单依赖的外部资源：比如 jQuery.validate.js、select2.min.js、自定义的 form-validator.css，或者上传用的 dropzone.min.js。
常见错误现象：Failed to load resource: net::ERR_CONNECTION_TIMED_OUT 出现在加载 https://cdn.example.com/js/form-utils.js 时，结果整个表单验证逻辑挂掉——不是 CDN 不行，而是你把关键 JS 放在了不可靠的第三方 CDN 上，且没降级策略。
- 静态资源（JS/CSS/字体）可上 CDN，但必须确保版本固定、有 SRI 校验
- 表单提交目标（
action地址）不能也不该用 CDN，CDN 不处理 POST 请求 - 如果用了无头表单（如
fetch提交到/api/submit），那 API 域名本身不属于 CDN 管理范围，加速靠的是后端接入 CDN 的边缘节点或反向代理
怎么安全地把表单 JS/CSS 接入 CDN
核心原则：只换资源地址，不改调用逻辑；加校验，不裸奔。
使用场景：你正在用 jquery-validation 做前端校验，本地路径是 ./js/jquery.validate.min.js，想切到 jsDelivr。
立即学习“前端免费学习笔记（深入）”；
- 把
<script src="./js/jquery.validate.min.js"></script>换成<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.5/dist/jquery.validate.min.js" integrity="sha384-..." crossorigin="anonymous"></script> -
integrity值必须从官方 npm 页面或npm pack后计算得出，不能手写或复用旧值，否则浏览器会拒绝加载 - 务必保留
crossorigin="anonymous"，否则某些 CDN 返回的 CORS 头不匹配时，控制台报Blocked script execution且静默失败 - 不要用
https://cdn.jsdelivr.net/npm/jquery-validation@latest/...——@latest会导致缓存穿透和意外升级，某天1.20.0发布后你的表单可能因 API 变更直接白屏
表单上传文件时 CDN 能起什么作用
CDN 本身不接收 multipart/form-data，所以 <input type="file"> 的上传目标 action 绝对不能指向 CDN 域名。但你可以用 CDN 加速「上传前」和「上传后」环节。
常见错误现象：用户选完大图，页面卡住几秒才显示预览缩略图——因为 preview.jpg 是从源站动态生成并返回的，没走 CDN 缓存。
- 上传成功后，服务端返回的图片 URL 应该是 CDN 域名（如
https://cdn.yoursite.com/uploads/abc123.jpg），而非源站地址 - 缩略图生成逻辑应输出到对象存储（如 S3 / OSS），再通过 CDN 回源拉取，避免每次访问都触发实时缩放
- 如果用
Dropzone或Uppy，它们的uploadUrl配置项仍需指向你的 API，但可以配合 CDN 的「POST 缓存绕过」规则，确保上传请求不被缓存
为什么有时候上了 CDN 表单反而变慢
不是 CDN 不好，是你没对齐它的缓存模型。CDN 加速效果取决于资源是否命中边缘节点缓存，而表单相关资源恰恰容易踩中几个缓存陷阱。
性能影响点：
-
Cache-Control: no-cache或max-age=0的 JS 文件，即使放在 CDN 上，每次也会回源，比直连源站还多一跳 DNS + TLS 握手 - 带时间戳或哈希的资源（如
form-v1.2.3-abc123.js）没问题，但写成form.js?v=1698765432就危险——CDN 默认按完整 URL 缓存，时间戳每秒变，等于全量不缓存 - 某些 CDN（如 Cloudflare 免费版）默认不缓存 HTML，如果你把表单 HTML 本身扔进了 CDN，且没开「Always Online」或「Cache Everything」规则，那用户看到的还是源站响应，CDN 形同虚设
最常被忽略的一点：CDN 的 TLS 握手耗时可能比源站高，尤其在首次访问、低质量网络下。别只盯着「资源大小」，要测真实首字节（TTFB）和 DOMContentLoaded 时间。
