Question

在我的程序中，我使用JavaScript制作divs框，似乎花了相当多的时间制作50X50网格。甚至需要一些时间来制作20x20网格。我已经查找了如何使我的代码更快，但没有一个建议产生微不足道的差异。

这是一个Odin项目

https://jsfiddle.net/Mulk/yc5rsf1m/#&togetherjs=dVAh1FK7On

$(document).ready(function(){
// Defalut Grid is 16x 16 Grid
CreateBox(16);
CallMeMaybe();

$("#gridbtn").click(function(){
  $(".odd").remove();
  var numbox =parseInt(prompt("How many boxes would like?"));
  CreateBox(numbox); 

  });

  function CreateBox(a) {
  var  wh = (500/a), i , j ;
  for(i=0;i<a;i++){
  for(j=0;j<a;j++){
  $div = $('<div/>').appendTo('#container').addClass(".odd").attr('class','odd').width(wh).height(wh);

  CallMeMaybe();





  }}

};

// Play with me


function CallMeMaybe(a){
$(".odd").hover(function(){


    var r = Math.floor(Math.random() * (256 - 0) + 0);
    var g = Math.floor(Math.random() * (256 - 0) + 0);
    var b = Math.floor(Math.random() * (256 - 0) + 0);
    var color = "rgb("+r+","+g+","+b+")"
    $(this).css("background-color", color);


});
};





// Play with me






});

Answer 1

不是将每个新元素附加到非常昂贵的DOM，而是首先将所有元素附加到文档片段，然后将整个元素附加到DOM。

Answer 2

这应该更快。它创建一个div数组，并将它们一次性附加到DOM。使用属性创建div，而不是在将属性添加到DOM后更改其属性。它还会在创建时附加悬停处理程序，而不是在创建所有框之后附加它。这应该会显着减少需要发生的DOM操作的数量。

$(function(){

  function createBox(boxesInRow) {
    var wh = (500/boxesInRow), i , j, divs = [];
    for(i = 0; i < boxesInRow; i++){
        for(j = 0; j < boxesInRow; j++){
            divs.push($('<div/>', {
                "class":'odd',
                height: wh + 'px',
                width: wh + 'px',
                hover: hoverCallback
            }));
        }
    }

    $('#container').empty().append(divs);
  }

  function hoverCallback() {
    var r = Math.floor(Math.random() * 256),
        g = Math.floor(Math.random() * 256),
        b = Math.floor(Math.random() * 256);
    $(this).css("background-color", "rgb("+r+","+g+","+b+")");
  }

  // Default Grid is 16x16 Grid
  createBox(16);

  $("#gridbtn").click(function() {
    var numbox = parseInt(prompt("How many boxes would you like per row?"));
    createBox(numbox); 
  });

});

任何人都可以帮助我加快我的JavaScript速度吗？

2 个答案: