什么是 AMP HTML 以及它如何适应 framework/tool X?

What is AMP HTML and how does it fit in with framework/tool X?

好的,所以我们现在可能都从 Google 那里听说过 AMP HTML

我很好奇这将如何适应我们现有的工作流程。如果您正在编写 React 或 Angular 应用程序,AMP HTML 如何适应开发过程?这些框架中的每一个都已经有了一种定义组件的方法,而且 AMP 似乎只是添加到堆栈中。

我们大多数人也已经在使用其他工具,例如 browserify 或 webpack。我不太容易看出 AMP 与其余部分的配合如何 。其中一些工具已经允许我们以优化的方式为我们的网站提供服务。 AMP HTML 将在多大程度上改变这一切?

AMP HTML 基本上回归基础并以最快的速度 HTML 提供服务。我想起了 WAPNokia 7110.

这是一套用于制作网页的严格规则,可以扩展,也可以由其他公司和开发人员进行扩展。

这如何与 SPA(单页应用程序)和其他 javascript 前端重型框架一起工作目前尚不清楚,这是由那些开发人员弄清楚的。

它的核心是其静态 HTML 页面,其中包含自定义元素,旨在在连接速度慢和视图较小的情况下尽可能快地加载。任何人都可以针对移动设备优化他们的网站,如果他们真的愿意,可以将其减少到几 KB,AMP-HTML 或不。

主要好处是

  1. Google会支持的,想想Android,Chrome和Google搜索,GoogleCDN。
  2. 页面加载速度非常快,而且看起来非常安静。

Wordpress 和其他发布商最初采用的可能是一组独立的移动友好 AMP 页面。这来自 Google,他希望您使所有普通网页都适合移动设备或面对 SEO 命中。

如果您从长远考虑,它是一个专注于性能的移动网络规范。如果采用,5 年后,任何网页都可以在移动连接上在几秒钟内加载,无论该连接的质量如何。如果我们等不及技术和电信公司提高速度,我们至少可以减小页面大小。

AMP 专为静态页面设计。开发人员必须制作两个不同的页面:普通版和 AMP 版。 AMP 页面将有一个 link 到普通页面,反之亦然。每当请求从移动设备到达普通页面时,它都会加载 AMP 页面,反之亦然。 Google 拥有自己的 AMP 缓存以更快地加载它。在开发 AMP 页面时,我们只需要考虑 AMP 规则。

通过这个URL

事情现在更清楚了

Among the biggest optimizations is the fact that it makes everything that comes from external resources asynchronous, so nothing in the page can block anything from rendering.

因此不再有渲染阻塞 CSS。

Other performance techniques include the sandboxing of all iframes, the pre-calculation of the layout of every element on page before resources are loaded and the disabling of slow CSS selectors.

希望这个新 link 有所帮助。