javascript加載緩慢，代碼似乎很大？

Question

所以這是我的代碼

function listview() {

   //li list//
   var li = document.getElementById("sortcontainer").
getElementsByClassName("game");


for(var i = 0; i < li.length; i) {
   li[i].className = "lilistview";
   }

   //li image list//
   var img = document.getElementById("sortcontainer").
   getElementsByClassName("image");
for(var j = 0; j < img.length; j) {
   img[j].className = "imglistview";
   }   

     //header list//
   var header1 = document.getElementById("sortcontainer").
   getElementsByClassName("title");
   var header2 = document.getElementById("sortcontainer").
   getElementsByClassName("date");
   var header3 = document.getElementById("sortcontainer").
   getElementsByClassName("thumbrating");
for(var k = 0; k < header1.length; k) {
   header1[k].className = "listviewchildren";
   } 
for(var l = 0; l < header2.length; l) {
   header2[l].className = "listviewchildren";
   } 
for(var m = 0; m < header3.length; m) {
   header3[m].className = "listviewchildren";
   }

}  

它一遍又一遍地反復使用相同的代碼將縮略圖視圖更改為列表視圖，但是該代碼看起來很長，並且從這兩個代碼更改起來很慢。

有什么建議么？

Answer 1

編輯：經過一整夜的思考，我重做了整個事情。
1）這對我的好處比對您的好處更多。
2）您正在更改ClassName，對嗎？
3）一次獲得var sortcontainer = ..而不是5次。
4）除非li.length為零，否則“ for（var i = 0; i <li.length; i）{..”將循環。
5）一個例程將處理所有5組元素。
6）必須加載頁面。

window.onload = function() {
  var sortcontainer = document.getElementById("sortcontainer"); // used many times
  listview();
}
function listview() {
  changeClass("game", "lilistview");
  changeClass("image", "imglistview");
  changeClass("title", "listviewchildren");
  changeClass("date", "listviewchildren");
  changeClass("thumbrating", "listviewchildren");
}
function changeClass(oldClassName, newClassName) {
  var elementsByClass = sortcontainer.getElementsByClassName(oldClassName);
  console.log("-- " + oldClassName + " -- " + newClassName + " --");
  console.log("changing " + elementsByClass.length + " classnames");
  for (i=0; i<elementsByClass.length; i+=1) {
    elementsByClass[i].className = newClassName); }
}