need help speeding up tag cloud filter for IE_问答_开发者

need help speeding up tag cloud filter for IE

开发者 https://www.devze.com 2022-12-29 02:24 出处：网络

Any ideas on how to speed this up in IE (the filtering process performs decent in Firefox, but almost开发者_如何学Go unusable in IE). Basically, it\'s a tag cloud with a filter text box to filter the

Any ideas on how to speed this up in IE (the filtering process performs decent in Firefox, but almost开发者_如何学Go unusable in IE). Basically, it's a tag cloud with a filter text box to filter the cloud.

<html>

<head>

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){


        $('#tagFilter').keyup(function(e) { 
            if (e.keyCode==8)
            {   
                $('#cloudDiv > span').show();
            }

            $('#cloudDiv > span').not('span:contains(' + $(this).val() + ')').hide(); 
        });

    });
</script>

</head>


<body>
<input type="text" id="tagFilter" />
<div id="cloudDiv" style="height: 200px; width: 400px; overflow: auto;">
<script type="text/javascript">

for (i=0;i<=1300;i++)
{
    document.write('<span><a href="#">Test ' + i + '</a>&nbsp;</span>');
}
</script>
</div>

</body>
</html>

thanks, rodchar

instead of doing 1300 document.writes, try creating a concatenated string and do 1 write. This may help if it's the document.writes that are slowing down IE.

Since the tags should be unique (it shouldn't make sense to have the tag "awesome" in the cloud twice), give each span an "id" value based on a cleaned-up version of the tag string (replace spaces with underscores, etc etc). That should make things a lot faster, because the filter can just go by "id" value.

In fact, you don't even need a filter: just hide all the <span> elements in the cloud, and then show the one with the "id" value formed from the current field value. If there isn't one, then there isn't one, but if there is, that'll be very fast.

As well as what derek says, consider using jQuery's append() method (or at least the non jQuery equivalent).

avoid the child selector, it is slow.
selecting based on contained text is probably even slower. Either use class names to store tag information or build some sort of data structure in javascript (take a look at the jQuery data() function).
no need to show and then re-hide almost all spans. Use the :visible selector.
it might help to detach() #cloudDiv and the append() it back after you made your changes.
you might consider setting a timer on keyup instead of instantly showing/hiding stuff. That way you can wait for the user to finish typing.