I have dropdown-Lists which have a lot of elements (>1000). When I select one of those elements the dropdown has to be rebuild because the selection of one element can cause others to disappear. I solve this in code behind (asp.net). Showing and hiding that dropdown usually is done in several milliseconds.
But when I select an element the div has to be rebuild which takes up to 20 seconds which is no surprise as that div contains about 300KB of Data which have to be sent to the client. The DIV looks like this:
<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.)
Now I wonder if there is a way to compress that div-String and decompress it client-side by jQuery or something like that to reduce traffic. Does that work and if yes: What percentage of bytes do I usually safe?
This all happens in a SharePoint-Site (which should not make any difference hopefully)
You might improve several things.
One would be to move all your JavaScript links into one.
This would save you 85 characters per row.
Could become this
And one jquery click handler:
Another point would be to remove class=’elementSingle’ and add a id to your ul for css/js.
This would save 22 characters per row.