DataTables + Font Awesome Performance Test: DT3beta v DT2.2.2

HTML

<script src="https://code.jquery.com/jquery-3.7.1.slim.js" integrity="sha256-UgvvN8vBkgO0luPSUl2s8TIlOSYRoGFAX4jlCIm9Adc=" crossorigin="anonymous"></script>


<!-- DataTables 3 beta -->
<link href="https://cdn.datatables.net/v/dt/dt-3.0.0-beta.2/datatables.min.css" rel="stylesheet" integrity="sha384-tLKnauoLdz/aakP+00ZPYfNEjH9C2JgxB7UwUcy3A7REuK2IUzqnrw9ZTNtuQERS" crossorigin="anonymous">
<script src="https://cdn.datatables.net/v/dt/dt-3.0.0-beta.2/datatables.min.js" integrity="sha384-HoL6dQNBnAKfnic9D7JK5KUAma6i+uAmpscrYD3GpOkrwLTogRJX4L8vBrEwFKIL" crossorigin="anonymous"></script>


 <!-- DataTables 2.2.2
    <link rel="stylesheet" href="https://cdn.datatables.net/2.2.2/css/dataTables.dataTables.css">
    <script src="https://cdn.datatables.net/2.2.2/js/dataTables.js"></script>
-->


<!-- Font Awesome 6.5.2 (JS-based, triggers MutationObserver) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/js/all.min.js" crossorigin="anonymous"></script>

    




<h2>DataTables + Font Awesome Performance Test</h2>

<table id="testTable"></table>

CSS

body { font-family: sans-serif; margin: 20px; }
        table { width: 100%; }

JavaScript

function generateTableData(count) {
    const rows = [];
    for (let i = 0; i < count; i++) {
        rows.push({
            id: i,
            name: "User " + i,
            status: i % 3 === 0 ? "I" : (i % 3 === 1 ? "D" : "U"),
            timestamp: Date.now() - (i * 1000000)
        });
    }
    return rows;
}

function escapeHTML(value) {
    return String(value ?? "")
        .replaceAll("&", "&amp;")
        .replaceAll("<", "&lt;")
        .replaceAll(">", "&gt;")
        .replaceAll('"', "&quot;")
        .replaceAll("'", "&#39;");
}

function iconForEvent(event) {
    switch (event) {
        case "I": return '<span class="fa fa-solid fa-circle-check"></span>';
        case "D": return '<span class="fa fa-solid fa-circle-xmark"></span>';
        case "U": return '<span class="fa fa-solid fa-circle-info"></span>';
        default:  return '<span class="fa fa-solid fa-question-circle"></span>';
    }
}

const data = generateTableData(1500);

function initTable() {
    // Reset table
    document.getElementById("testTable").innerHTML = "";

    const table = new DataTable("#testTable", {
        data: data,
        paging: false,
        autoWidth: false,
        columns: [
            {
                title: "ID",
                data: "id"
            },
            {
                title: "Name",
                data: "name",
                render: function(data, type) {
                    if (type === "display") {
                        return `<span>${escapeHTML(data)}</span>
                                <span class="ms-2"><i class="fa-solid fa-user"></i></span>`;
                    }
                    return data;
                }
            },
            {
                title: "Status",
                data: "status",
                render: function(data, type, row) {
                    if (type === "display") {
                        return `
                      ...