有一组特定的操作会导致我在本地主机上构建的网站冻结并导致 CPU使用率上升至25％左右。
我正在构建一种树结构，其中根据当前选定的父节点加载子行。因此，我必须能够保存和加载包含所有子项信息的对象，具体取决于所选的父项。
当我尝试更新以前创建的子行的信息时，会出现问题。我告诉它，在代码中更容易看到，检查任何已保存的子行。同一个父级，如果存在具有相同父级的已保存子行，将为子行中的每个子级存储6个textArea值的信息。
我相信我遇到了这个麻烦，因为我的php文件顶部有jquery，而且我的php文件底部有一个javascript文件。 这两个文件都有相同按钮的eventListener ，我认为这会导致高CPU使用率。
这是一种不好的做法吗？周围有办法吗？我应该将页面底部的所有JavaScript移动到页面顶部吗？我应该采取哪些步骤来正确识别导致高CPU使用率的代码？
旁注：此代码尽可能最少且足够。如有必要，我可以提供更多。
PHP：
<?php
include_once 'header.php';
?>
<link rel="stylesheet" type="text/css" href="essayTree.css">
<section class="account-main-container">
<div class="account-main-wrapper">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>EssayTree</title>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous">
</script>
<script>
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);
});
});
</script>
</head>
<body>
<div id="top">
<div id="parentParagraphs">
<div id="firstParentRow" class="w3-row">
<div id="parent1" class="w3-col s4">
<h2>parent #1</h2>
<textArea id="parentText1" class="parentText"></textArea>
</div>
<div id="parent2" class="w3-col s4">
<h2>Body #2</h2>
<textArea id="parentText2" class="parentText"></textArea>
</div>
<div id="parent3" class="w3-col s4">
<h2>parent #3</h2>
<textArea id="parentText3" class="parentText"></textArea>
</div>
</div>
<div id="secondParentRow" class="w3-row">
<div id="parent4" class="w3-col s4">
<h2>parent #4</h2>
<textArea id="parentText4" class="parentText"></textArea>
</div>
<div id="parent5" class="w3-col s4">
<h2>Body #5</h2>
<textArea id="parentText5" class="parentText"></textArea>
</div>
<div id="parent6" class="w3-col s4">
<h2>Body #6</h2>
<textArea id="parentText6" class="parentText"></textArea>
</div>
</div>
<button id="selectParent" type="button">Select</button>
<div id="middle">
<div id="children">
<div id="firstChildRow" class="w3-row">
<div id="child1" class="w3-col s4">
<h2>child #1</h2>
<textArea id="childText1" class="childText"></textArea>
</div>
<div id="child2" class="w3-col s4">
<h2>child #2</h2>
<textArea id="childText2" class="childText"></textArea>
</div>
<div id="child3" class="w3-col s4">
<h2>child #3</h2>
<textArea id="childText3" class="childText"></textArea>
</div>
</div>
<div id="secondChildRow" class="w3-row">
<div id="child4" class="w3-col s4">
<h2>child #4</h2>
<textArea id="childText4" class="childText"></textArea>
</div>
<div id="child5" class="w3-col s4">
<h2>child #5</h2>
<textArea id="childText5" class="childText"></textArea>
</div>
<div id="child6" class="w3-col s4">
<h2>child #6</h2>
<textArea id="childText6" class="childText"></textArea>
</div>
</div>
//THIS IS THE BUTTON THAT IS CAUSING THE ISSUE
//!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
<button id="saveInfo" type="button">Save All Children</button>
</div>
</div>
</div>
</div>
</div>
//THIS PART RIGHT HERE HAS AN EVENT LISTENER FOR THE SAME BUTTON
//!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
<script type="text/javascript" src="essayTree.js"></script>
</body>
</html>
</div>
</section>
<?php
include_once 'footer.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();