来自jquery的高CPU使用率?
有一组特定的操作会导致我在本地主机上构建的网站冻结并导致CPU使用率上升至25%左右。
我正在构建一种树结构 ,其中子行根据当前选定的父节点加载。 因此,我必须能够保存和加载包含所有子项信息的对象,具体取决于所选父项。
当我尝试更新以前创建的子行的信息时,会出现此问题。 我告诉它,在代码中更容易看到,检查具有相同父节点的任何已保存子行,并且,如果存在具有相同父节点的已保存子行, 则它为每个子节点存储6个textArea值的信息在孩子排。
我相信我遇到了这个麻烦,因为我的php文件顶部有jquery,而且我的php文件底部有一个javascript文件链接。 这两个文件都有相同按钮的eventListener ,我认为这会导致高CPU使用率。
这是一个不好的做法吗? 周围有办法吗? 我应该将所有javascript移到页面底部的页面顶部吗? 我应该采取哪些步骤来正确识别导致高CPU使用率的代码?
附注:此代码尽可能最小且充足。 如有必要,我可以提供更多。
PHP:
EssayTree var childObjects = []; var mostRecentParentClicked = ""; var newItem; var childTextObject = function(parent, texts){ this.parent = parent; this.texts = texts; }; var isNewChildRow = function(parent){ for(i=0;i<childObjects.length;i++){ if(childObjects[i].parent === parent){ return false; } else { return true; } } if(childObjects.length === 0){ return true; } }; var indexOfChildRow = function(parent){ for(i=0;i<childObjects.length; i++){ if(childObjects[i].parent === parent){ return i; } else { return -1; } } }; //Listener for the most recent parentText clicked $(document).ready(function(){ $('.parentText').click(function(){ mostRecentParentClicked = $(document.activeElement).attr('id'); }); }); //THIS PART RIGHT HERE STARTED CAUSING THE HIGH CPU USAGE //!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! $(document).ready(function(){ $('button#saveInfo').click(function(){ if(isNewChildRow(mostRecentParentClicked)){ newItem = new evidenceTextObject(mostRecentParentClicked, ["", "", "", "", "", ""]); for(i=0;i<6;i++){ newItem.texts[i] = $('#childText' + (i+1)).val(); } } else { for(i=0;i<6;i++){ childObjects[indexOfChildRow(mostRecentParentClicked)].texts[i] = $('#childText' + (i+1)).val(); } } childObjects.push(newItem); }); }); parent #1
Body #2
parent #3
parent #4
Body #5
Body #6
child #1
child #2
child #3
child #4
child #5
child #6
//THIS IS THE BUTTON THAT IS CAUSING THE ISSUE //!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! //THIS PART RIGHT HERE HAS AN EVENT LISTENER FOR THE SAME BUTTON //!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!