javascript - 页面模板使用 JS 导致加载缓慢

Question

在我的博客（由 Blogger 托管）中，我有一个画廊页面。

对于我添加到该页面的每个新条目，我都会复制粘贴最后一个条目并使用新内容对其进行修改。结果是一个很长的页面，代码重复，我的工作很笨拙。

这是它的外观：

<div style="justify-content: space-around; display: flex; flex-direction: row; flex-wrap: wrap;">
  <div style="align-items: center; display: flex; flex-direction: column;">
    <a href="https://example.com/article1.html">
      <img class="lazyload" data-src="https://example.com/article1.jpeg" />
    </a>  
    <div style="padding-left: 0.5em; padding-right: 0.5em; text-align: center;">
      <a href="https://example.com/article1.html" style="text-decoration: none;">Read More</a>
    </div>
  </div>
  
  <div style="align-items: center; display: flex; flex-direction: column;">
    <a href="https://example.com/article2.html">
      <img class="lazyload" data-src="https://example.com/article2.jpeg" />
    </a>  
    <div style="padding-left: 0.5em; padding-right: 0.5em; text-align: center;">
      <a href="https://example.com/article2.html" style="text-decoration: none;">Read More</a>
    </div>
  </div>
  
  <div style="align-items: center; display: flex; flex-direction: column;">
    <a href="https://example.com/article3.html">
      <img class="lazyload" data-src="https://example.com/article3.jpeg" />
    </a>  
    <div style="padding-left: 0.5em; padding-right: 0.5em; text-align: center;">
      <a href="https://example.com/article3.html" style="text-decoration: none;">Read More</a>
    </div>
  </div>
</div>

昨天在添加了更多条目后，我决定寻找一种更短的方法，最终我使用了这样的 JS：

<div>
  <div id="articlesMain" style="justify-content: space-around; display: flex; flex-direction: row; flex-wrap: wrap;">
  </div>
</div>

<script type="text/javascript">
  articles = [
    {
      image: 'https://example.com/article1.jpeg',
      link: 'https://example.com/article1.html'
    },
    {
      image: 'https://example.com/article2.jpeg',
      link: 'https://example.com/article2.html'
    },
    {
      image: 'https://example.com/article3.jpeg',
      link: 'https://example.com/article3.html'
    },
  ]

  for(var i = 0; i < articles.length; i++) {
    var article = document.createElement("div");
    article.innerHTML = `
      <div style="align-items: center; display: flex; flex-direction: column;">
        <a href="${articles[i].link}">
          <img class="lazyload" data-src="${articles[i].image}" />
        </a>  
        <div style="padding-left: 0.5em; padding-right: 0.5em; text-align: center;">
          <a href="${articles[i].link}" style="text-decoration: none;">Read More</a>
        </div>
      </div>
    `;
    
    articleMain.appendChild(article);
  }
</script>

这段代码完全符合我的预期，节省了我的时间并保持我的代码非常小。

但是，当我使用 PageSpeed Insights 检查其性能时，它会导致奇怪的行为 - https://developers.google.com/speed/pagespeed/insights/

我得到的不是分数，而是这个简短的句子：Lighthouse returned error: Something went wrong.

在阅读了此错误的一些原因后，我发现一些声称页面加载时间或页面上缺少元素可能会导致这种情况发生。虽然我必须说，在我看来，我没有注意到任何缓慢的页面加载......

所以我的问题是如何更改我的 JS 代码以恢复我的精彩分数？

谢谢

---

更新：我尝试了@evolutionxbox 的建议：

...
var article = document.createElement("div");
article.innerHTML = ``

for(var i = 0; i < articles.length; i++) {
    article.innerHTML += `
        ...
    `
}

articlesMain.appendChild(article);

但我仍然收到该错误。为了进行健全性检查，我使用了没有 JS 循环的旧代码，并且页面速度测试效果很好。

---

更新 2：

这次我尝试使用@Heretic Monkey 建议DocumentFragment，这就是我最终得到的结果：

...
var fragment = document.createDocumentFragment();

for(var i = 0; i < articles.length; i++) {
  var articleHTML= document.createElement("div");
  articleHTML.innerHTML = `
        ...
    `
  fragment.appendChild(articleHTML);
})

articlesMain.appendChild(fragment);

我又遇到了同样的错误。

也许这不是解决我的问题的合法方法？有没有其他方法我应该尝试以获得类似模板的能力而无需像这样使用 JS？

标签： javascripthtmlpagespeedpagespeed-insights