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

Polymer 使用聚合物纸元件代替标准元件的加载速度非常慢,polymer,Polymer,我想尝试使用,因为我对材料设计非常感兴趣,这似乎是一个很好的方法来接受这种设计理念(以及它的一些其他方面,如数据绑定),所以我决定开始用聚合物元素替换html元素 问题是,将输入、复选框和下拉菜单更改为纸张输入、纸张复选框和纸张下拉菜单后,页面加载速度会非常缓慢。我说的是1-1.5秒的负载,负载时间达到9秒 这正常吗?有没有办法解决这个问题 似乎polymer演示应用加载速度非常快,那么我需要采取哪些步骤来加快加载速度 进口: <link rel="import" href="bo

我想尝试使用,因为我对材料设计非常感兴趣,这似乎是一个很好的方法来接受这种设计理念(以及它的一些其他方面,如数据绑定),所以我决定开始用聚合物元素替换html元素

问题是,将输入、复选框和下拉菜单更改为纸张输入、纸张复选框和纸张下拉菜单后,页面加载速度会非常缓慢。我说的是1-1.5秒的负载,负载时间达到9秒

这正常吗?有没有办法解决这个问题

似乎polymer演示应用加载速度非常快,那么我需要采取哪些步骤来加快加载速度

进口:

    <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>


使用
--csp--inline
标志尝试绑定。这将减少请求数量并显著加快加载时间。

您能告诉我们您所做工作的代码吗?-这样我们就可以看看里面有没有什么东西让事情变慢了。我怀疑罪犯就在那里的某个地方…@SFLee补充了密码。它实际上只是导入并用paper元素替换原生HTML元素。看起来您正在呈现一个表。你的桌子上有多少物品?@robdodson-Hmm说得好。我的表中大约有50个元素,当我将其限制为10个元素时,加载速度会快得多。然而,可伸缩性是绝对可取的,将聚合物限制在小型使用场合似乎很遗憾。需要注意的是,纸张元素的创建实际上是为了在动画和阴影方面推动浏览器。因此,它们的构建成本可能会很高,在这一点上可能应该明智地使用。从长远来看,我们正在努力削减这些成本,以降低成本。从历史上看,表格的布局速度也很慢,因此将两者结合起来可能会对您造成伤害。将使用div完成的布局视为一个潜在的优化领域是很有趣的。因此,我之前确实尝试过对其进行硫化(因为它是一个php文件,所以遇到了问题,但随后将导入重构为一个单独的文件并进行了硫化),但这几乎没有帮助-7s加载而不是8.5-9。您在哪个浏览器中看到了这一点?Chrome。Firefox的冻结时间甚至更长。IE使用的时间是Chrome的两倍