是否压缩HTML - Elements？
是否压缩HTML - Elements？
提问于 2012-06-15 20:11:58
我有一个包含很多元素(>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字符串，并通过jQuery或类似的方法在客户端对其进行解压缩，以减少通信量。这是否有效?如果有效:我通常安全的字节百分比是多少？
这一切都发生在SharePoint站点中(希望这不会有什么不同)
回答 2
Stack Overflow用户
回答已采纳
发布于 2012-06-15 20:17:13
你可能会改进几件事。一种方法是将所有的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个字符。
Stack Overflow用户
发布于 2012-06-15 20:16:23
如果您已经在使用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加载列表。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/11050410
复制相关文章
相似问题
腾讯云开发者
