压缩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'并为你的ul为css/js添加一个id.这将节省每行22个字符.