聚合物混合渲染

Question

我有兴趣改善当前呈现完全客户端的应用的初始页面加载。现在，应用程序加载一个初始应用程序框架，然后，一旦加载了初始页面，就会向服务器发出一个请求以获取数据。在处理请求时，用户有效地看到部分呈现的页面。一旦数据从服务器返回，页面就会在客户端上完成呈现。

删除因分别获取初始页面和数据而导致的延迟的最佳方法是什么？我应该只是将数据引导到初始页面加载中，还是应该利用某种服务器端模板引擎（Jade，Handlebars等）？似乎做后者意味着不能轻易地利用像dom-repeat这样的功能，从而失去了让Polymer处理一些更复杂的重新渲染场景的能力。

Answer 1

我遇到了同样的问题，页面需要4.5秒加载因为它必须从客户端接收数据，而且我想方法让聚合物更快，我想我发现了，现在我在1.2中加载页面sec（没有缓存），对服务器的请求需要0.4秒。

使聚合物更快的步骤

1. 不要展示你不需要的东西。使用dom-if不渲染，就像你的页面只显示用户点击按钮一样，不要渲染它们。

2. 您可以在正文之前向服务器发出请求。所以你会更快收到回复。

3. 如果您希望用户填写网站加载速度更快，您可以从正文中删除未解析的属性因此，用户将在加载过程中看到组件（但用户将看到一些内容而不是空白屏幕）。

4. 使用此脚本（导入聚合物之前）

          window.Polymer = window.Polymer || {dom：'shadow'};    

这使得浏览器使用阴影dom（如果支持）而不是阴暗的dom。

使用shadow dom的速度更快，但并非所有浏览器都支持它。

1. 使用vulcanize https://github.com/polymer/vulcanize合并所有导入文件，并最小化文件。

2. 对于长列表，您可以使用铁列表，它只渲染屏幕上的内容。

3. 如果您使用脚本导入，则可以使用async参数，并且不会阻止渲染过程。

修改

1. 如果您不想使用铁列表，那么它们是dom-repeat中的新选项

     <template is="dom-repeat" items="{{items}}" initial-count="20">
   
     </template>
   

   这不是长时间阻止线程但是将部分呈现为部分。