How to handle javascript on page with thousands of checkboxes in IE6

问题

I am having problems with code written in ASP.NET with some javascript, doing a postback to the server for changes made to a grid of approximately 8,000 checkboxes. The this is, while I was testing it, everything seemed ok with approximately 1,000 checkboxes with IE6. But now, having imported the real data, I am stuck with the slowness of IE6 and the reality that the code I wrote is not going to cut it.

I have to use IE6 to test it because unfortunately, the client demands the web app to be fully functional with it. How can I boost speed of the page?

EDIT

I counted the rows and colums: 66 * 110 = 7260 checkboxes on the page.

CODE

[...]

<asp:Repeater ID="repChkAssociations" runat="server" DataSource="<%#Failures%>">
<ItemTemplate>
    <td style="text-align: center;">
        <asp:CheckBox ID="cbEqClassFailure" runat="server" Enabled="<%#AllowEditAssociations%>"
            ToolTip='ommited code'
            Checked='ommited code'
            OnClick="setIsDirty(true);"
            >
        </asp:CheckBox>
    </td>
</ItemTemplate>

[...]

<script src="~/Scripts/jquery-1.6.1.min.js"></script>

<script type="text/javascript">

    var isDirty;
    var identifiter;

    function SaveAssociation() {
        setIsDirty(false);
    }

    // check if the page has been modified
    function CheckIsDirty(_id) {
        setID(_id);
        if (getIsDirty() == true) {
            ShowConfirmPopup();
        } else {
            ShowGridPopup(); 
        }
    }

    function ShowGridPopup() {
        if (getID() == "EqClasses") {
            ShowClassPopup();
        } else if (getID() == "Failures") {
            ShowFailurePopup();
        }
    }

    // isDirty setter        
    function setIsDirty(changeVal) {
        isDirty = changeVal;
    }

    // isDirty getter
    function getIsDirty() {
        return isDirty;
    }

function ClickSaveButton() {
    var _id = $('a[id$="butSaveAssociation"]').attr("ID");
    __doPostBack(_id.replace("_", "$"), '');
}

function ShowClassPopup() {
    var _id = '<%= eqClassPopup.BehaviorID %>';
    var modal = $find(_id);
    modal.show();
}

function ShowFailurePopup() {
    var _id = '<%= failurePopup.BehaviorID %>';
    var modal = $find(_id);
    modal.show();
}

function ShowConfirmPopup() {
    var _id = '<%= confirmPopup.BehaviorID %>';
    var modal = $find(_id);
    modal.show();
}
</script>

回答1:

Granted, I don't know what you're doing, but having 8,000 check boxes on one page seems pretty user-unfriendly to me. Consider adding pagination & filtering to keep the number of check boxes per page under, perhaps, 100?

EDIT - You also seem to think this is an IE6 problem. I'd hazard a guess that any browser would have troubles with the volume you're talking.

DOUBLE EDIT - Okay, after looking over your code, I'm certain the only way to improve speed is to reduce the number of controls on the website. You're not doing anything crazy in the JS.

回答2:

Echoing @Matt Grande - you're trying to do something impossible. IE6 runs javascript really, really slowly. It's also going to be proportionally slower on the likely ancient hardware your end-user may be working on. It's damn near impossible to avoid memory leaks no matter what you do. This just isn't a good approach.

If you really need 6,000 checkboxes on a page, then consider an alternative approach. For example, use a single image with all the checkboxes pre-rendered. Capture mouse click events, figure out which box they checked using the mouse position, render a checkmark with VML, and save the information as an array or JSON in a hidden field.

来源：https://stackoverflow.com/questions/6231059/how-to-handle-javascript-on-page-with-thousands-of-checkboxes-in-ie6

标签

javascript

internet-explorer-6

performance