Как лучше всего сделать обрезку текста на js?

Question

[liltrill]

Нужно обрезать текст если он не влазит в область. Пользователь сам вводит текст и input меняет ширину от своего контента, вот хотелось бы узнать как лучше узнавать размер строки, точнее так что из этого быстрее?

1 Способ:

innerIFLength(this);
function innerIFLength(self) {
     if ( self.getTextWidth(text) > maxWidth ) {
          text = text.slice(0, -1);
          innerIFLength(self);
     }
}

getTextWidth(text) {
     let canvas = document.createElement("canvas"),
          context = canvas.getContext("2d");

          context.font="17px Roboto";

          return context.measureText(text).width;
}

Способ 2:
Для оживления input используеться div который скрыт, и можно сделать так:

innerIFLength(this);
function innerIFLength(self) {
     if ( self.resizeDiv.getBoundingClientRect().width > maxWidth ) {
     
          text = text.slice(0, -1);
          self.resizeDiv.innerText = text;
          innerIFLength(self);
     }
}

Что быстрее? И как можно нормально бенчмарк сделать?

Answer 1

[Антон Антон]

Ну для тестов есть https://jsperf.com/