4x4 행렬곱 연산 테스트

테스트 코드는 다음과 같다. 

http://jsben.ch/oApXB

var a = [
[1,2,3,4],
[5,6,7,8],
[11,12,13,14],
[15,16,17,18]]
var b = [
[21,22,23,24],
[35,36,37,38],
[41,42,43,44],
[45,46,47,48]]

/**************************************** case 1 ****************************************/
var r = [[],[],[],[]];
r[0][0] = a[0][0] * b[0][0] + a[0][1] * b[1][0] + a[0][2] * b[2][0] + a[0][3] * b[3][0];
r[0][1] = a[0][0] * b[0][1] + a[0][1] * b[1][1] + a[0][2] * b[2][1] + a[0][3] * b[3][1]; 
r[0][2] = a[0][0] * b[0][2] + a[0][1] * b[1][2] + a[0][2] * b[2][2] + a[0][3] * b[3][2];
r[0][3] = a[0][0] * b[0][3] + a[0][1] * b[1][3] + a[0][2] * b[2][3] + a[0][3] * b[3][3];
r[1][0] = a[1][0] * b[0][0] + a[1][1] * b[1][0] + a[1][2] * b[2][0] + a[1][3] * b[3][0];
r[1][1] = a[1][0] * b[0][1] + a[1][1] * b[1][1] + a[1][2] * b[2][1] + a[1][3] * b[3][1]; 
r[1][2] = a[1][0] * b[0][2] + a[1][1] * b[1][2] + a[1][2] * b[2][2] + a[1][3] * b[3][2];
r[1][3] = a[1][0] * b[0][3] + a[1][1] * b[1][3] + a[1][2] * b[2][3] + a[1][3] * b[3][3];
r[2][0] = a[2][0] * b[0][0] + a[2][1] * b[1][0] + a[2][2] * b[2][0] + a[2][3] * b[3][0];
r[2][1] = a[2][0] * b[0][1] + a[2][1] * b[1][1] + a[2][2] * b[2][1] + a[2][3] * b[3][1]; 
r[2][2] = a[2][0] * b[0][2] + a[2][1] * b[1][2] + a[2][2] * b[2][2] + a[2][3] * b[3][2];
r[2][3] = a[2][0] * b[0][3] + a[2][1] * b[1][3] + a[2][2] * b[2][3] + a[2][3] * b[3][3];
r[3][0] = a[3][0] * b[0][0] + a[3][1] * b[1][0] + a[3][2] * b[2][0] + a[3][3] * b[3][0];
r[3][1] = a[3][0] * b[0][1] + a[3][1] * b[1][1] + a[3][2] * b[2][1] + a[3][3] * b[3][1]; 
r[3][2] = a[3][0] * b[0][2] + a[3][1] * b[1][2] + a[3][2] * b[2][2] + a[3][3] * b[3][2];
r[3][3] = a[3][0] * b[0][3] + a[3][1] * b[1][3] + a[3][2] * b[2][3] + a[3][3] * b[3][3];

4x4 배열이므로 하나하나 코드를 적어주는 방식.

/**************************************** case 2 ****************************************/
var r = [[],[],[],[]];
for(var i = 0; i < 4; i++) {
    r[i][0] = a[i][0] * b[0][0] + a[i][1] * b[1][0] + a[i][2] * b[2][0] + a[i][3] * b[3][0];
    r[i][1] = a[i][0] * b[0][1] + a[i][1] * b[1][1] + a[i][2] * b[2][1] + a[i][3] * b[3][1];
    r[i][2] = a[i][0] * b[0][2] + a[i][1] * b[1][2] + a[i][2] * b[2][2] + a[i][3] * b[3][2];
    r[i][3] = a[i][0] * b[0][3] + a[i][1] * b[1][3] + a[i][2] * b[2][3] + a[i][3] * b[3][3];
}

for 반복문을 1번 써준다.

/**************************************** case 3 ****************************************/
var r1 = [[],[],[],[]];
for(var i = 0; i < 4; i++) {
    for(var j = 0; j < 4; j++) {
        r1[i][j] = a[i][0]*b[0][j] + a[i][1]*b[1][j] + a[i][2]*b[2][j] + a[i][3]*b[3][j]
    }
}

for 반복문을 2번 써준다.

/**************************************** case 4 ****************************************/
var r1 = [[],[],[],[]];
var temp = 0;
for(var i = 0; i < 4; i++) {
    for(var j = 0; j < 4; j++) {
        for(var k = 0; k < 4; k++) {
            temp += a[i][k] * b[k][j];
        }
        r1[i][j] = temp;
        temp = 0;
    }
}

for를 3번 써준다.

/**************************************** case 5 ****************************************/
var r = [[],[],[],[]];
var b00, b01, b02, b03, b10, b11,b12,b13,b20,b21,b22,b23,b30,b31,b32,b33;
for(var i = 0; i < 4; i++) {
    r[i][0] = a[i][0] * (b00 || (b00 = b[0][0])) + a[i][1] * (b10 || (b10 = b[1][0])) 
            + a[i][2] * (b20 || (b20 = b[2][0])) + a[i][3] * (b30 || (b30 = b[3][0]));
    r[i][1] = a[i][0] * (b01 || (b01 = b[0][1])) + a[i][1] * (b11 || (b11 = b[1][1])) 
            + a[i][2] * (b21 || (b21 = b[2][1])) + a[i][3] * (b31 || (b31 = b[3][1]));
    r[i][2] = a[i][0] * (b02 || (b02 = b[0][2])) + a[i][1] * (b12 || (b12 = b[1][2])) 
            + a[i][2] * (b22 || (b22 = b[2][2])) + a[i][3] * (b32 || (b32 = b[3][2]));
    r[i][3] = a[i][0] * (b03 || (b03 = b[0][3])) + a[i][1] * (b13 || (b13 = b[1][3])) 
            + a[i][2] * (b23 || (b23 = b[2][3])) + a[i][3] * (b33 || (b33 = b[3][3]));

for 반복문 1번에 각 값들이 반복되므로 캐시를 해준다.

결과

waterfox 54

case 1 : 1346ms

case 2 : 1088ms

case 3 : 1065ms

case 4 : 2410ms

case 5 : 1143ms

edge 15

case 1 : 821ms

case 2 : 812ms

case 3 : 847ms

case 4 : 1037ms

case 5 : 643ms

ie 11

case 1 : 972ms

case 2 : 1001ms

case 3 : 1054ms

case 4 : 1133ms

case 5 : 716ms

chrome 60 (크롬은 계속 결과가 달라진다.;)

case 1 : 118ms   92ms  116ms

case 2 : 107ms  101ms  111ms

case 3 : 126ms  110ms   85ms

case 4 : 104ms   98ms   93ms

case 5 : 126ms  132ms  142ms

chrome 63 (카나리아)

case 1 :  81ms   99ms

case 2 :  88ms   91ms

case 3 :  86ms   87ms

case 4 :  91ms   92ms

case 5 : 113ms  126ms

추가버전(09.27)

http://jsben.ch/YbMT9

이게 크롬, IE, 엣지에서 가장 빠르지만 워터 폭스에서는 뒤에서 2번째의 속도를 가진다.

var r = [[],[],[],[]];
var b00 = b[0][0], b01 = b[0][1], b02 = b[0][2], b03 = b[0][3], 
    b10 = b[1][0], b11 = b[1][1], b12 = b[1][2], b13 = b[1][3], 
    b20 = b[2][0], b21 = b[2][1], b22 = b[2][2], b23 = b[2][3], 
    b30 = b[3][0], b31 = b[3][1], b32 = b[3][2], b33 = b[3][3];
 
var a00 = a[0][0], a01 = a[0][1], a02 = a[0][2], a03 = a[0][3], 
    a10 = a[1][0], a11 = a[1][1], a12 = a[1][2], a13 = a[1][3], 
    a20 = a[2][0], a21 = a[2][1], a22 = a[2][2], a23 = a[2][3], 
    a30 = a[3][0], a31 = a[3][1], a32 = a[3][2], a33 = a[3][3];
 
r[0][0] = a00 * b00 + a01 * b10 + a02 * b20 + a03 * b30;
r[0][1] = a00 * b01 + a01 * b11 + a02 * b21 + a03 * b31; 
r[0][2] = a00 * b02 + a01 * b12 + a02 * b22 + a03 * b32;
r[0][3] = a00 * b03 + a01 * b13 + a02 * b23 + a03 * b33;
 
r[1][0] = a10 * b00 + a11 * b10 + a12 * b20 + a13 * b30;
r[1][1] = a10 * b01 + a11 * b11 + a12 * b21 + a13 * b31; 
r[1][2] = a10 * b02 + a11 * b12 + a12 * b22 + a13 * b32;
r[1][3] = a10 * b03 + a11 * b13 + a12 * b23 + a13 * b33;
 
r[2][0] = a20 * b00 + a21 * b10 + a22 * b20 + a23 * b30;
r[2][1] = a20 * b01 + a21 * b11 + a22 * b21 + a23 * b31; 
r[2][2] = a20 * b02 + a21 * b12 + a22 * b22 + a23 * b32;
r[2][3] = a20 * b03 + a21 * b13 + a22 * b23 + a23 * b33;
 
r[3][0] = a30 * b00 + a31 * b10 + a32 * b20 + a33 * b30;
r[3][1] = a30 * b01 + a31 * b11 + a32 * b21 + a33 * b31; 
r[3][2] = a30 * b02 + a31 * b12 + a32 * b22 + a33 * b32;
r[3][3] = a30 * b03 + a31 * b13 + a32 * b23 + a33 * b33;