trjhtr

I made a function that makes font sizes in <div>s as big as possible without overflowing. It takes a long time to run. How do I optimize this?

$(document).ready(() => 
 $('.text-fit').each((index, element) => 
 let currentElement = $(element);
 let fontSize = 999;
 currentElement.wrapInner("<div class='wrapper'></div>");
 while (currentElement.find('.wrapper').innerHeight() > currentElement.innerHeight()) 
 fontSize -= 1;
 currentElement.css('font-size', fontSize + 'px');
 
 );
);

No particular comment on the style, but FWIW, I had to implement the same thing recently — also in jQuery — and this is how I did it. Assume we have an outer <div> named time_display_div that we don't want to overflow, and nested immediately inside that we have a <span> named time_display_span that we're trying to make as big as possible.

function effective_fraction(span, div) 
 var x = span.width() / div.width();
 var y = span.height() / div.height();
 return Math.max(x, y);


function update_display(msg) 
 // Change the text of the time display,
 // and massage the font size until it fills the screen.
 var div = $('#time_display_div');
 var span = $('#time_display_span');
 var font_size = parseInt(span.css('font-size'));
 span.text(msg);
 while (effective_fraction(span, div) < 0.90) 
 font_size += 10;
 span.css('font-size', font_size + 'px');
 
 while (effective_fraction(span, div) > 0.90) 
 font_size -= 2;
 span.css('font-size', font_size + 'px');
 

Basically the only difference is that I'm skipping through the sizes at ten times the speed you are; and I'm using .height() instead of .innerHeight(), but I can confirm that at least in Safari it makes no difference which one I use.

So at least if anyone comes up with a better solution here, it'll be useful to more people than just yourself. :)

How many .text-fit elements are there in the document? If there are many, then the first thing I'd do would remove adding the wrapper div dynamically, and instead put it into the HTML from the start.

Then, you are unnecessarily looking up the wrapper element in each loop. Just save an reference to the element before the loop and use that.

var w = currentElement.find('.wrapper');
while (w.innerHeight() > currentElement.innerHeight()) 
 // ...

Next, consider getting rid of jQuery. It's huge and slow and in most modern browsers it doesn't do much that you couldn't do directly on the DOM.

Finally the biggest problem is starting with the font size of 999px. I tried starting with the more reasonable 99px and that sped up the process considerably. If you actually need the text to be that big, you may want to try with a different step size other than 1px. For example, if you'd use a binary search, it will be much faster.