[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"content-10-misconceptions-about-amp":3,"$f1rjmebj740h24":20},{"id":4,"type":5,"slug":6,"title":7,"date":8,"category":9,"tags":10,"body_markdown":12,"permalink":13,"excerpt_src":13,"media_type":13,"media_title":13,"media_author":13,"media_url":13,"rating":13,"layout":13,"pv":14,"admin_only":14,"created_at":15,"updated_at":15,"deleted_at":13,"status":16,"html":17,"excerpt":18,"cover":19},167,"article","10-misconceptions-about-amp","【译】澄清对AMP的十个误解","2017-08-23 10:30","web",[11],"AMP","\n## 1. AMP是一个新的渲染引擎\u002F编程语言\n\nAMP 是一套开源的 web 组件格式和类库。与其它类库或者框架相比，AMP 最大的区别在于，它采用了白名单策略，来约定你可以做什么。\n\n为什么要限制一些东西的使用呢？这是因为一些看起来很无辜的小代码很容易拖慢网站的性能。而且一段时间后回来排查这些性能问题会是一件非常困难的事情。这就像你在德国的 Autobahn 快速路上开车，却只在右道行走，不知道最左边的道路才是更快的。AMP 就是这样一种技术，强迫你走到最左边的快速道路，并且保证你前方的道路是没有障碍的。\n\nAMP 带来的并不只有限制，它还提供了很多的自定义标签，这些标签都有各自内置的功能。当你使用这些自定义标签，并遵守一些其它的规则，那么 AMP 将通过一些手段保证你的网站速度是非常快的。这些手段主要包括强制静态布局、高效率资源加载和一些其它的优化。\n\nAMP 有一份文档，规定了什么样的标签是兼容的，什么样的标签是不兼容的。它还发布了一个内置的验证工具，可以让你看到当前页面的是否符合 AMP 文档的要求。需要强调的是，从技术上来说，即使不遵守所有的规定，AMP 页面也能运行得很好，只是你的页面无法通过 AMP 验证（从性能上来说，不遵守 AMP 规定到一定程度的时候，AMP做的性能改进也会全部失效，另外如果有一些东西是要求与 AMP 页面协作的，那么你的页面可能无法正常显示 ）。但同时，这也意味着 AMP 所强调的一些特性全部没有了。\n\n\u003C!-- more -->\n\n### 还有更多解释吗？\n\n真的没有了。AMP 只是一套 web 组件生态系统而已。但是，因为可以很容易通过编程的方式来确定一个页面是合法的 AMP，就可以做更多炫酷的事情了。比如：\n\n- 合法的 AMP 可以使用免费、高速的缓存（例如[Google AMP Cache](https:\u002F\u002Fdevelopers.google.com\u002Famp\u002Fcache\u002F)）\n- 基本可以确认合法的 AMP 页面速度很快，且对用户友好\n- AMP 页面是“自包含”（self-contained）的（译注：指页面是完整、独立的），所以可以被嵌入第三方平台\n\n这也允许第三方平台做一些很炫酷的事情：\n\n- 出现在 Google 搜索的 Top Stories 轮播上\n- 从 Pinterest 上链接到 AMP 页面\n- 在 PWA 中使用 AMP 页面\n\n## 2. AMP是Google的项目\n\nAMP 最早是由出版行业和 Google 在2015年提出来的（当然，一些促使 AMP 诞生的体验问题，比如移动端 web 页面加载慢等，属于明显的行业内共性问题）。从一开始，它就是由出版行业、广告行业、技术提供者和平台提供方一起携手开发的，除了 Google 以外，参与者还包括 Twitter、Linkedin 和 Pinterest 。AMP 从提出来的第一天起就是一个通过 Github 进行开放协作的开源项目。到现在为止，AMP 接受了来自超过 200 名贡献者的 Pull Request，这些贡献者绝大部分不是 Google 的员工。\n\nGoogle 确实有一支团队在全职为 AMP 项目工作，AMP 项目的大部分贡献也来自这个团队，但这个团队也是通过和其它人一样的[Intent to implement](https:\u002F\u002Fgithub.com\u002Fampproject\u002Famphtml\u002Fblob\u002Fmaster\u002FCONTRIBUTING.md#contributing-features)流程来工作。Google 团队也会将它们的[周会纪要](https:\u002F\u002Fgithub.com\u002Fampproject\u002Famphtml\u002Fissues?utf8=%E2%9C%93&q=label%3A%22Meeting%20Notes%22%20)以及其它的文档发布出来，尽量保证外部贡献者都可以参与进来。\n\n> 10月17日更新：针对这一点，外界有一些疑问和评论。上面这两段话仍然有效，但是我补充一个更精简的结论：AMP 项目当前的核心贡献者都是 Google 员工，所以 AMP 可以称作是 Google 领导（Google-led）的项目。但是它是被当作一个独立的开源项目来看待的，我们正在邀请开发者和社区参与进来一起贡献，让他们也变成核心贡献者，使 AMP 项目更加独立。\n\n## 3. AMP需要Chrome才能运行\n\n绝对不是这样！AMP 是一个跨平台、跨浏览器的类库，支持所有流行的移动浏览器和桌面浏览器的[最新两个版本](https:\u002F\u002Fwww.ampproject.org\u002Flearn\u002Fbrowsers\u002F):\n\n![AMP可以运行的浏览器](\u002Fassets\u002Fweb\u002F2017\u002F10-misconceptions-about-amp\u002F1.png)\n\n## 4. AMP 限制了我的布局和设计\n\n你肯定会被 AMP 能做的事情惊讶到。AMP 确实限制了一些标签和对性能影响很大的 CSS 属性的使用，但是整体来看，在为站点编写样式时，受到的[限制非常小](https:\u002F\u002Fwww.ampproject.org\u002Fdocs\u002Fguides\u002Fresponsive\u002Fstyle_pages)。想写一个疯狂的 5 层 flexbox 嵌套布局？那就写吧。想基于伪元素写一个疯狂的 UI ？也 OK。\n\n下面是一个我写的[AMP发展计划页面](https:\u002F\u002Fpaulbakaus.com\u002Ftutorials\u002Fcss\u002Fflexbox-freebie-auto-growing-list-for-amp-roadmap\u002F)：\n\n\u003Ciframe height='265' scrolling='no' title='Flexy Steppy List' src='\u002F\u002Fcodepen.io\u002Fpbakaus\u002Fembed\u002FezOQYa\u002F?height=265&theme-id=0&default-tab=result&embed-version=2' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen \u003Ca href='https:\u002F\u002Fcodepen.io\u002Fpbakaus\u002Fpen\u002FezOQYa\u002F'>Flexy Steppy List\u003C\u002Fa> by Paul Bakaus (\u003Ca href='https:\u002F\u002Fcodepen.io\u002Fpbakaus'>@pbakaus\u003C\u002Fa>) on \u003Ca href='https:\u002F\u002Fcodepen.io'>CodePen\u003C\u002Fa>.\n\u003C\u002Fiframe>\n\n## 5. AMP只适合轻量级页面\n\n有几分道理，但也有误导性。这主要取决于你如何理解“轻量”。严格来说，AMP 的目标是静态内容。但我们所说的静态内容同样可以包含具有艺术气息的动画、侧边栏、灯箱广告、手风琴导航、轮播等等。你可以查看[AMPByExample](https:\u002F\u002Fampbyexample.com\u002F)中的一些[高级例子](https:\u002F\u002Fampbyexample.com\u002F#advanced)。\n\n## 6. AMP只适用于移动端\n\n诚然，AMP（Accelerated Mobile Pages）中的“Mobile”无助于澄清这个问题，但是这个说法还是跟事实完全不符。\n\nAMP 是一个非常强大的跨平台解决方案，它希望出版行业和开发者将工程资源从细碎的多平台兼容支持中解放出来，将焦点放到创建伟大的新产品特性上，而这些产品特性可以被任何设备上的所有用户轻易访问到。\n\nAMP本身是在[响应式设计](https:\u002F\u002Fwww.ampproject.org\u002Fdocs\u002Fguides\u002Fresponsive_amp)的概念支持下被创造出来的。目前有与 AMP 集成的平台大部分是聚焦移动端的，但是在桌面端，你也可以从 AMP 中获取得很多好处。\n\n想知道如何使用 AMP 来处理不同分辨率和不同设备的话，可以看我的另一篇文章[“AMP中的'mobile'”](https:\u002F\u002Fpaulbakaus.com\u002F2016\u002F07\u002F01\u002Fabout-that-mobile-in-accelerated-mobile-pages\u002F)。\n\n## 7. 我现有的网站上无法使用AMP\n\n我们已经澄清过第 4 点，并没有什么特别的理由让你现在的网站无法使用 AMP，因为当你读完第一个问题后，就知道了 AMP 只是一个 web 组件类库而已。事实上，[AMP项目主页](https:\u002F\u002Fwww.ampproject.org\u002F)就是完全使用的 AMP：\n\n![AMP项目主页使用的AMP](\u002Fassets\u002Fweb\u002F2017\u002F10-misconceptions-about-amp\u002F2.png)\n\n当然，和其它类库一样，[AMP并不适合每一个人](https:\u002F\u002Fpaulbakaus.com\u002F2016\u002F02\u002F26\u002Flife-after-amp\u002F)。在动手前想一想在[AMP的强制限制](https:\u002F\u002Fwww.ampproject.org\u002Flearn\u002Fhow-amp-works\u002F)（同时也带来好处）下，你的网站是否能正常运行。如果答案是肯定的，那么就切换到 AMP 吧。有一个基本的原则，如果你的网站没有静态内容，并且页面并不是最深层次的页面（译注：原文 leaf pages，leaf 指树状结构中的叶子节点，对应到网站一般指最深层次的页面，例如文章页），例如入口页，也就是用户从搜索中点进来的页面，那么 AMP 可能不适合你。\n\n## 8. 如果我自己做优化，那AMP就没什么用\n\nAMP 的优化是“无脑优化”，即使你身边没有web开发大师，它也能帮助你。我们对将网站性能优化到极致这件事情感到自信和骄傲。事实上，因为 AMP 是一个通用库，它可能会漏掉一些针对你的网站特殊场景下的优化策略，这意味着你自己的手工优化工作很可能会带来更好的性能。\n\n但到今天为止，浏览器和一些大的平台例如 Google 搜索，仍然没有办法来确认你的网站是非常快速且对用户友好的。所以如果你选择自己做优化工作，你可能能得到一个非常快的网站，但是没有办法让其它人确信。而 AMP 的验证使得它对于第三方平台非常有吸引力。\n\n## 9. AMP只对出版发行行业有好处\n\n没错，如果你将你的新闻站点变成 AMP，就有机会出现在 Google 的 Top Stories 轮播上，并且 Google 会在移动端[搜索结果](https:\u002F\u002Fsearch.googleblog.com\u002F2016\u002F09\u002Fsearch-results-are-officially-ampd.html)中使用一个内联的查看器来加速 AMP 页面。但是[eBay也创建了AMP页面](http:\u002F\u002Fwww.ebaytechblog.com\u002F2016\u002F06\u002F30\u002Fbrowse-ebay-with-style-and-speed\u002F)（[示例](http:\u002F\u002Fm.ebay.com\u002Fsch\u002Famp\u002F16GB-iPhone-5s-Smartphones\u002F9355\u002Fbn_341667\u002Fi.html)），尽管它们并不是新闻网站。\n\n![AMP可以运行的浏览器](\u002Fassets\u002Fweb\u002F2017\u002F10-misconceptions-about-amp\u002F3.png)\n\n为什么 eBay 要选择AMP？[它们自己是这么说的](http:\u002F\u002Fwww.ebaytechblog.com\u002F2016\u002F06\u002F30\u002Fbrowse-ebay-with-style-and-speed\u002F)：\n\n> AMP 的好处之一在于，它是一套构建移动端 web 页面的最佳实践的集合。我们之前已经在遵守这些最佳实践中的一部分，但是这些不同的做法分散在各个团队中，而且每个团队都有自己的偏好。AMP 的出现让我们可以更好地整理加固这个最佳实践的清单，并将它们作为常规开发周期中的一部分。\n\n## 10. 我得在AMP和PWA中做出选择\n\nAMP 和 PWA 是互补的技术，它们的使用场景完全不一样。如果将它们结合在一起使用，你就能使用它们创建出我认为目前最完美的内容站点：\n\n1. 用户发现了你的内容的链接，点进来了\n2. 内容被瞬间加载完毕，并且看起来很舒服\n3. 阅读完之后，用户被邀请阅读更多内容，或者邀请用户使用一个更好体验的版本，它们由快速导航、通知推送、离线支持等技术支持\n4. 当用户接受了你的邀请后，他们将被引导到一个可以安装到桌面的版本，这个版本的使用体验就像 App 一样\n\n听起来非常棒对吧？你需要做的只是下面这些（或许有稍许变化）：\n\n- 最深层面的页面（有内容的页面，而不是概览页面）使用 AMP 发布，以获得瞬间加载的体验\n- 当用户浏览你的内容的时候，在这些AMP页面中使用[<amp-install-serviceworker>](https:\u002F\u002Fwww.ampproject.org\u002Fdocs\u002Freference\u002Fextended\u002Famp-install-serviceworker.html)初始化缓存和 PWA 应用外壳（PWA app shell）\n- 当用户点击网站上的其它链接的时候（例如，在类似 App 的体验中，点击底部的按钮），[Service Worker](https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FAPI\u002FService_Worker_API\u002FUsing_Service_Workers)接管请求，然后加载[PWA应用外壳](https:\u002F\u002Fdevelopers.google.com\u002Fweb\u002Fupdates\u002F2015\u002F11\u002Fapp-shell?hl=en)\n- 最后，已经加载好的PWA应用外壳可以将 AMP 作为数据源嵌入到页面，这将使得你只需要为相同内容创建一个后台（既可以作为单独的AMP浏览，也可以作为 PWA 的数据源）\n\n如果同时谈到 AMP 和 PWA 的话，还有更多话题可以说，所以请期待在这个主题上的后续深度文章吧。\n\n## 总结\n\n现在你有答案了。针对 10 个误解，我们给了 10 个澄清的答案，希望能给你一个对 AMP 更大更清晰的印象，也让你想清楚 AMP 对你来说是否适合。还有问题吗？[联系我吧](https:\u002F\u002Ftwitter.com\u002Fpbakaus)！\n\n原文链接\u003Chttps:\u002F\u002Fpaulbakaus.com\u002F2016\u002F10\u002F13\u002Fdebunked-10-misconceptions-about-amp\u002F>\n\n作者：Paul Bakaus (@pbakaus)\n",null,0,"2026-08-28 04:37:17","published","\u003Ch2>1. AMP是一个新的渲染引擎\u002F编程语言\u003C\u002Fh2>\n\u003Cp>AMP 是一套开源的 web 组件格式和类库。与其它类库或者框架相比，AMP 最大的区别在于，它采用了白名单策略，来约定你可以做什么。\u003C\u002Fp>\n\u003Cp>为什么要限制一些东西的使用呢？这是因为一些看起来很无辜的小代码很容易拖慢网站的性能。而且一段时间后回来排查这些性能问题会是一件非常困难的事情。这就像你在德国的 Autobahn 快速路上开车，却只在右道行走，不知道最左边的道路才是更快的。AMP 就是这样一种技术，强迫你走到最左边的快速道路，并且保证你前方的道路是没有障碍的。\u003C\u002Fp>\n\u003Cp>AMP 带来的并不只有限制，它还提供了很多的自定义标签，这些标签都有各自内置的功能。当你使用这些自定义标签，并遵守一些其它的规则，那么 AMP 将通过一些手段保证你的网站速度是非常快的。这些手段主要包括强制静态布局、高效率资源加载和一些其它的优化。\u003C\u002Fp>\n\u003Cp>AMP 有一份文档，规定了什么样的标签是兼容的，什么样的标签是不兼容的。它还发布了一个内置的验证工具，可以让你看到当前页面的是否符合 AMP 文档的要求。需要强调的是，从技术上来说，即使不遵守所有的规定，AMP 页面也能运行得很好，只是你的页面无法通过 AMP 验证（从性能上来说，不遵守 AMP 规定到一定程度的时候，AMP做的性能改进也会全部失效，另外如果有一些东西是要求与 AMP 页面协作的，那么你的页面可能无法正常显示 ）。但同时，这也意味着 AMP 所强调的一些特性全部没有了。\u003C\u002Fp>\n\u003Ch3>还有更多解释吗？\u003C\u002Fh3>\n\u003Cp>真的没有了。AMP 只是一套 web 组件生态系统而已。但是，因为可以很容易通过编程的方式来确定一个页面是合法的 AMP，就可以做更多炫酷的事情了。比如：\u003C\u002Fp>\n\u003Cul>\n\u003Cli>合法的 AMP 可以使用免费、高速的缓存（例如\u003Ca href=\"https:\u002F\u002Fdevelopers.google.com\u002Famp\u002Fcache\u002F\">Google AMP Cache\u003C\u002Fa>）\u003C\u002Fli>\n\u003Cli>基本可以确认合法的 AMP 页面速度很快，且对用户友好\u003C\u002Fli>\n\u003Cli>AMP 页面是“自包含”（self-contained）的（译注：指页面是完整、独立的），所以可以被嵌入第三方平台\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>这也允许第三方平台做一些很炫酷的事情：\u003C\u002Fp>\n\u003Cul>\n\u003Cli>出现在 Google 搜索的 Top Stories 轮播上\u003C\u002Fli>\n\u003Cli>从 Pinterest 上链接到 AMP 页面\u003C\u002Fli>\n\u003Cli>在 PWA 中使用 AMP 页面\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch2>2. AMP是Google的项目\u003C\u002Fh2>\n\u003Cp>AMP 最早是由出版行业和 Google 在2015年提出来的（当然，一些促使 AMP 诞生的体验问题，比如移动端 web 页面加载慢等，属于明显的行业内共性问题）。从一开始，它就是由出版行业、广告行业、技术提供者和平台提供方一起携手开发的，除了 Google 以外，参与者还包括 Twitter、Linkedin 和 Pinterest 。AMP 从提出来的第一天起就是一个通过 Github 进行开放协作的开源项目。到现在为止，AMP 接受了来自超过 200 名贡献者的 Pull Request，这些贡献者绝大部分不是 Google 的员工。\u003C\u002Fp>\n\u003Cp>Google 确实有一支团队在全职为 AMP 项目工作，AMP 项目的大部分贡献也来自这个团队，但这个团队也是通过和其它人一样的\u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fampproject\u002Famphtml\u002Fblob\u002Fmaster\u002FCONTRIBUTING.md#contributing-features\">Intent to implement\u003C\u002Fa>流程来工作。Google 团队也会将它们的\u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fampproject\u002Famphtml\u002Fissues?utf8=%E2%9C%93&q=label%3A%22Meeting%20Notes%22%20\">周会纪要\u003C\u002Fa>以及其它的文档发布出来，尽量保证外部贡献者都可以参与进来。\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>10月17日更新：针对这一点，外界有一些疑问和评论。上面这两段话仍然有效，但是我补充一个更精简的结论：AMP 项目当前的核心贡献者都是 Google 员工，所以 AMP 可以称作是 Google 领导（Google-led）的项目。但是它是被当作一个独立的开源项目来看待的，我们正在邀请开发者和社区参与进来一起贡献，让他们也变成核心贡献者，使 AMP 项目更加独立。\u003C\u002Fp>\n\u003C\u002Fblockquote>\n\u003Ch2>3. AMP需要Chrome才能运行\u003C\u002Fh2>\n\u003Cp>绝对不是这样！AMP 是一个跨平台、跨浏览器的类库，支持所有流行的移动浏览器和桌面浏览器的\u003Ca href=\"https:\u002F\u002Fwww.ampproject.org\u002Flearn\u002Fbrowsers\u002F\">最新两个版本\u003C\u002Fa>:\u003C\u002Fp>\n\u003Cp>\u003Cimg src=\"https:\u002F\u002Fassets.toobug.net\u002Fassets\u002Fweb\u002F2017\u002F10-misconceptions-about-amp\u002F1.png\" alt=\"AMP可以运行的浏览器\">\u003C\u002Fp>\n\u003Ch2>4. AMP 限制了我的布局和设计\u003C\u002Fh2>\n\u003Cp>你肯定会被 AMP 能做的事情惊讶到。AMP 确实限制了一些标签和对性能影响很大的 CSS 属性的使用，但是整体来看，在为站点编写样式时，受到的\u003Ca href=\"https:\u002F\u002Fwww.ampproject.org\u002Fdocs\u002Fguides\u002Fresponsive\u002Fstyle_pages\">限制非常小\u003C\u002Fa>。想写一个疯狂的 5 层 flexbox 嵌套布局？那就写吧。想基于伪元素写一个疯狂的 UI ？也 OK。\u003C\u002Fp>\n\u003Cp>下面是一个我写的\u003Ca href=\"https:\u002F\u002Fpaulbakaus.com\u002Ftutorials\u002Fcss\u002Fflexbox-freebie-auto-growing-list-for-amp-roadmap\u002F\">AMP发展计划页面\u003C\u002Fa>：\u003C\u002Fp>\n\u003Ciframe height='265' scrolling='no' title='Flexy Steppy List' src='\u002F\u002Fcodepen.io\u002Fpbakaus\u002Fembed\u002FezOQYa\u002F?height=265&theme-id=0&default-tab=result&embed-version=2' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen \u003Ca href='https:\u002F\u002Fcodepen.io\u002Fpbakaus\u002Fpen\u002FezOQYa\u002F'>Flexy Steppy List\u003C\u002Fa> by Paul Bakaus (\u003Ca href='https:\u002F\u002Fcodepen.io\u002Fpbakaus'>@pbakaus\u003C\u002Fa>) on \u003Ca href='https:\u002F\u002Fcodepen.io'>CodePen\u003C\u002Fa>.\n\u003C\u002Fiframe>\n\u003Ch2>5. AMP只适合轻量级页面\u003C\u002Fh2>\n\u003Cp>有几分道理，但也有误导性。这主要取决于你如何理解“轻量”。严格来说，AMP 的目标是静态内容。但我们所说的静态内容同样可以包含具有艺术气息的动画、侧边栏、灯箱广告、手风琴导航、轮播等等。你可以查看\u003Ca href=\"https:\u002F\u002Fampbyexample.com\u002F\">AMPByExample\u003C\u002Fa>中的一些\u003Ca href=\"https:\u002F\u002Fampbyexample.com\u002F#advanced\">高级例子\u003C\u002Fa>。\u003C\u002Fp>\n\u003Ch2>6. AMP只适用于移动端\u003C\u002Fh2>\n\u003Cp>诚然，AMP（Accelerated Mobile Pages）中的“Mobile”无助于澄清这个问题，但是这个说法还是跟事实完全不符。\u003C\u002Fp>\n\u003Cp>AMP 是一个非常强大的跨平台解决方案，它希望出版行业和开发者将工程资源从细碎的多平台兼容支持中解放出来，将焦点放到创建伟大的新产品特性上，而这些产品特性可以被任何设备上的所有用户轻易访问到。\u003C\u002Fp>\n\u003Cp>AMP本身是在\u003Ca href=\"https:\u002F\u002Fwww.ampproject.org\u002Fdocs\u002Fguides\u002Fresponsive_amp\">响应式设计\u003C\u002Fa>的概念支持下被创造出来的。目前有与 AMP 集成的平台大部分是聚焦移动端的，但是在桌面端，你也可以从 AMP 中获取得很多好处。\u003C\u002Fp>\n\u003Cp>想知道如何使用 AMP 来处理不同分辨率和不同设备的话，可以看我的另一篇文章\u003Ca href=\"https:\u002F\u002Fpaulbakaus.com\u002F2016\u002F07\u002F01\u002Fabout-that-mobile-in-accelerated-mobile-pages\u002F\">“AMP中的'mobile'”\u003C\u002Fa>。\u003C\u002Fp>\n\u003Ch2>7. 我现有的网站上无法使用AMP\u003C\u002Fh2>\n\u003Cp>我们已经澄清过第 4 点，并没有什么特别的理由让你现在的网站无法使用 AMP，因为当你读完第一个问题后，就知道了 AMP 只是一个 web 组件类库而已。事实上，\u003Ca href=\"https:\u002F\u002Fwww.ampproject.org\u002F\">AMP项目主页\u003C\u002Fa>就是完全使用的 AMP：\u003C\u002Fp>\n\u003Cp>\u003Cimg src=\"https:\u002F\u002Fassets.toobug.net\u002Fassets\u002Fweb\u002F2017\u002F10-misconceptions-about-amp\u002F2.png\" alt=\"AMP项目主页使用的AMP\">\u003C\u002Fp>\n\u003Cp>当然，和其它类库一样，\u003Ca href=\"https:\u002F\u002Fpaulbakaus.com\u002F2016\u002F02\u002F26\u002Flife-after-amp\u002F\">AMP并不适合每一个人\u003C\u002Fa>。在动手前想一想在\u003Ca href=\"https:\u002F\u002Fwww.ampproject.org\u002Flearn\u002Fhow-amp-works\u002F\">AMP的强制限制\u003C\u002Fa>（同时也带来好处）下，你的网站是否能正常运行。如果答案是肯定的，那么就切换到 AMP 吧。有一个基本的原则，如果你的网站没有静态内容，并且页面并不是最深层次的页面（译注：原文 leaf pages，leaf 指树状结构中的叶子节点，对应到网站一般指最深层次的页面，例如文章页），例如入口页，也就是用户从搜索中点进来的页面，那么 AMP 可能不适合你。\u003C\u002Fp>\n\u003Ch2>8. 如果我自己做优化，那AMP就没什么用\u003C\u002Fh2>\n\u003Cp>AMP 的优化是“无脑优化”，即使你身边没有web开发大师，它也能帮助你。我们对将网站性能优化到极致这件事情感到自信和骄傲。事实上，因为 AMP 是一个通用库，它可能会漏掉一些针对你的网站特殊场景下的优化策略，这意味着你自己的手工优化工作很可能会带来更好的性能。\u003C\u002Fp>\n\u003Cp>但到今天为止，浏览器和一些大的平台例如 Google 搜索，仍然没有办法来确认你的网站是非常快速且对用户友好的。所以如果你选择自己做优化工作，你可能能得到一个非常快的网站，但是没有办法让其它人确信。而 AMP 的验证使得它对于第三方平台非常有吸引力。\u003C\u002Fp>\n\u003Ch2>9. AMP只对出版发行行业有好处\u003C\u002Fh2>\n\u003Cp>没错，如果你将你的新闻站点变成 AMP，就有机会出现在 Google 的 Top Stories 轮播上，并且 Google 会在移动端\u003Ca href=\"https:\u002F\u002Fsearch.googleblog.com\u002F2016\u002F09\u002Fsearch-results-are-officially-ampd.html\">搜索结果\u003C\u002Fa>中使用一个内联的查看器来加速 AMP 页面。但是\u003Ca href=\"http:\u002F\u002Fwww.ebaytechblog.com\u002F2016\u002F06\u002F30\u002Fbrowse-ebay-with-style-and-speed\u002F\">eBay也创建了AMP页面\u003C\u002Fa>（\u003Ca href=\"http:\u002F\u002Fm.ebay.com\u002Fsch\u002Famp\u002F16GB-iPhone-5s-Smartphones\u002F9355\u002Fbn_341667\u002Fi.html\">示例\u003C\u002Fa>），尽管它们并不是新闻网站。\u003C\u002Fp>\n\u003Cp>\u003Cimg src=\"https:\u002F\u002Fassets.toobug.net\u002Fassets\u002Fweb\u002F2017\u002F10-misconceptions-about-amp\u002F3.png\" alt=\"AMP可以运行的浏览器\">\u003C\u002Fp>\n\u003Cp>为什么 eBay 要选择AMP？\u003Ca href=\"http:\u002F\u002Fwww.ebaytechblog.com\u002F2016\u002F06\u002F30\u002Fbrowse-ebay-with-style-and-speed\u002F\">它们自己是这么说的\u003C\u002Fa>：\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>AMP 的好处之一在于，它是一套构建移动端 web 页面的最佳实践的集合。我们之前已经在遵守这些最佳实践中的一部分，但是这些不同的做法分散在各个团队中，而且每个团队都有自己的偏好。AMP 的出现让我们可以更好地整理加固这个最佳实践的清单，并将它们作为常规开发周期中的一部分。\u003C\u002Fp>\n\u003C\u002Fblockquote>\n\u003Ch2>10. 我得在AMP和PWA中做出选择\u003C\u002Fh2>\n\u003Cp>AMP 和 PWA 是互补的技术，它们的使用场景完全不一样。如果将它们结合在一起使用，你就能使用它们创建出我认为目前最完美的内容站点：\u003C\u002Fp>\n\u003Col>\n\u003Cli>用户发现了你的内容的链接，点进来了\u003C\u002Fli>\n\u003Cli>内容被瞬间加载完毕，并且看起来很舒服\u003C\u002Fli>\n\u003Cli>阅读完之后，用户被邀请阅读更多内容，或者邀请用户使用一个更好体验的版本，它们由快速导航、通知推送、离线支持等技术支持\u003C\u002Fli>\n\u003Cli>当用户接受了你的邀请后，他们将被引导到一个可以安装到桌面的版本，这个版本的使用体验就像 App 一样\u003C\u002Fli>\n\u003C\u002Fol>\n\u003Cp>听起来非常棒对吧？你需要做的只是下面这些（或许有稍许变化）：\u003C\u002Fp>\n\u003Cul>\n\u003Cli>最深层面的页面（有内容的页面，而不是概览页面）使用 AMP 发布，以获得瞬间加载的体验\u003C\u002Fli>\n\u003Cli>当用户浏览你的内容的时候，在这些AMP页面中使用\u003Ca href=\"https:\u002F\u002Fwww.ampproject.org\u002Fdocs\u002Freference\u002Fextended\u002Famp-install-serviceworker.html\"><amp-install-serviceworker>\u003C\u002Fa>初始化缓存和 PWA 应用外壳（PWA app shell）\u003C\u002Fli>\n\u003Cli>当用户点击网站上的其它链接的时候（例如，在类似 App 的体验中，点击底部的按钮），\u003Ca href=\"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FAPI\u002FService_Worker_API\u002FUsing_Service_Workers\">Service Worker\u003C\u002Fa>接管请求，然后加载\u003Ca href=\"https:\u002F\u002Fdevelopers.google.com\u002Fweb\u002Fupdates\u002F2015\u002F11\u002Fapp-shell?hl=en\">PWA应用外壳\u003C\u002Fa>\u003C\u002Fli>\n\u003Cli>最后，已经加载好的PWA应用外壳可以将 AMP 作为数据源嵌入到页面，这将使得你只需要为相同内容创建一个后台（既可以作为单独的AMP浏览，也可以作为 PWA 的数据源）\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>如果同时谈到 AMP 和 PWA 的话，还有更多话题可以说，所以请期待在这个主题上的后续深度文章吧。\u003C\u002Fp>\n\u003Ch2>总结\u003C\u002Fh2>\n\u003Cp>现在你有答案了。针对 10 个误解，我们给了 10 个澄清的答案，希望能给你一个对 AMP 更大更清晰的印象，也让你想清楚 AMP 对你来说是否适合。还有问题吗？\u003Ca href=\"https:\u002F\u002Ftwitter.com\u002Fpbakaus\">联系我吧\u003C\u002Fa>！\u003C\u002Fp>\n\u003Cp>原文链接\u003Ca href=\"https:\u002F\u002Fpaulbakaus.com\u002F2016\u002F10\u002F13\u002Fdebunked-10-misconceptions-about-amp\u002F\">https:\u002F\u002Fpaulbakaus.com\u002F2016\u002F10\u002F13\u002Fdebunked-10-misconceptions-about-amp\u002F\u003C\u002Fa>\u003C\u002Fp>\n\u003Cp>作者：Paul Bakaus (@pbakaus)\u003C\u002Fp>\n","\u003Ch2>1. AMP是一个新的渲染引擎\u002F编程语言\u003C\u002Fh2>\n\u003Cp>AMP 是一套开源的 web 组件格式和类库。与其它类库或者框架相比，AMP 最大的区别在于，它采用了白名单策略，来约定你可以做什么。\u003C\u002Fp>\n\u003Cp>为什么要限制一些东西的使用呢？这是因为一些看起来很无辜的小代码很容易拖慢网站的性能。而且一段时间后回来排查这些性能问题会是一件非常困难的事情。这就像你在德国的 Autobahn 快速路上开车，却只在右道行走，不知道最左边的道路才是更快的。AMP 就是这样一种技术，强迫你走到最左边的快速道路，并且保证你前方的道路是没有障碍的。\u003C\u002Fp>\n\u003Cp>AMP 带来的并不只有限制，它还提供了很多的自定义标签，这些标签都有各自内置的功能。当你使用这些自定义标签，并遵守一些其它的规则，那么 AMP 将通过一些手段保证你的网站速度是非常快的。这些手段主要包括强制静态布局、高效率资源加载和一些其它的优化。\u003C\u002Fp>\n\u003Cp>AMP 有一份文档，规定了什么样的标签是兼容的，什么样的标签是不兼容的。它还发布了一个内置的验证工具，可以让你看到当前页面的是否符合 AMP 文档的要求。需要强调的是，从技术上来说，即使不遵守所有的规定，AMP 页面也能运行得很好，只是你的页面无法通过 AMP 验证（从性能上来说，不遵守 AMP 规定到一定程度的时候，AMP做的性能改进也会全部失效，另外如果有一些东西是要求与 AMP 页面协作的，那么你的页面可能无法正常显示 ）。但同时，这也意味着 AMP 所强调的一些特性全部没有了。\u003C\u002Fp>\n","https:\u002F\u002Fassets.toobug.net\u002Fassets\u002Fweb\u002F2017\u002F10-misconceptions-about-amp\u002F1.png",{"total":14,"totalRoots":14,"comments":21,"pv":14},[]]