amp是一套强制实现移动页面秒开的轻量级框架，而非优化开关；其核心是编译期约束，需严格遵循html/css/js规则，否则校验失败、无法进入amp cache。
AMP（Accelerated Mobile Pages）本身不是“配合移动加速的技巧”，而是一套严格限制 HTML、CSS 和 JS 行为的轻量级框架，目的就是强制实现移动页面秒开。但现实中，直接套用 AMP 模板却加载变慢、校验失败、功能缺失——问题几乎全出在「以为 AMP 是优化开关，实则是规则系统」。
AMP HTML 校验失败：常见 validator.js 报错原因
AMP 页面必须通过官方校验器（https://validator.ampproject.org 或本地 amphtml-validator CLI），否则不会被 Google 缓存或标记为 AMP。报错不是“建议”，是硬性拦截。
-
Tag 'script' is disallowed：AMP 禁止任何内联或外部普通<script></script>，仅允许<script async custom-element="amp-bind"></script>这类白名单扩展 -
The attribute 'width' may not appear in tag 'img'：所有<img>必须用<amp-img></amp-img>替代，且必须显式声明width和height（用于预占位） -
The mandatory attribute 'src' is missing：常见于<amp-analytics></amp-analytics>或<amp-iframe></amp-iframe>忘写src，或写了但值为空字符串 -
Styles may not contain !important：AMP 的 CSS 限制极严，禁止!important、@import、filter、transition等 20+ 类属性
amp-img 和 amp-video 替换时的关键参数取舍
原生标签替换不是简单改名，而是要接受 AMP 的资源调度逻辑：所有媒体加载默认延迟（lazy），且尺寸必须可静态推导。
-
<amp-img></amp-img>必须同时提供width和height，否则渲染失败；若图片响应式，用layout="responsive"，此时width/height表示宽高比（如 16:9 →width="16" height="9"） - 避免
layout="fill"除非父容器有明确position: relative，否则常导致溢出或空白 -
<amp-video></amp-video>不支持autoplay（移动端浏览器策略），需加muted才能静音自动播放；controls可用，但自定义控件必须用amp-video-docking扩展 - 视频封面图必须用
poster属性，不能靠 CSSbackground-image模拟
第三方脚本与交互如何在 AMP 中安全落地
AMP 不允许自由执行 JS，但通过声明式扩展 + 数据绑定（amp-bind）+ 事件系统（on 属性）支持有限交互。强行绕过等于放弃 AMP 生效资格。
- 表单提交必须用
<form method="POST" action-xhr="/api/submit"></form>，后端返回 JSON（非 HTML），前端用submit-success/submit-error模板响应 - 轮播图用
<amp-carousel></amp-carousel>，而非 Swiper 或 Glide；分页器、缩略图等 UI 需用其内置属性（controls,thumbnails）开启 - 广告必须走
<amp-ad></amp-ad>，且type值限定在白名单中（如type="googleadmanager"），不可用<script></script>注入 AdSense 代码 - 用户登录态、购物车等状态管理，只能靠
amp-state+amp-bind绑定，无法读写localStorage或调用任意 API
AMP Cache 和 Google Search 结果中的真实表现差异
AMP 页面上线后不一定出现在搜索结果的 AMP 卡片里，也不代表一定走 AMP Cache。Google 已逐步弱化 AMP 标识，但缓存机制仍在影响首屏性能。
- 只有 HTTPS 页面、通过校验、无严重错误（如 JS 错误、资源 404）、且内容主体符合新闻/博客/电商等典型结构，才可能被 AMP Cache 收录
- 即使校验通过，若页面中
<amp-analytics></amp-analytics>配置了无效configURL，或<amp-iframe></amp-iframe>指向非允许域名（如未列在allow-same-origin白名单），仍会被 Cache 拒绝 - Google Search Console 的 “AMP 状态” 报告延迟 1–3 天，不要刚发布就查；真实加载速度应以 Chrome DevTools 的 “Network → Disable cache” + “Lighthouse → Mobile” 实测为准
- 注意：AMP Cache 会重写所有资源 URL（如
https://example.com/img.jpg→https://example-com.cdn.ampproject.org/i/s/example.com/img.jpg），CDN 回源失败会导致图片 404，需确保源站允许 AMP Cache 的 User-Agent（AMPCache-Transform）和 Referer 访问
AMP 的复杂点不在语法，而在它把“性能”变成了编译期约束。你写的不是 HTML，是 AMP 运行时可验证的状态机。漏掉一个 height、多写一个 !important、或者后端返回的 JSON 字段名和 amp-form 的 data-amp-bind- 不匹配——整页就失去 AMP 资格，连缓存都不会进。别把它当优化插件，得当编译目标来对待。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
