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

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"), }); instance.destroy(); element.remove();
GSAP.SplitText
const element = createText(); const instance = SplitText.create("#split", { type: "words" }); instance.revert(); element.remove();
SplitType
const element = createText(); const instance = new window.SplitType(document.getElementById("split"), { types: ['words'] }); 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	12820.5 Ops/sec
GSAP.SplitText	2874.6 Ops/sec
SplitType	6817.8 Ops/sec

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

LLMs can make mistakes. Check important info.

The given code appears to be implementing the `Vevet.SplitText` component, which is likely used for splitting text into words or lines. The code includes a JavaScript module that creates a split text effect with customizable options.

**Code Analysis:**

1.  **Initialization**: The `Vevet.SplitText` component is initialized by creating an instance of the `SplitType` class, passing the container element and an options object with specific settings (e.g., `hasLetters`, `hasLines`).
2.  **Helper Function**: A helper function (`a`) is defined to iterate over child nodes and append text elements to the container.
3.  **Line Splitter Logic**: The code includes a line splitter logic, which checks if a node is an HTML element or has a `nodeType` of 3 (a text node). If it's neither, it creates a new text element and appends it to the container.
4.  **Benchmarking**: Two test cases are provided for benchmarking: one with `hasLetters` set to `false` and another with `types` set to `['words']`.

**Test Cases:**

The two test cases demonstrate different scenarios:

1.  **Vevet.SplitText Test Case**: This test case checks the performance of the `Vevet.SplitText` component when initialized with `hasLetters` set to `false`. The test creates an instance, destroys it, and measures the execution time.
2.  **SplitType Test Case**: This test case benchmarks the SplitType library by creating an instance with a specific configuration (`types: ['words']`) and measuring its performance.

**Latest Benchmark Result:**

The latest benchmark result shows two executions per second for both tests:

*   `Vevet.SplitText`: 3293.05908203125 executions per second
*   `SplitType`: 1101.359130859375 executions per second

These results indicate the relative performance of each library under different conditions.

**Recommendations:**

Based on these test cases and benchmarking results, consider using **Vevet.SplitText** when:

*   You need to split text into words or lines with customizable options.
*   Performance is a top priority, as `Vevet.SplitText` seems to outperform SplitType in this scenario.

When choosing between the two libraries, evaluate your specific requirements and trade-offs.

Related benchmarks:

Vevet.SplitText vs SplitType vs GSAP.SplitText / Split into words (version: 4)

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