使用聚合物纸元素代替标准元素加载超级缓慢

我想尝试使用polymer，因为我对材质设计感到非常兴奋，这似乎是一种接受设计理念（以及它的一些其他方面，就像数据绑定），所以我决定开始交换html聚合物元素。使用聚合物纸元素代替标准元素加载超级缓慢

问题在于，在输入，复选框和下拉菜单更改为纸张输入，纸张复选框和纸张下拉菜单后，页面会缓慢加载。我正在谈论一个1-1.5秒的载入时间，达到约9秒的载入时间。

这是正常的吗？有什么办法可以解决这个问题吗？

看来聚合物演示应用程序topeka的加载速度非常快，所以我需要采取哪些步骤才能使其更快？

进口：

<link rel="import" href="bower_components/core-icon-button/core-icon-button.html" /> 
    <link rel="import" href="bower_components/paper-checkbox/paper-checkbox.html" /> 
    <link rel="import" href="bower_components/paper-button/paper-button.html" /> 
    <link rel="import" href="bower_components/paper-icon-button/paper-icon-button.html" /> 
    <link rel="import" href="bower_components/paper-input/paper-input.html" /> 
    <link rel="import" href="bower_components/paper-dropdown-menu/paper-dropdown-menu.html" /> 
    <link rel="import" href="bower_components/paper-item/paper-item.html" />

纸用途：

    <td> 
          <paper-icon-button class="mini" icon="clear"></paper-icon-button> 
          <paper-input value="<?=ucwords($item['name']) ?>" id="prod<?=$prodID ?>Name" width="150px" /> 
          </paper-input> 
         </td> 

        <td> 
         <paper-dropdown-menu selected="<?=$item['catName'] ?>" valueattr="label"> 
         <?php 

          foreach ($select_options as $op) { 
           ?> 
           <paper-item label="<?=$op ?>"></paper-item> 
           <?php 
          } 
         ?> 
         </paper-dropdown-menu> 
        </td> 
        <td> 
          <paper-input multiline maxrows="3" id="prod<?=$prodID ?>Description" value="<?=$item['description'] ?>" layout vertical > 
          </paper-input> 
         </td> 
         <td><paper-input type="number" label="Regular" floatingLabel="true" value="<?=$item['price'] ?>" id="prod<?=$prodID ?>Price" ></paper-input> 
          <br /><br /> 
          <paper-input type="number" label="Sale" floatingLabel="true" value="<?=$item['sale_price'] ?>" id="prod<?=$prodID ?>SalePrice" ></paper-input> 
         </td> 
         <td> 
          <paper-checkbox data-tip="On Sale" type="checkbox" id="prod<?=$prodID ?>OnSale" <?=$saleChecked ?>></paper-checkbox> 

         </td> 
         <td> 
          <paper-checkbox data-tip="Enabled" id="prod<?=$prodID ?>Enabled" <?=$checked ?> /> 
         </td> 
         <td><paper-checkbox data-tip="In Stock" id="prod<?=$prodID ?>InStock" <?=$stockChecked ?> /></td> 
         <td> 
          <paper-button raisedButton class="colored" onclick="getVals(<?=$prodID ?>)">Update</paper-button> 
         </td> 

        </tr>

来源

2014-09-24 General_Twyckenham

你能告诉我们你所做的代码吗？ - 这样我们就可以看到它里面是否有任何东西放慢速度。我怀疑罪魁祸首是在那里... – 2014-09-24 03:30:13

@SFLee添加了代码。这实际上只是导入并使用纸张元素替换原生HTML元素 – 2014-09-24 03:38:25

看起来您正在渲染表格。你的桌子上有多少物品？ – robdodson 2014-09-24 17:27:27

使用--csp --inline标志尝试vulcanizing your imports成束。这应该减少请求的数量，并显着加快加载时间。

来源

2014-09-24 14:39:48 robdodson

所以我之前尝试了硫化它们（遇到问题是因为它是一个php文件，但是然后将导入重构为一个单独的文件并对其进行硫化），但它几乎没有帮助 - 7s加载而不是8.5-9。 – 2014-09-24 15:17:57

您在浏览哪个浏览器？ – robdodson 2014-09-24 15:42:07

Chrome。 Firefox冻结并需要更长的时间。 IE浏览器轻松使用Chrome的两倍 – 2014-09-24 15:46:30

使用聚合物纸元素代替标准元素加载超级缓慢

回答

相关问题