Question

我在页面加载时间上遇到了问题。目前，我正在Oracle Vm Virtual Box中运行UBUNTU。我正在使用mozilla firefox作为浏览器，并且正在“ The odin project”中的etchasketch项目中工作。

我的问题是页面加载时间。该代码从一开始就提示，并根据该提示生成用于蚀刻草图的网格。我没有分别给它提供最小值和最大值（16和64），但是在开始时提示输入的任何数字如果超过35，则不会加载或需要花费一定的时间。

如何加快处理时间？ /为什么移动这么慢？ /如何避免这种情况？ /我是否正在寻找可以使这项工作更快得多的修复程序？ /随时解决所有这些问题！

这是我的HTML代码：

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="style.css">
  <meta charset="utf-8"/>
  <title>
  </title>
</head>
<body>

  <div class="etchhead">
  <p> Choose your grid size </p>
  <input type = "text"></input>
  <button id="startOver"> Clear Grid </button>
  <p> Change color </p>
</div>

<div id="grid">
</div>

<script src="eas.js"></script>

</body>
</html>

这是我的CSS代码：

  p {
      color: blue;
      display: inline;
  }

    #grid {
      display: grid;
      width: 800px;
      max-width: 800px;
      height: 800px;
      max-height: 800px;
      line-height: 0;

    }

    .gridBox {
      border:  1px solid black;
      background-color: lightgrey
    }

这是我的JAVASCRIPT代码：

 gridStart();

  function gridStart(){
  var boxes = 0
  var selectBody = document.querySelector("#grid");
  var addBox = document.createElement("div");
  var boxCountStart = prompt("enter a number between 16 and 64");
  var boxDimensions = (boxCountStart * boxCountStart);

  function rowsAndColumns() {
    var selectBody = document.querySelector("#grid");
    var gridTemplateColumns = 'repeat('+boxCountStart+', 1fr)';
    selectBody.style.gridTemplateColumns= gridTemplateColumns;
    selectBody.style.gridTemplateRows= gridTemplateColumns;
};

 function hoverColor(){
   var divSelector = selectBody.querySelectorAll("div");
   divSelector.forEach((div) => {
     div.addEventListener("mouseover", (event) => {
       event.target.style.backgroundColor = "grey";
 });
 });
 };

 rowsAndColumns();

for (boxes = 0; boxes < boxDimensions ; boxes++) {
  var selectBody = document.querySelector("#grid");
  var addBox = document.createElement("div");
        addBox.classList.add("gridBox");
        addBox.textContent = (" ");
        selectBody.appendChild(addBox);
        hoverColor();
    };
  };

Answer 1

问题有两个部分。一种是您反复循环修改DOM。您可以通过将所有框附加到DocumentFragment上，然后在循环结束后将其添加到DOM来对其进行修复。您还在循环内调用hoverColor();，这会导致添加大量事件监听器，它们都执行相同的操作（由于在hoverColor内，您正在为每个div添加一个监听器）。您可以像这样解决这两个问题：

var fragment = document.createDocumentFragment( );

for (var i = 0; i < boxDimensions ; i++) {
  var addBox = document.createElement("div");
  addBox.classList.add("gridBox");
  addBox.textContent = (" ");
  fragment.appendChild(addBox);
}

document.querySelector("#grid").appendChild( fragment );
hoverColor();

Here is a JSFiddle和您的原始代码，here is one和您的修改。

总共只有一个事件侦听器，您也可以从中受益。您不需要循环并将事件侦听器添加到每个div。只需将一个添加到#grid并使用event.target（就像您已经做的那样，找到事件起源的div）。像这样：

function hoverColor(){
    document.querySelector("#grid").addEventListener( 'mouseover', function ( event ) {
        event.target.style.backgroundColor = "grey";
    } );
}

随着变量增加，JavaScript加载速度问题

1 个答案: