1

我有包含很多元素（> 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 站点中（希望这不会产生任何影响）

4

2 回答 2

5

你可能会改进几件事。一种方法是将所有 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 的 ul 添加一个 id。这将每行节省 22 个字符。

于 2012-06-15T12:17:12.610 回答
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 加载列表。

于 2012-06-15T12:16:22.523 回答