polymer 混合渲染

标签 polymer polymer-1.0

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

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

最佳答案

我有同样的问题,页面加载需要 4.5 秒,因为它必须从客户端接收数据,我正在寻找使 polymer 更快的方法,我想我发现了,现在我在 1.2 中加载页面秒(无缓存),向服务器发送请求需要 0.4 秒。

使 polymer 更快的步骤

  1. 不要展示你不需要的东西。使用 dom-if 不呈现,例如如果您的页面仅在用户单击按钮时显示,请不要呈现它们。

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

  3. 如果您希望用户填写网站加载速度更快,您可以从正文中删除未解析的属性这样用户将在加载过程中看到组件(但用户会看到一些东西而不是空白屏幕).

  4. 使用这个脚本(在导入 polymer 之前)

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

这让浏览器使用 shadow dom(如果支持)而不是 shady dom。

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

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

  2. 对于长列表,您可以使用 iron-list,它只渲染屏幕上的内容。

  3. 如果使用脚本导入,可以使用异步参数,不要阻塞渲染过程。

编辑

  1. 如果你不想使用 iron-list 他们是 dom-repeat 中的新选项

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

    这不是长时间阻塞线程,而是分段渲染列表。

关于 polymer 混合渲染,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34843291/

相关文章:

flexbox - 聚合物铁柔性布局类不起作用

data-binding - 如何在 polymer 中与 meteor 进行数据绑定(bind)

javascript - 在 GWT 中处理 iron-list 的键盘事件?

css - Polymer 1.0 中纸张文本区域的占位符颜色

javascript - Colorthief.js 与 Polymer.js - 查找导致 onload 事件的图像的原色

javascript - 高分子高分子微致错

polymer ,绑定(bind)到数组项不起作用

javascript - 无法在 iron-pages 中垂直居中内容

polymer - 如何在影子根内部创建影子根

javascript - 来自父级 <div> 的基于嵌套 polymer 的自定义元素中的样式反射