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

Why does amp-html have a CSS-rule that hides the body element

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

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

这是为什么?如果时间紧迫,将 Javascript 客户端的不透明度设置为 0 似乎不是个好主意。负责将不透明度设置为 1 的 JavaScript 可能不会被缓存并下载缓慢,或者可能根本无法加载(例如,中国倾向于阻止 Google 服务器,因此 Google CDN 可能有问题)。

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

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

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

These components can […] Replace HTML5 elements that are not directly permitted in the specification such as amp-img and amp-video. [source]

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

与完全不使用 Javascript 相比,使用 amp-html 有何改进?

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

But how do we get from good to, let’s say, instant? We’ll cheat :) AMP documents are from the ground up designed to be efficiently pre-renderable. Browsers have long supported pre-rendering through the <link rel=prerender> tag, but they need to be conservative about this mechanism because prerendering can be expensive. With AMP HTML we added the ability to tell a document: render yourself, but only as far as what is visible above the fold and only elements which are not CPU intensive to minimize the cost of pre-rendering. With this mechanism in place, referrers of AMP document can initiate rendering of docs before the user acts much more aggressively, so that in many cases the document will be done rendering by the time the user clicks. [source]

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

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

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

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

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