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

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

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

body{opacity:0}body{opacity:1}

为什么会这样？如果时间至关重要，那么将支持Javascript的客户端的不透明度设置为0似乎不是一个好主意。负责将不透明度设置为1的JavaScript可能不会被缓存和缓慢下载，或者根本不会加载（例如，中国往往会阻止谷歌服务器，因此谷歌CDN可能存在问题）

如果根本不改变不透明度，只使用JavaScript操作来改进页面，不是更好吗？与完全不使用Javascript相比，使用amp html有什么改进？

为什么amp html有一个隐藏body元素的CSS规则 AMP使用Web组件中的自定义元素。例如，组件

amp img

替换每个标签

：

这些组件可以[…]替代规范中不直接允许的HTML5元素，如amp img和amp视频

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

与完全不使用Javascript相比，使用amp html有什么改进？ AMP设法以最佳顺序惰性地加载资源。它专为大型页面上的丰富内容而设计：

但是，我们如何从好到，比如说，瞬间？我们将作弊：）AMP文档是从头开始设计的，可以高效地预渲染。浏览器长期以来一直支持通过

标记进行预渲染，但对于这种机制，浏览器需要保守，因为预渲染可能会很昂贵。使用AMP HTML，我们添加了告诉文档的功能：自己渲染，但仅限于折叠上方可见的内容以及不占用CPU的元素，以最小化预渲染的成本。有了这种机制，AMP文档的引用者可以在用户更积极地操作之前启动文档的呈现，因此在许多情况下，文档将在用户单击时完成呈现

---

注意，我们正在考虑至少对此进行一点更改，以优化非JS用例，但功能和rational将保持不变

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

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

当前的方法存在问题，我们正在跟踪以进一步优化它

---

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

这并不能回答问题。总之，AMP的JavaScript支持使用AMP-*特定的标记（其行为与本机对应的标记相同，但需要JS-在JS加载之前不显示），AMP在rel=preload时可能会产生更好的性能。我理解对了吗？但这并不能真正回答我的问题。它没有解释为什么在加载JS之前必须隐藏主体（amp img无论如何都不会显示），也没有解释如何提高性能，除非在某些非常特殊的情况下。我只是编辑。与JS应用程序一样，在初始DOM操作期间隐藏页面是一种最佳做法。你不相信吗？请参见第一个带有嵌套自定义元素的假示例。有一些段落可以在未呈现的自定义标记中呈现。我认为这是我所看到的问题的最佳答案。尽管主要问题没有得到回答（为什么隐藏身体，为什么“JS免费网站”需要JS），但它显示了AMP设计团队做出这些选择的精神。AMP（一个更快的移动网络）的目标是否能通过这些选择来实现，这取决于争论，但这不是讨论的地方。因为如果是这样的话，我会把这个标记为被接受的答案。我希望看到一些确凿的事实来证明AMP的工作原理（比什么快15%-85%），我希望AMP团队将它们包括在网站上。