AMP组件文件引入顺序是否重要？amp-lightbox加载异常问题求助

我之前也踩过一模一样的坑！AMP的组件脚本加载看似全是异步的，但内部的组件注册机制其实对顺序有隐性要求，尤其是像amp-lightbox这类组件，很容易被前置加载的其他组件打乱初始化流程。

问题原因解析 #

你收到的提示unrecognized AMP element: Did you forget to include it via <script.....>其实带有误导性——你根本没漏引入组件，只是脚本加载顺序让AMP在初始化阶段没能及时识别到amp-lightbox的组件定义。当你先加载amp-list这类组件时，它的初始化逻辑可能临时占用了AMP的注册线程，导致后加载的amp-lightbox脚本没能完成正确的组件注册。

修复方案 #

调整组件脚本的引入顺序，把amp-lightbox的脚本放在所有其他自定义组件脚本的最前面（或者至少放在它依赖的组件之前），示例正确顺序如下：

<script async custom-element="amp-lightbox" src="https://cdn.ampproject.org/v0/amp-lightbox-0.1.js"></script>
<script async custom-element="amp-list" src="https://cdn.ampproject.org/v0/amp-list-0.1.js"></script>

额外注意事项 #

• 虽然所有AMP组件脚本都带async属性，但组件的注册是按脚本执行的先后顺序完成的，部分复杂组件（比如amp-list）的初始化可能会短暂阻塞后续组件的注册流程。
• 顺便可以检查下脚本的src路径是否正确，不过从你的描述来看，这个问题显然不是路径错误导致的。

内容的提问来源于stack exchange，提问作者Christian Felix