8

amp-html 的示例页面以及目前可用的少数 amp-html 网站包含以下代码:

<style>body {opacity: 0}</style><noscript><style>body {opacity: 1}</style></noscript>

为什么是这样?如果时间至关重要,那么将支持 Javascript 的客户端的不透明度设置为 0 似乎是个坏主意。负责将 opacity 设置为 1 的 JavaScript 可能不会缓存和下载缓慢,或者可能根本无法加载(例如,中国倾向于阻止 Google 服务器,因此 Google CDN 可能会出现问题)。

根本不改变不透明度,只使用 JavaScript 操作来改进页面不是更好吗?与根本不使用 Javascript 相比,使用 amp-html 有什么改进?

4

2 回答 2

9

请注意,我们将考虑至少对其进行一些更改以优化非 JS 用例,但功能和理性将保持不变。

AMP 页面确实需要 AMP JS 库才能正确呈现。在没有它的情况下让它们渲染会导致在快速下载或已经缓存的正常情况下产生不和谐的体验。

最初,我们通过使主 JS 二进制同步来实现这一点。这具有非常相似的效果,并且不需要 opacity 样板。但是,这不允许浏览器开始将样式应用于文档——如果不是因为它位于字体下载的关键路径中,这还不错,因为浏览器只会在字体与样式匹配后下载字体.

当前方法存在问题,我们正在https://github.com/ampproject/amphtml/issues/323中进行跟踪以进一步优化它。

更新:AMP 现在使用 CSS 动画来避免对 JS 的依赖。

于 2015-10-09T01:43:46.143 回答
2

为什么 amp-html 有一个隐藏 body 元素的 CSS 规则

AMP 使用来自 Web 组件的自定义元素。例如,组件amp-img替换每个标签<img>

这些组件可以 [...] 替换规范中未直接允许的 HTML5 元素,例如 amp-img 和 amp-video。[来源]

与 JavaScript 应用程序一样,最好在初始 DOM 操作期间隐藏页面。

与根本不使用 Javascript 相比,使用 amp-html 有什么改进?

AMP 设法以最佳顺序懒惰地加载资源。它专为大页面上的丰富内容而设计:

但是我们如何从良好状态转变为瞬间?我们会作弊 :) AMP 文档从头开始设计为可有效地预渲染。浏览器长期以来一直支持通过标签进行预渲染<link rel=prerender>,但他们需要对这种机制保持保守,因为预渲染可能很昂贵。借助 AMP HTML,我们添加了告诉文档的功能:渲染自己,但仅限于首屏可见的内容,并且仅显示非 CPU 密集型元素,以最大限度地降低预渲染成本。有了这个机制,AMP 文档的引用者可以在用户更积极地采取行动之前启动文档的呈现,因此在许多情况下,文档将在用户点击时完成呈现。[来源]

于 2015-10-08T08:54:15.457 回答