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

Question

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 操作来改进页面不是更好吗？使用 amp-html 比根本不使用 Javascript 有什么改进？

Answer 1

为什么 amp-html 有一个隐藏 body 元素的 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 操作期间隐藏页面。

使用 amp-html 比根本不使用 Javascript 有什么改进？

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]