Javascript 随着变量的增加加载速度问题

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 with your original code, and here is one修改后

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

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

Javascript 随着变量的增加加载速度问题

Javascript loading speed issue as variable increases

javascript

performance

function

page-load-time

slowdown