如何在不减慢页面加载速度的情况下在页面上添加数百个形状

Question

我正在尝试使用 JS 在页面上添加数百个小“正方形”/形状。但是无论是使用SVG还是divs，页面加载都很慢。有没有一种更有效的方法可以在不减慢页面加载速度的情况下在页面上创建多个形状？

这是 JSFiddle 中的示例，其中包含 svg 和 div 示例

这是JS：

var num = 700
for (i=0; i < num; i++){
    let el = '<div class="els"></div>';
  let elSVG = '<svg class="els"></svg>';
  let container = document.getElementById("test");
  
 container.innerHTML = container.innerHTML + elSVG
}

Answer 1

不是每次都将 HTML 文本连接到 innerHTML，而是 append 一个 <svg> 元素。此外，您应该只查询一次 #test（又名 container）；在你的循环之外。

const
  container = document.getElementById('test'),
  num = 700;

const createSvg = () => {
  const svg = document.createElement('SVG');
  svg.classList.add('els');
  return svg;
};

for (let i = 0; i < num; i++) {
  container.append(createSvg());
}

body {
  background-color: #111
}

.els {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 16px;
  background-color: #EEE;
}

<div id="test"></div>

更新： 正如 Danny 提到的，您可以将所有 SVG 元素附加到 DocumentFragment，然后将所述片段附加到容器。

const fragment = new DocumentFragment();
for (let i = 0; i < num; i++) {
  fragment.append(createSvg());
}
container.append(fragment);

Answer 2

您总是会减慢页面加载速度，它可以不会完成而不会减慢速度。

但是您可以在创建内容时很聪明。

innerHTML 和 append 将在每次插入时触发浏览器 reflow/repaint
使用一个DocumentFragment在内存HTML中构建所有，然后注入一次DocumentFragment。

https://developer.mozilla.org/en-US/docs/Web/API/DocumentFragment
您可能还想查看 <template>、
cloned 模板仅解析 HTML 一次

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template

<style>
  body {
    background-color: black
  }
  .els {
    height: 2px;
    width: 1px;
    background-color: white;
    margin-right: 1px;
    display: inline-block;
  }
</style>
<div id="$Container">
</div>
<script>
  console.time();
  let fragment = new DocumentFragment();
  let num = 4 * 700;
  for (i = 0; i < num; i++) {
    let el = document.createElement("div");
    el.classList.add("els");
    el.appendChild(document.createElement("svg"))
      .classList.add("els");
    fragment.append(el);
  }
  $Container.append(fragment);
  console.timeEnd();
</script>

如何在不减慢页面加载速度的情况下在页面上添加数百个形状

How to add hundreds of shapes on page without slowing page load

html

javascript

svg

pageload