Benchmark: Multi-line detection methods #2

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'));

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Multi-line detection using getComputedStyles
Multi-line detection using the NYT method

Fastest: N/A

Slowest: N/A

ⓘ Get performance results from real users on your website with Request Metrics.

Website Performance Monitoring by Request Metrics

Latest run results:

Run details: (Test run date: 2 years ago)

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

Browser/OS: Firefox 98 on Ubuntu

View result in a separate tab

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

Multi-line detection methods #2 (version: 0)

Comparing performance of: Multi-line detection using getComputedStyles vs Multi-line detection using the NYT method

Created: 2 years ago by: Guest

Jump to the latest result

Multi-line detection using getComputedStyles

Multi-line detection using the NYT method

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A