JavaScript代码冗余致视图切换加载缓慢，求优化方案

嘿，我来帮你梳理下这段代码的优化方向，既能精简冗余逻辑，又能解决切换慢的问题～首先得先指出一个致命小bug：你所有的for循环里，循环变量都没写自增（比如i、j这些后面没加++），这会导致无限循环，直接让浏览器卡死，这绝对是切换慢的核心原因之一！先把这个补上，比如改成for(var i = 0; i < li.length; i++)，代码才能正常跑起来。

接下来是具体的优化方案，按优先级排序：

1. 用CSS父类切换代替逐个修改元素样式（最推荐！） #

视图切换最高效的方式根本不是遍历每个元素改className，而是给容器加个全局类，让CSS来控制所有子元素的样式。这样只需要修改一个DOM节点的类，剩下的交给浏览器的CSS引擎处理，性能提升特别明显，代码也极简。

比如先写好CSS：

/* 默认缩略图视图样式 */
.sortcontainer .game {
  /* 原来.game类的样式 */
}
.sortcontainer .image {
  /* 原来.image类的样式 */
}
.sortcontainer .title,
.sortcontainer .date,
.sortcontainer .thumbrating {
  /* 原来这些类的默认样式 */
}

/* 列表视图样式 */
.sortcontainer.list-view .game {
  /* 替换成原来lilistview的样式 */
}
.sortcontainer.list-view .image {
  /* 替换成原来imglistview的样式 */
}
.sortcontainer.list-view .title,
.sortcontainer.list-view .date,
.sortcontainer.list-view .thumbrating {
  /* 替换成原来listviewchildren的样式 */
}

然后JS代码就只剩几行：

function listview() {
  const container = document.getElementById("sortcontainer");
  container.classList.add("list-view");
  // 如果需要切换回缩略图视图，就写个对应的函数移除list-view，添加thumb-view类即可
}

这种方式不仅速度快到飞起，后续要调整样式也只需要改CSS，完全不用碰JS，维护起来超方便！

2. 精简JS逻辑（如果一定要用JS修改元素类） #

如果因为某些原因必须用JS逐个修改元素，那可以通过缓存DOM节点、合并重复逻辑来精简代码：

• 缓存容器节点：你多次调用document.getElementById("sortcontainer")，每次DOM查询都很耗性能，缓存起来只查一次就够了。
• 封装重复操作：把“找元素+改类”的逻辑封装成函数，避免重复写循环。

优化后的JS代码：

// 封装通用修改类的函数
function updateElementClass(container, targetClass, newClass) {
  // 把HTMLCollection转成数组，方便用forEach遍历
  Array.from(container.getElementsByClassName(targetClass)).forEach(el => {
    el.className = newClass;
  });
}

function listview() {
  const container = document.getElementById("sortcontainer");
  // 处理单个类的元素
  updateElementClass(container, "game", "lilistview");
  updateElementClass(container, "image", "imglistview");
  // 批量处理header相关的多个类
  ["title", "date", "thumbrating"].forEach(className => {
    updateElementClass(container, className, "listviewchildren");
  });
}

这样代码一下子清爽了很多，逻辑也更清晰，维护成本低很多。

3. 减少DOM重排的小技巧 #

如果你的元素数量特别多，逐个修改className会触发多次浏览器重排（reflow），拖慢速度。可以先把容器从DOM中临时移除，修改完所有元素后再放回去，或者用文档片段（DocumentFragment）来批量操作，不过这个方案在前面的CSS父类切换面前完全没必要，优先用第一种方案就好。

内容的提问来源于stack exchange，提问作者Richard Hewett