Как оптимизировать скорость работы функции?

Question

[z_u_q]

Написал функцию, которая добавляет в конец троеточие, если количество строк больше заданного в атрибуте data.

$(window).on('load', function() {

		var fullText=$('.i-ellips').text();

		function ellipsis() {

			console.time('ellipsis');

			var ellips = $('.i-ellips');
			var isOverflow = ellips.css('overflow') === 'hidden';

			if (isOverflow) {
				ellips.css('visibility', 'hidden');
				var text = fullText;
				var lineHeight = parseFloat(ellips.css('line-height'));

				var lineCount = ellips.attr('data-ellipsis');
				// var lineCount = ellips[0].dataset.ellipsis;
				var maxHeight = lineHeight * lineCount;

				ellips.text(fullText);

				var searchSpace = (text.indexOf(' ') !== -1 ) ? ' ' : '\u3000';
				var separateText = text.split(searchSpace);
				var str = '';


				console.time('ellipsis-foreach');

				for (var i = separateText.length; i >= 0; i--) {
					if (ellips[0].offsetHeight <= maxHeight) {
						console.log(i);
						break;
					} else {
						str = separateText.slice(0, i).join(searchSpace);

						ellips.text(str + '...');
					}
				}

				ellips.css('visibility', 'visible');

				console.timeEnd('ellipsis-foreach');
			}

			console.timeEnd('ellipsis');
		};

		ellipsis();
		$(window).on('resize', ellipsis);
	  
	});

На цикл тратится около где-то 30.60205078125ms.
На всю функцию - 36.9501953125ms

Как я увидел, значительное время уходит на эту строку
ellips.text(str + '...');

Что можно сделать? Как оптимизировать время работы метода text?

Ссылка на пример

Answer 1

[ns 5d]

var str = '';

for() {
    str += '...';
}

ellips.text(str);

Comments

[z_u_q]

ns 5d, Здравствуйте, спасибо за ответ. Что-то я туплю, куда это мне вставить в коде? это как отдельный цикл для str получается?

[ns 5d]

z_u_q, Проблема в том (одна из), что вы постоянно вызываете ellips.text() в цикле. Можно просто аккумулировать ее в переменной (str), а затем вне цикла один раз вызвать ellips.text()

var str = '';

      for (var i = separateText.length; i >= 0; i--) {
          if (ellips[0].offsetHeight <= maxHeight) {
            console.log(i);
            break;
          } else {
            /* Если тут можно результат аккумулировать в переменную str, то хорошо можно оптимизировать */ 
          }
        } /* for */

        ellips.text(str);

[ns 5d]

z_u_q, Я не знаю какой даст прирост данная оптимизация. Это напрашивающаяся оптимизация если Вы пишите "Как я увидел, значительное время уходит на эту строку "

Answer 2

[Ice]

быстрее использовать просто css text-overflow: ellipsis;
https://developer.mozilla.org/en-US/docs/Web/CSS/t...
или просто отрезать необходимое кол-во символов и добавить "..."
вот еще пример https://codepen.io/siiron/pen/jfBhy