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