Benchmark: Vevet.SplitText vs SplitType vs GSAP.SplitText / Split into lines, 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, lines: true, }); instance.destroy(); element.remove();
GSAP.SplitText
const element = createText(); const instance = SplitText.create("#split", { type: "words, chars, lines" }); instance.revert(); element.remove();
SplitType
const element = createText(); const instance = new window.SplitType(document.getElementById("split"), { types: ['words', 'chars', 'lines'] }); 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	1515.6 Ops/sec
GSAP.SplitText	1016.7 Ops/sec
SplitType	1330.6 Ops/sec

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

LLMs can make mistakes. Check important info.

Based on the provided code, HTML, and benchmark data, I'll try to provide an answer.

**Code Analysis**

The code is written in JavaScript and appears to be a browser-based implementation of a text splitting library, `VevetSplitText`. It extends the functionality of another library, `SplitType`, by providing its own implementation. The code is well-structured, but some parts could be improved for better maintainability.

**HTML**

The HTML snippet contains a paragraph element with an ID of "split-text" and two buttons. The buttons are used to test the splitting functionality of the library.

**Benchmark Data**

The benchmark data shows the performance of the `Vevet.SplitText` and `SplitType` libraries on different browsers, devices, and operating systems. The results indicate that `Vevet.SplitText` is generally faster than `SplitType`.

**Question**

Without more context or specific questions about the code, HTML, or benchmark data, it's challenging to provide a definitive answer.

However, if you'd like to know:

1. **How to improve the performance of VevetSplitText**: Based on the benchmark results, you could consider optimizing the library's algorithms or using more efficient data structures.
2. **How to use SplitType**: You can refer to the `SplitType` documentation and usage examples to learn how to integrate it into your project.
3. **Comparison between Vevet.SplitText and SplitType**: You can analyze the benchmark results to determine which library is better suited for your specific use case.

If you have more specific questions or need further assistance, feel free to ask!

Related benchmarks:

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

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):