来自jquery的高CPU使用率?

有一组特定的操作会导致我在本地主机上构建的网站冻结并导致CPU使用率上升至25%左右。

我正在构建一种树结构 ,其中子行根据当前选定的父节点加载。 因此,我必须能够保存和加载包含所有子项信息的对象,具体取决于所选父项。

当我尝试更新以前创建的子行的信息时,会出现此问题。 我告诉它,在代码中更容易看到,检查具有相同父节点的任何已保存子行,并且,如果存在具有相同父节点的已保存子行, 则它为每个子节点存储6个textArea值的信息在孩子排。

我相信我遇到了这个麻烦,因为我的php文件顶部有jquery,而且我的php文件底部有一个javascript文件链接。 这两个文件都有相同按钮的eventListener ,我认为这会导致高CPU使用率。

这是一个不好的做法吗? 周围有办法吗? 我应该将所有javascript移到页面底部的页面顶部吗? 我应该采取哪些步骤来正确识别导致高CPU使用率的代码?

附注:此代码尽可能最小且充足。 如有必要,我可以提供更多。

PHP:

  

因此,您可以看到我已经标记了导致此代码顶部出现问题的jquery代码,并且我还标记了我认为干扰它的javascript文件。

我现在将把javascript代码放在同一个按钮的事件监听器上。

使用Javascript:

 var childController = (function(){ var childObjects = []; var childObject = function(name, parent, info){ this.name = name; this.parent = parent; this.info = info; }; var indexOfChildObject = function(name, parent){ var location = -1; for(i=0;i<childObjects.length;i++){ if(childObjects[i].name === name && childObjects[i].parent === parent){ location = i; } } return{ index: location } }; var storeChildren = function(index){ for(i=0;i<6;i++){ parentObjects[index].children[i] = document.getElementById("childText" + (i+1)).value; } }; //THIS IS THE FUNCTION THAT HAS AN EVENT LISTENER FOR THE SAME BUTTON //!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! var saveButton = function(){ document.addEventListener("click", function(){ if(document.activeElement.id === "saveInfo" && doms.saveInfo.innerHTML === "Save All Children){ storeChildren(indexOfParentObject(selectedParent).index); } }); }; return{ init: function(){ saveButton(); } } })(); childController.init();