javascript - 压缩 HTML - 元素？

Question

我有一个包含很多元素(>1000)的下拉列表。当我选择其中一个元素时，必须重建下拉列表，因为选择一个元素可能会导致其他元素消失。我在代码隐藏 (asp.net) 中解决了这个问题。显示和隐藏下拉菜单通常在几毫秒内完成。

但是，当我选择一个元素时，必须重建 div，这最多需要 20 秒，这并不奇怪，因为该 div 包含大约 300KB 的数据，必须发送给客户端。 DIV 看起来像这样:

    <div id="ctl00_PlaceHolderMain_ctlProductSelector_SubstancesList" class="substancesListWrapper">
<ul>
<li class='elementSingle'><a href="JavaScript:__doPostBack('ctl00_PlaceHolderMain_ctlProductSelector_pnlSubstances','3268');">(2-Propyloxy)ethyl acetate</a></li>
<li class='elementSingle'><a href="JavaScript:__doPostBack('ctl00_PlaceHolderMain_ctlProductSelector_pnlSubstances','2415');">[(2-Propenyloxy)methyl] oxirane</a></li>
<li class='elementSingle'><a href="JavaScript:__doPostBack('ctl00_PlaceHolderMain_ctlProductSelector_pnlSubstances','2837');">1-(2-Pyridyl) piperazine</a></li>
<li class='elementSingle'><a href="JavaScript:__doPostBack('ctl00_PlaceHolderMain_ctlProductSelector_pnlSubstances','2239');">1,1,1,2-Tetrachloro-2,2-difluoroethane</a></li>
<li class='elementSingle'><a href="JavaScript:__doPostBack('ctl00_PlaceHolderMain_ctlProductSelector_pnlSubstances','2880');">1,1,1,2-Tetrafluoroethane</a></li>
<li class='elementSingle'><a href="JavaScript:__doPostBack('ctl00_PlaceHolderMain_ctlProductSelector_pnlSubstances','2110');">1,1,1-Trichloroethane</a></li>
(etc.)

现在我想知道是否有一种方法可以压缩该 div-String 并通过 jQuery 或类似的东西在客户端对其进行解压缩以减少流量。这行得通吗？如果行的话:我通常安全的字节百分比是多少？

这一切都发生在 SharePoint 站点中(希望不会产生任何影响)

Answer 1

您可能会改进几件事。 一种是将所有 JavaScript 链接移动到一个。 这将为您每行节省 85 个字符。

<li class='elementSingle'><a href="JavaScript:__doPostBack('ctl00_PlaceHolderMain_ctlProductSelector_pnlSubstances','3268');">(2-Propyloxy)ethyl acetate</a></li>
<li class='elementSingle'><a href="JavaScript:__doPostBack('ctl00_PlaceHolderMain_ctlProductSelector_pnlSubstances','2415');">[(2-Propenyloxy)methyl] oxirane</a></li>

可以变成这样

<li class='elementSingle'><a href='#3268'>(2-Propyloxy)ethyl acetate</a></li>
<li class='elementSingle'><a href='#2415'>[(2-Propenyloxy)methyl] oxirane</a></li>
...

还有一个 jquery 点击处理程序:

jQuery("li.elementSingle a").click(function(){
  __doPostBack('ctl00_PlaceHolderMain_ctlProductSelector_pnlSubstances', this.href.replace('#',''));
});

---

另一点是删除 class='elementSingle' 并为 css/js 添加一个 id 到你的 ul。 这将每行节省 22 个字符。