压缩 HTML - 元素

Compress HTML - Elements?

本文关键字：元素 HTML 压缩      更新时间：2023-09-26

我有很多元素的下拉列表（>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 网站中（希望这应该不会有任何区别）

你可能会改进几件事。一种是将所有 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 个字符。

如果您已经在使用 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 加载列表。

相关文章：