Run results for: Multi-line detection methods #2

Run details:

User agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:98.0) Gecko/20100101 Firefox/98.0

Browser: Firefox 98

Operating system: Ubuntu

Device Platform: Desktop

Date tested: 2 years ago

Test name	Executions per second
Multi-line detection using getComputedStyles	198284.8 Ops/sec
Multi-line detection using the NYT method	2790.2 Ops/sec

HTML Preparation code:

<h2>This is a multi-<br/>line headline.</h2>

Tests:

Multi-line detection using getComputedStyles
function chekele(element) { var elementStyles = window.getComputedStyle(element); var elementLineHeight = parseInt(elementStyles['line-height'], 10); var elementHeight = parseInt(elementStyles['height'], 10); return elementLineHeight < elementHeight; } chekele(document.querySelector('h2'));
Multi-line detection using the NYT method
function chekele(element) { var firstWordHeight; var elementHeight; var HEIGHT_OFFSET; var elementWords; var firstWord; var ORIGINAL_ELEMENT_TEXT; ORIGINAL_ELEMENT_TEXT = element.innerHTML; // usually there is around a 5px discrepency between // the first word and the height of the whole headline // so subtract the height of the headline by 10 px and // we should be good HEIGHT_OFFSET = 10; // get all the words in the headline as // an array -- will include punctuation // // this is used to put the headline back together elementWords = element.innerHTML.split(' '); // make span for first word and give it an id // so we can access it in le dom firstWord = document.createElement('span'); firstWord.id = 'element-first-word'; firstWord.innerHTML = elementWords[0]; // this is the entire headline // as an array except for first word // // we will append it to the headline after the span elementWords = elementWords.slice(1); // empty the headline and append the span to it element.innerHTML = ''; element.appendChild(firstWord); // add the rest of the element back to it element.innerHTML += ' ' + elementWords.join(' '); // update the first word variable in the dom //firstWord = document.getElementById('element-first-word'); firstWordHeight = firstWord.offsetHeight; console.log(firstWord.offsetHeight); elementHeight = element.offsetHeight; // restore the original element text element.innerHTML = ORIGINAL_ELEMENT_TEXT; // compare the height of the element and the height of the first word return elementHeight - HEIGHT_OFFSET > firstWordHeight; } chekele(document.querySelector('h2'));

Run results for: Multi-line detection methods #2

Multi-line detection using getComputedStyles

Multi-line detection using the NYT method