ループの高速化

最近はJavascriptにはまっています。
ループについての高速化でいろいろ試したメモ。部分的に切り取っているのでわけわからんかも。

最初の状態

  for(i=bond.length-1; i--; ) {
    ctx_2d.lineWidth = width+2;
    fncDrawStick(ctx_2d,
      coor[bond[bondcoor[i][3]][0]][0], 
      coor[bond[bondcoor[i][3]][0]][1],
      coor[bond[bondcoor[i][3]][1]][0], 
      coor[bond[bondcoor[i][3]][1]][1], 
      edge_color
      );

    ctx_2d.lineWidth = width;
    fncDrawStick(ctx_2d,
      coor[bond[bondcoor[i][3]][0]][0], 
      coor[bond[bondcoor[i][3]][0]][1],
      bondcoor[i][0], 
      bondcoor[i][1], 
      atom_color_str[coor[bond[bondcoor[i][3]][0]][3]]
      );
    fncDrawStick(ctx_2d,
      bondcoor[i][0], 
      bondcoor[i][1],
      coor[bond[bondcoor[i][3]][1]][0], 
      coor[bond[bondcoor[i][3]][1]][1], 
      atom_color_str[coor[bond[bondcoor[i][3]][1]][3]]
      );
  }

よく使う配列をいったんローカルで格納。

  for(i=bond.length-1; i--; ) {
    ctx_2d.lineWidth = width+2;
    cn = bond[bondcoor[i][3]];
    fncDrawStick(ctx_2d,
      coor[cn[0]][0], 
      coor[cn[0]][1], 
      coor[cn[1]][0], 
      coor[cn[1]][1],
      edge_color
      );

    ctx_2d.lineWidth = width;
    fncDrawStick(ctx_2d,
      coor[cn[0]][0], 
      coor[cn[0]][1], 
      bondcoor[i][0], 
      bondcoor[i][1], 
      atom_color_str[coor[cn[0]][3]]
      );
    fncDrawStick(ctx_2d,
      bondcoor[i][0], 
      bondcoor[i][1],
      coor[cn[1]][0], 
      coor[cn[1]][1],
      atom_color_str[coor[cn[1]][3]]
      );
  }

さらに、入り組んだ配列を最初に整理。ループが増えるが、全体の速度は若干こっちが高速になる。

  for(i=bond.length-1; i--; ) {
    cn = bond[bondcoor[i][3]];
    c[i] = [
      [
        coor[cn[0]][0],
        coor[cn[0]][1],
        coor[cn[0]][3]
      ], [
        coor[cn[1]][0],
        coor[cn[1]][1],
        coor[cn[1]][3]
      ]];
  }
  for(i=bond.length-1; i--; ) {
    ctx_2d.lineWidth = width+2;
    fncDrawStick(ctx_2d,
      c[i][0][0], 
      c[i][0][1], 
      c[i][1][0], 
      c[i][1][1],
      edge_color
      );

    ctx_2d.lineWidth = width;
    fncDrawStick(ctx_2d,
      c[i][0][0], 
      c[i][0][1], 
      bondcoor[i][0], 
      bondcoor[i][1], 
      atom_color_str[c[i][0][2]]
      );
    fncDrawStick(ctx_2d,
      bondcoor[i][0], 
      bondcoor[i][1],
      c[i][1][0], 
      c[i][1][1],
      atom_color_str[c[i][1][2]]
      );
  }

結論は、まぁ、やってみないとわからないってことだな。
FirefoxのFirebugや、Google Chromeの開発者ツールのプロファイル機能を使って時間を計測してるけど、見方がまだわかってないので最終的には体感で判断してる。

Chromeで配列アクセスが異常に遅いのが気になる。