Question

我有下拉列表，其中包含大量元素（＆gt; 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'并为你的ul为css / js添加一个id。这样每行可以节省22个字符。

Answer 2

如果您已经使用了jQuery，只需完全删除锚点并为列表项元素提供id属性。

使用读取id的jQuery选择器。

HTML看起来有点像......

<div id="ctl00_PlaceHolderMain_ctlProductSelector_SubstancesList" class="substancesListWrapper">
<ul>
  <li class='elementSingle' id="ct100-3268">(2-Propyloxy)ethyl acetate</li>
  <li class='elementSingle' id="ct100-2415">[(2-Propenyloxy)methyl] oxirane</li>
  etc...

jQuery可能是这样的......

$(function() {
  $('#ctl00_PlaceHolderMain_ctlProductSelector_SubstancesList .elementSingle')
  .click(function() {
    var number = $(this).attr('id').match(/-(\d+)$/)[1];
    __doPostBack('ctl00_PlaceHolderMain_ctlProductSelector_pnlSubstances', number);
  });
});

（免责声明;以上是未经测试的，但应该给你一个不错的指示。如果你想要一个经过测试的例子，首先发布一个jsfiddle示例。）

或者，考虑在加载页面的其余部分后使用AJAX加载列表。

压缩HTML - 元素？

2 个答案: