Benchmark: split chunk by splice vs slice

split chunk by splice vs slice (version: 0)

CHUNK_SIZE(500)개씩 registrationId를 끊어서 보내는 방법을 아래와 같이 시도 1. slice로 구간마다 복사 (공간사용 증가, 소요시간 짧을 것으로 예측) 2. 500개씩 앞에서부터 splice (최소한의 공간 사용, 삭제위치 이후 보존할 요소들을 전부 이동하느라 소요시간 길 것으로 예측) 3. 500개씩 뒤에서부터 splice (최소한의 공간 사용, 삭제위치 이후 요소 이동 필요 없어 소요시간 중간 정도로 예측)

Comparing performance of: slice vs splice from the beginning vs splice from the end

Created: 3 years ago by: Guest

Jump to the latest result

Script Preparation code:

var CHUNK_SIZE = 500;
var list = [];
for (var i = 0; i < 1E6; i++) {
    list.push(i);
}

Tests:

slice
let chunks = []; let chunkStartIndex = 0; while (chunkStartIndex < list.length) { chunks.push(list.slice(chunkStartIndex, chunkStartIndex += CHUNK_SIZE)); }
splice from the beginning
let chunks = []; while (list.length) { chunks.push(list.splice(0, CHUNK_SIZE)); }
splice from the end
const remainder = list.length % CHUNK_SIZE; let chunkIndex = Math.ceil(list.length / CHUNK_SIZE); let chunks = new Array(chunkIndex); if (remainder) chunks[--chunkIndex] = list.splice(list.length - remainder); while (--chunkIndex >= 0) chunks[chunkIndex] = list.splice(chunkIndex * CHUNK_SIZE);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
slice
splice from the beginning
splice from the end

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

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

Browser/OS: Chrome 114 on Windows

View result in a separate tab

Test name	Executions per second
slice	2118.0 Ops/sec
splice from the beginning	25574606.0 Ops/sec
splice from the end	3614638.2 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down what's being tested in this benchmark.

The main objective of this benchmark is to compare three different approaches for splitting an array into chunks:

1. **Slice**: Create new arrays for each chunk using `list.slice(chunkStartIndex, chunkStartIndex += CHUNK_SIZE)`.
2. **Splice from the beginning**: Remove elements from the original array using `list.splice(0, CHUNK_SIZE)` and create a new array with these removed elements.
3. **Splice from the end**: First, calculate how many full chunks can be created by dividing the length of the array by the chunk size (`chunkIndex`). Then, if there are remaining elements, remove them using `list.splice(list.length - remainder)`. Finally, create a new array with these removed elements.

**Options Comparison**

*   **Pros and Cons:**
    *   **Slice**: Creates new arrays for each chunk, which can lead to memory overhead. However, it's often faster than modifying the original array.
        *   **Pros:** Fast and efficient; doesn't modify the original array.
        *   **Cons:** Memory overhead due to creating multiple arrays.
    *   **Splice from the beginning**: Modifies the original array by removing elements, which can be slower due to string slicing operations. However, it's more memory-efficient compared to slice.
        *   **Pros:** Less memory overhead; modifies the original array, potentially reducing memory allocation.
        *   **Cons:** Can be slower due to string slicing operations and modifying the original array.
    *   **Splice from the end**: Similar to "splice from the beginning", but calculates the number of full chunks first and then removes elements at the end. This approach reduces the number of string slicing operations, making it more efficient.
        *   **Pros:** Reduces memory overhead; modifies the original array efficiently.
        *   **Cons:** Still requires calculating `chunkIndex`, which can be slower for large arrays.

**Library Considerations**

There are no libraries mentioned in this benchmark. The tests only use built-in JavaScript methods (`slice()` and `splice()`).

**Special JS Features/Syntax (Not mentioned)**

No special JavaScript features or syntax are used in this benchmark.

**Other Alternatives**

If you were to implement this benchmark from scratch, here's an alternative approach:

*   **Split array into chunks using a custom function**: Instead of using slice and splice methods, create a custom function that splits the array into chunks.
*   **Use Array.prototype.forEach() with map()**: Use `forEach()` to iterate over the original array, and `map()` to create new arrays for each chunk. This approach is more concise than using slice and splice.

Example code:
```javascript
function splitArrayIntoChunks(arr, chunkSize) {
    const chunks = [];
    let currentChunkIndex = 0;

arr.forEach((element) => {
        if (currentChunkIndex >= 0 && currentChunkIndex < chunkSize) {
            // Push a partial chunk to the result array.
            if (!chunks[currentChunkIndex]) chunks[currentChunkIndex] = [];
            chunks[currentChunkIndex].push(element);
        } else {
            // Create a new full chunk and push it into the array of chunks.
            const newChunk = arr.slice(currentChunkIndex, currentChunkIndex + chunkSize);
            chunks.push(newChunk);

currentChunkIndex += chunkSize;
        }
    });

return chunks;
}

// Usage:
const result = splitArrayIntoChunks([1, 2, 3, 4, 5], 2);
console.log(result); // Output: [[1, 2], [3, 4], [5]]
```
This alternative approach is more verbose than the original benchmark but provides a good opportunity to illustrate how you might implement chunking in an array using custom code.

Related benchmarks:

split chunk by splice vs slice (version: 0)

Comparing performance of: slice vs splice from the beginning vs splice from the end

Created: 3 years ago by: Guest

Jump to the latest result

slice

splice from the beginning

splice from the end

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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