
上QQ阅读APP看书,第一时间看更新
Optimizations that make AMP fast
- JavaScript: All JavaScript is loaded asynchronously and is non-blocking. No user JavaScript is allowed in the main page (although you can include JavaScript in iframes that can't block the main page render).
- Static resource sizing: External resources such as images, videos, and ads must specify their sizes statically. This means that AMP can calculate the position of all elements and page layout before anything is downloaded.
- CSS inlining and limitations: CSS must be inlined in the head of the AMP page and is limited to 50 KB per page. Some CSS is restricted, including the * selector, the not selector, the filter property, and the !important declaration. Only GPU-accelerated CSS animations and transitions are permitted. If the GPU can't handle an effect, then the browser must perform the required computation instead, slowing down the page render. Specifically, only transform and opacity properties can be animated.
- Web fonts: Web fonts can only be loaded from white-listed providers.
- Optimized resource loading: AMP takes control of resource downloading from the browser. Only items that are above-the-fold, or that are likely to be seen by the user, are fetched.
- Efficient pre-rendering: When possible, AMP pages are pre-rendered in the background. This is where things get really interesting!