I am experiencing a very strange problem. I have a jsp page which has one javascript method. This method contains a lot of Struts and custom tags. This method iterate on few lists and then create rows and columns dynamically and add them to a table.
This method also creates few links to other javascript methods on those newly added rows and columns.
Now the problem is that this method is called on document ready and it takes a lot of time and page is taking minutes to get rendered completely. Strange thing is that even if I don't call this method then also page takes a lot of time. But if I call it after removing the code inside it then page is rendered very fast.
So I am not able to understand when do those tags get resolved from server- on page load or before the response is sent by server?
Why does this method make my page slow even if I don't call this method?
What is the standard way to tackle this problem?
Adding sample code to check:
<s:set var="indexCount" value="0" />
<logic:iterator value="#someParentList" var="company" status="statusL">
<logic:iterator value="#childLIst" var="employee" status="statusB" >
empBalHtml += '<tr>';
empBalHtml += ' <td class="flag" rowspan="2" >';
empBalHtml += getString(function(){/*!<s:checkbox name="enrolActivity.schBalempAllocationSave[%{#indexCount}].chk" />*/});
empBalHtml += getString(function(){/*!<s:textfield value="%{#employee.billDate}" fieldId="emp_ALLOCATION_SECTION" format="date" calendar="false" style="display:none" name="enrolActivity.schBalempAllocationSave[%{#indexCount}].schBalempTotalAppliedBillDate" />*/});
empBalHtml += ' <s:hidden name="enrolActivity.schBalempAllocationSave[%{#indexCount}].empIdKey" value="%{#employee.empIdKey}" ></s:hidden>';
empBalHtml += ' <s:hidden name="enrolActivity.schBalempAllocationSave[%{#indexCount}].primarySecondary" value="%{#employee.pmtStream}" ></s:hidden>';
empBalHtml += ' <s:hidden name="enrolActivity.schBalempAllocationSave[%{#indexCount}].employeeId" value="%{#employee.employeeId}" ></s:hidden>';
empBalHtml += ' <s:hidden name="enrolActivity.schBalempAllocationSave[%{#indexCount}].position" value="%{#indexCount + 1}" ></s:hidden>';
empBalHtml += ' </td>';
empBalHtml += ' <td rowspan="2" nowrap="nowrap">';
empBalHtml += ' <s:a id="empId-%{#statusB.index}" fieldId="emp_ALLOCATION_SECTION" href="javascript:$.nav.urlForward(CTX_ROOT + \"/empDetails_load.do?empIDKey=%{#company.empIdKey}\")">${company.emp.empId}</s:a>';
empBalHtml += ' <s:if test="enrolActivityFlags.secondaryPresent" > (<s:label name="enrolActivity.empBalances[%{#indexCount}].pmtStream" value="%{#employee.pmtStream}" fieldId="emp_ALLOCATION_SECTION"/>) </s:if>';
empBalHtml += ' </td>';
empBalHtml += ' <td class="numeric">';
empBalHtml += getString(function(){/*!<s:label value="0" format="currency" currencyCode="${enrolActivity.currency}" fieldId="emp_ALLOCATION_SECTION"/>*/});
empBalHtml += ' </td>';
empBalHtml += '</tr>';
<s:set name="indexCount" value="%{#indexCount + 1}"/>
</logic:iterator>
</logic:iterator>
$("#someRow").after(empBalHtml);
Why does this method make my page slow even if I don't call this method?
Because every Struts2 tag is translated into HTML (eg. <s:select>,<s:textarea>) or plain text (eg. <s:property/>, <s:date/>) before the page is sent to the browser.
If you inject those tags into javascript blocks, however, remember to set escapeJavascript="true" or you'll risk to break your page loading, and will be vulnerable to javascript injection.
What is the standard way to tackle this problem?
If you have 1 million of records, no matter if you append them through HTML, javascript or whatever, you need to load and render only 10 / 50 / 100 of them, not 1 million.