如何在 angular/ionic 网站中实现 AMP? [英] How can I implement AMP in angular/ionic website?

问题描述

最近我听说了 Accelerated Mobile Pages 项目，并阅读了一些相关信息.

Recently i've heard about the Accelerated Mobile Pages project, and read some info about it.

我想知道如何在现有的基于 Ionic 和 Angular 的网站上实现它?

I wonder how to implement it for existing website that is built upon Ionic and Angular?

推荐答案

基本上没有几乎可行的解决方案可以做到这一点.如果您查看文档 此处.

Basically there is no nearly possible solution to do that. If you check the doc here.

第三方JS喜欢使用同步JS加载.他们也喜欢文档.写更多的同步脚本.例如，如果您有五个广告，每个广告执行三个同步加载，连接延迟为 1 秒，那么仅 JS 加载的加载时间就为 18 秒.

Keep all third-party JavaScript out of the critical path

Third-party JS likes to use synchronous JS loading. They also like to document.write more sync scripts. For example, If you five ads, and each does three sync loads, with a 1 second latency connection, you’re in 18 seconds of load time just for JS loading.

AMP 页面允许第三方 JavaScript，但仅限于沙盒 iframe.通过禁止它们进入 iframe，它们无法阻止主页面的执行.即使他们触发了多次样式重新计算，他们的小 iframe 也只有很少的 DOM.

AMP pages allow third-party JavaScript but only in sandboxed iframes. By banning them into iframes, they can’t block execution of the main page. Even if they trigger multiple style re-calculations, their tiny iframes have very little DOM.

样式重新计算和布局是 DOM 大小的典型特征，因此与重新计算页面样式和布局相比，iframe 重新计算速度非常快.

Style-recalculations and layouts are typical to DOM size, so the iframe recalculations are very fast compared to a recalculating styles and layout for the page.

这篇关于如何在 angular/ionic 网站中实现 AMP?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！