Vamos lá...
Teu código possui algumas má práticas. Porém vou me ater a principal. Sempre que for trabalhar com js e manipulação em massa de dados evite fazer muitos acessos ao DOM. Vou citar um exemplo:
document.getElementByQualquerCoisa().innerHTML = 'Algo';
Sempre que você faz isso um bebe foca morre na antartica
E porque isso acontece?
Porque sempre que um acesso ao DOM é feito o browser precisa percorer TODA a estrutura para achar o dito elemento que está procurando. Isso Mata o navegador. Ex.:
<div>
<table>
<tr>
<td><input type="text" id="ipTeste"/></td>
</tr>
</table>
</div>
Nesse exemplo para chegar até o ipTeste será necessário:
Acessar div -> table -> tr -> td -> input
Parece pouca coisa? Sim realmente é! Porém não se esqueça que no teu caso terás uma mega estrutura. Nesse caso a performance será sentida de longe.
Outra coisa, no caso de você buscar uma tabela então é pior ainda, pois além de ter que passar pelo DOM você terá muitas informações que provavelmente não precisará. Outra coisa, informações como style, class e etc também são retornados, ou seja todos os atributos.
Então o que fazer?
Parece obvio e é. Evite acesso ao DOM em casos como o seu procure usar um framework que abstrai esse tipo de comportamento. Vou citar um que uso e consigo um dos melhores: https://angularjs.org/
Segue abaixo exemplo do teu programa usando angular:
var app = angular.module('App', []);
app.controller('AppController', function($scope){
$scope.column = 5;
$scope.row = 5;
$scope.range = function(count){
var ratings = [];
for (var i = 0; i < count; i++) {
ratings.push(1)
}
return ratings;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="App" ng-controller="AppController">
<form id="create_table" action="javascript:process()">
<input type="text" id="column" ng-model="column"> x <input type="text" id="row" ng-model="row">
<input type="submit" value="Criar Matriz">
</form>
<div>
<table class="tg">
<tr ng-repeat="r in range(row) track by $index">
<td ng-repeat="c in range(column) track by $index">
<input type="text" class="cells" style="width: 12px;" value="1"/>
</td>
</tr>
</table>
</div>
</div>
E com js puro. Usei um time out para não travar o navegador:
function ps(n) {
return parseFloat(n);
}
var MTZ = document.getElementsByClassName("tg");
var statusInProcess = false;
function createTable() {
rows = document.getElementById("row");
columns = document.getElementById("column");
var N = 0;
var Column = [];
var Row = [];
var table = document.createElement('table');
table.setAttribute('class', 'tg');
for (var g = 0; g < columns.value; g++) {
var fnAsync = function(g) {
Row.push(table.insertRow(g));
Row[g].setAttribute('class', 'spine');
for (var q = 0; q < rows.value; q++) {
Column[q] = Row[g].insertCell(q);
Column[q].setAttribute('class', 'line');
var input = document.createElement("input");
input.type = "text";
input.value = 1;
input.setAttribute('class', 'cells');
Column[q].appendChild(input);
input.style.width = (input.value.length * 12) + "px";
N++;
};
};
setTimeout(fnAsync(g), 1);
};
var div = document.getElementById('divTable');
div.appendChild(table);
}
function setMatriz(number, type) {
var Mz = MTZ[number];
var Rows = parseFloat(order(Mz)[0]);
var Columns = parseFloat(order(Mz)[1]);
var n = 0;
var cell = new Array();
var lines = [];
for (var j = 0; j < Columns; j++) {
cell[j] = [];
for (var i = 0; i < Rows; i++) {
lines.push(document.getElementsByClassName('cells')[n]);
cell[j] = lines;
n++;
};
lines = [];
}
statusInProcess = false;
}
function process() {
createTable();
}
<input type="text" id="column">x
<input type="text" id="row">
<input type="button" value="Criar Matriz" onclick="process()">
<div id="divTable">
</div>