使用聚合物紙元素代替標準元素加載超級緩慢

我想嘗試使用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

使用聚合物紙元素代替標準元素加載超級緩慢

回答

相關問題