javascript - Facebook 友達リストの DOM 操作

Question

次の Java スクリプト コードを使用して Facebook の友達リストを表示しようとしていますが、このコードのパフォーマンスは非常に遅いです。

ロード時:
      I 友達のリスト項目を作成します。
キープレス時:
        入力されたデータに一致するリスト内の友達をフィルタリングします。
 

<script type="text/javascript">

var fncontainer = document.getElementById("jfmfs-friend-container");
var friends_names= <?php echo json_encode($friends_names); ?>;
var friends_ids= <?php echo json_encode($friends_ids); ?>;
var name,id,value;
var node1 = document.createElement("div"); 
node1.innerHTML="<ul id="friends"></ul>";
for (var i=0;i<friends_names.length;i++)
{
     name=friends_names[i];
     id=friends_ids[i];
     var node = document.createElement("div");        
     node.innerHTML= 

"<li data-id=""+id+"" data-name=""+name+""><input type="checkbox" id="" + id + "" name="selectedFriends[]"  value="" + id + ""> <img src="+"https://graph.facebook.com/"+id+"/picture title=""+name+"">"+"<p>"+ name +"</p></li>" ;

node1.appendChild(node);                  

                                }
                                                                                                                                // Search for friends
fncontainer.appendChild(node1);
$(".find").keyup(function() {
       $("ul").find("li").hide();
       $("li").each(function(index) {
           $id = $(this).attr("data-id");
           $name = $(this).attr("data-name");
          if($name.search(new RegExp($(".find").val(), "i")) != -1) {   
                $("ul").find("li[data-id=""+$id+""]").show();}});});