什么是AMP HTML,它如何适应框架/工具X

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

本文关键字:框架 何适应 工具 AMP HTML 什么      更新时间:2023-09-26

好的,那么我们现在可能都从谷歌听说过AMP HTML。

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

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

AMP HTML基本上是回归基本并提供最快的HTML。我想起了WAPNokia 7110

这是一套制作网页的严格规则,对其他公司和开发人员的发展和扩展是开放的。

这是如何与SPA(单页应用程序)和其他javascript前端重型框架的工作在这一点上是未知的,这是那些开发人员弄清楚。

它的核心是静态HTML页面和自定义元素,旨在在慢连接和小视图下尽可能快地加载。任何人都可以优化他们的移动网站,并削减到几个KB,如果他们真的想要,AMP-HTML与否。

主要的好处是

  1. 谷歌将支持它,想想Android, Chrome和谷歌搜索,谷歌CDN。
  2. 页面将加载得非常快,并且看起来相当静止。

像Wordpress和其他发布商一样,最初的采用可能是一套独立的移动友好AMP页面。这是来自谷歌谁希望你让你所有的正常网页移动友好或面对SEO点击。

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

AMP是为静态页面设计的。开发人员必须制作两个不同的页面:普通版本和AMP版本。AMP页面将有一个到正常页面的链接,反之亦然。每当请求来自移动设备的正常页面时,它将加载AMP页面,反之亦然。谷歌有自己的AMP缓存来加快加载速度。在开发AMP页面时,我们只需要考虑AMP规则。

通过这个URL,事情变得更清楚了

最大的优化之一是它使来自外部资源的所有内容都是异步的,因此页面中的任何内容都无法阻止呈现。

所以没有更多渲染阻塞CSS。

其他性能技术包括所有iframe的沙箱,在加载资源之前预先计算页面上每个元素的布局,以及禁用缓慢的CSS选择器。