Question

我想尝试使用polymer，因为我对Material Design非常兴奋，这似乎是一种很好的方式来接受这种设计理念（以及它的一些其他方面，比如数据绑定）所以我决定开始交换html的聚合物元素。

问题在于，在将输入，复选框和下拉菜单更改为纸张输入，纸张复选框和纸张下拉菜单后，页面加载速度很慢。我说的是1-1.5秒的负载，最多可达到~9s的负载时间。

这是正常的吗？有什么办法可以修复吗？

似乎聚合物演示应用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>

Answer 1

使用--csp --inline标记将vulcanizing your imports放入捆绑包中。这应该会减少请求的数量并显着加快加载时间。

使用聚合物纸元素代替标准元素加载速度非常慢

1 个答案: