HTML - 요소를 압축 하시겠습니까?

Question

나는 dropdown-elements (> 1000)가 많은 목록을 가지고 있습니다. 하나의 요소를 선택하면 다른 요소가 사라질 수 있으므로 해당 요소 중 하나를 선택하면 드롭 다운을 다시 작성해야합니다. 나는 (asp.net) 뒤에 코드에서 이것을 해결합니다. 드롭 다운 표시 및 숨기기는 대개 수 밀리 초 만에 완료됩니다.

그러나 요소를 선택하면 div에 클라이언트가 전송해야하는 약 300KB의 데이터가 포함되어 있으므로 놀랍지 않은 최대 20 초가 걸리는 rebuild가 필요합니다. 사업부는 다음과 같습니다

<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.) 

지금 내가 그 사업부 문자열을 압축하고 트래픽을 줄이기 위해 그렇게 그것을 jQuery를하여 클라이언트 측 또는 무언가를 압축 해제 할 수있는 방법이 있는지 궁금합니다. 그럴 수 있습니까? 그렇다면 바이트의 몇 퍼센트는 대개 안전합니까?

이 모두 그냥 완전히 앵커를 제거하고 ID가 목록 항목 요소에 대한 속성을 제공, 이미 jQuery를 사용하는 경우

Answer 1

몇 가지 사항을 개선 할 수 있습니다. 하나는 모든 자바 스크립트 링크를 하나로 이동하는 것입니다. 이렇게하면 행당 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('#','')); 
}); 

---

는 또 다른 포인트는 클래스 = 'elementSingle를'제거에 ID를 추가하는 것입니다 귀하의 ul for css/js. 이렇게하면 행 당 22자를 절약 할 수 있습니다.

Answer 2

(잘하면 어떤 차이가 안되는)은 SharePoint 사이트에서 발생합니다.

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를 사용하여 나머지 페이지를로드 한 후 목록을로드하는 방법에 대해 생각해보십시오.