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

Question

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有什么改进？

Answer 1

请注意，我们要考虑更改这一点以优化非JS用例，但功能和理性将保持不变。

AMP页面确实需要AMP JS库才能正确呈现。让它们在没有它的情况下进行渲染会导致在正常情况下的快速下载或缓存的情况下出现刺耳的体验。

最初我们通过制作主JS二进制同步来实现这一目标。这具有非常相似的效果，并且不需要不透明度样板。但是，这并不允许浏览器开始在文档中应用样式 - 如果不是因为浏览器只在匹配后下载字体，那就没那么糟糕了。它的风格。

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

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

Answer 2

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

的CSS规则

AMP使用Web组件中的自定义元素。例如，组件amp-img会替换每个标记<img>：

  

这些组件可以替换规范中不直接允许的HTML5元素，例如amp-img和amp-video。 [source]

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

使用amp-html而不是完全不使用Javascript有什么改进？

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

  

但是，我们如何才能从好的到现在，让我们说，即时？我们会作弊:) AMP文件是从头开始设计的，可以高效预渲染。浏览器长期以来一直支持通过<link rel=prerender>标记进行预渲染，但是他们需要保守这种机制，因为预渲染可能很昂贵。使用AMP HTML，我们添加了告诉文档的功能：自己呈现，但只有在首页上可见的内容，以及只有非CPU密集的元素才能最大限度地降低预呈现的成本。有了这个机制，AMP文档的引用者可以在用户更积极地行动之前启动文档的呈现，因此在许多情况下，文档将在用户点击时完成呈现。 [source]