1부터 다음 줄에 앞줄의 숫자와 해당 숫자의 갯수 세며 반복하기

지하철에서 학생(인걸로 추정되는) 둘이 하는 이야기를 우연히 듣다가 흥미롭기도 하고 구현 방법이 선뜻 떠오르지 않아 시간을 내어 시도해봤다.

문제(?) 내용은 1부터 시작하여 다음줄에는 앞줄에 숫자의 갯수를 표현하는 것이다. (내가 이해한게 맞다면)
예를 들면 1 다음 줄엔 1 1(1이 1개), 그 다음 줄은 1 2(1이 2개), 그 다음줄은 1 1 2 1 (1이 1개, 2개 1개)처럼 전 줄에 숫자를 세어주는 것이다.

자바스크립트로 구현하는건 아닌 것 같았지만 제일 편한게 스크립트니까…

const numbering = {
  arr: [1],
  main() {
    let prev = this.arr[0];
    let count = 0;
    const result = [];

    this.arr.forEach(function(n) {
      if (n === prev) {
        count++;
      } else {
        result.push(prev);
        result.push(count);
        prev = n;
        count = 1;
      }
    });

    result.push(prev);
    result.push(count);

    this.arr = result;
  },
  func(targetId, limitNumber) {
    this.output.push(this.arr.join(' ') + '<br>');

    for (var i = 0; i < limitNumber - 1; i++) {
      this.main();
      this.output.push(this.arr.join(' ') + '<br>');
    }

    document.getElementById(targetId).innerHTML = this.output.join(' ');
  },
  output: []
};

numbering.func('container', 10);
<div id="container"></div>

근데 이렇게 반복문(for)으로 반복문(forEach)를 돌리는 방식을 취하니 성능적으로 매우 부담스럽다. 회사 아이맥(i7 3.6Ghz/32GB)에 크롬 기준으로 반복 횟수 55를 넘어서면 결과 표현이 매우 늦어짐.
영리하게는 어떻게 처리할 수 있을지 궁금하다.