AMP

amp-script: AMP ❤️ JS

网站

今年早些时候在 AMP 大会上,我们推出了 <amp-script> 的开发者预览版。现在,我们宣布 <amp-script> 正式发布。这是一个 AMP 组件,可以在单独的 Worker 线程中运行您自己的 JavaScript。这样,您就可以在 AMP 页面中添加自定义 JavaScript,同时仍然保持其闪电般的速度!

<amp-script> 使您能够涵盖现有 AMP 组件无法涵盖的用例。它还允许您在 AMP 页面和非 AMP 页面之间共享代码。您甚至可以使用 JavaScript 框架。以下是 <amp-script> 团队构建的一些示例

Multi-page form with validation
多页表单的示例,在各部分之间进行验证

如果您对上述示例感兴趣,请尝试使用 <amp-script>。请记住,为了保持 AMP 的性能保证,存在一些限制

  • 内容跳跃:为了避免意外的内容跳跃,<amp-script> 通常需要用户手势才能更改页面内容。
  • 页面加载:由于 <amp-script> 不会在没有用户交互的情况下更改页面内容,因此它也不会在页面加载时修改内容。
  • 脚本大小:单个 <amp-script> 中使用的脚本必须小于 150kB。请注意,您可以随意使用您喜欢的 JS 框架,但它必须符合 150K 的限制。
  • API 支持:并非所有 API 都支持在 Web Worker 中使用,WorkerDOM 有一个 允许的 API 列表。此外,一些 DOM 方法和属性尚未实现。完整的列表可在 WorkerDOM 兼容性 中公开获得。如果您想添加 API,请提交 问题

<amp-script> 与您可能已经在使用的框架兼容,例如 React、Preact、Angular、Vue.js、jQuery 和 D3.js。

这是使用 AMP 的开发人员提出的最重要的请求之一。AMP 项目很高兴能够在保持 AMP 的速度价值主张的同时,帮助解决这个问题。您可以在 此处 了解有关 <amp-script> 的工作原理的更多信息,并按照 本指南 尝试使用 <amp-script>。这是一种解锁以前无法实现的大量用例的好方法!

如果您在使用 <amp-script> 时遇到任何问题或功能请求,请 告知我们

发布者:Naina Raisinghani,Google AMP 项目产品经理