Question

我正在尝试减少需要加载大量元素的Polymer页面的加载时间。

所以，考虑按需加载元素，意味着一旦我在HTML代码中使用了一个元素，如果没有加载，就会立即加载。

有人知道如何做到这一点？当使用未知的HTML元素时，可能会触发某些事件？一旦发生这种情况，我可以使用importHref（）来处理加载吗？

Answer 1

这取决于您的需求，没有标准的优化方法，但您可以使用硫化工具和测试性能。

如果您不想在一个请求中加载所有Web组件，则可以硫化初始页面/视图中所需的所有元素。因此，您将在一个请求中加载一组元素，并在第一页中使用它们。

然后，您可以实现延迟加载，包括为每个web组件的head部分添加链接标记。通过这种方式，在浏览器的解析任务期间没有进行加载过程，因此不会阻塞。

Answer 2

iron-lazy-pages可能对您有用：

<app-location route="{{route}}"></app-location>
<app-route
    data="{{route_data}}"
    pattern="/:page"
    route="{{route}}"
></app-route>

<iron-lazy-pages attr-for-selected="data-route" selected="{{route_data.page}}">
    <x-page1 data-route="page1" data-path="demo/x-page1.html"></x-page1>
    <x-page2 data-route="page2" data-path="demo/x-page2.html"></x-page2>
    <section data-route="page3">
        My inline element.
    </section>
</iron-lazy-pages>

您可以安装以下内容：

bower install --save TimvdLippe/iron-lazy-pages

按需加载聚合物元素

2 个答案: