Benchmark: Vevet.SplitText vs SplitType vs GSAP.SplitText / Split into words and letters

HTML Preparation code:

<div id="container"></div>

<script src="https://cdn.jsdelivr.net/npm/vevet@5/lib/cdn/vevet.iife.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/SplitText.min.js"></script>
<script src="https://unpkg.com/split-type@0.3.4/umd/index.min.js"></script>

Script Preparation code:

function createText() {
	const container = document.getElementById('container');
	
	const element = document.createElement('div');
	element.setAttribute('id', 'split');
	element.innerHTML = 'Testing SplitText Performance <em>Between</em> Libraries. This <strong>benchmark</strong> includes <a href="#">links</a>, <em>italic</em>, and <u>underline</u>.';
	container.appendChild(element);
	
	return element;
}

Tests:

Vevet.SplitText
const element = createText(); const instance = new Vevet.SplitText({ container: document.getElementById("split"), letters: true, }); instance.destroy(); element.remove();
GSAP.SplitText
const element = createText(); const instance = SplitText.create("#split", { type: "words, chars" }); instance.revert(); element.remove();
SplitType
const element = createText(); const instance = new window.SplitType(document.getElementById("split"), { types: ['words', 'chars'] }); instance.revert(); element.remove();

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Vevet.SplitText
GSAP.SplitText
SplitType

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/144.0.0.0 Safari/537.36

Browser/OS: Chrome 144 on Windows

View result in a separate tab

Test name	Executions per second
Vevet.SplitText	6450.0 Ops/sec
GSAP.SplitText	1338.4 Ops/sec
SplitType	3397.0 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

LLMs can make mistakes. Check important info.

The provided code appears to be a benchmarking script for a text splitting library, possibly Vevet.SplitText or SplitType, which is used to split text into words and/or characters on different platforms.

Based on the code structure and syntax, I would recommend using the following approach to improve performance:

1.  **Minimize DOM Manipulation**: The provided code creates multiple elements for each word and character in the input text, which can lead to inefficient DOM updates and reflows.
2.  **Use Efficient Data Structures**: Consider using data structures like `Array` or `Set` to store the words and characters instead of creating objects for each individual element.
3.  **Reduce Function Call Overhead**: Minimize function calls by inlining or caching common operations.
4.  **Optimize for Mobile Devices**: Since Chrome Mobile 127 is specified as a benchmarking device, ensure that the code is optimized for mobile devices with limited resources.

However, without access to the actual library implementation and further information about the requirements, it's challenging to provide a more detailed analysis or concrete suggestions for improvement.

Related benchmarks:

Vevet.SplitText vs SplitType vs GSAP.SplitText / Split into words and letters (version: 3)

Comparing performance of: Vevet.SplitText vs GSAP.SplitText vs SplitType

Created: one year ago by: Registered User

Jump to the latest result

Vevet.SplitText

GSAP.SplitText

SplitType

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):