Question

方案我想从片段构建表格：标题，从项目数组中的每一行，结束。然后将其添加到页面。

代码

最初，我尝试通过$("#output").append(piece)立即添加每个部分，但浏览器会自动关闭打开的代码。

所以，目前，我首先连接字符串然后设置html。据我所知，连接大量字符串的最佳方法是to accumulate them in array然后加入，因为fastest way to set html是使用innerHTML DOM属性：

// Big array of data objects
var items = [...]; // Big amount of items

// Class, which constructs HTML
var drawer = new UiDrawer();

// Generate
var result = [];

result.push( drawer.getHeader() ); // <table>

items.forEach(function (item) {
    result.push( drawer.getItem(item) ); // <tr> <td>item N</td> </tr>
});

result.push( drawer.getFooter() );

// Add to page
$("#output")[0].innerHTML = result.join(""); // </table>

这是一种正确的方法吗？我可以按顺序构造html，而不是先将它保留在数组中吗？

<小时/> 测试事项

因此，目前提到了三种方法：

数组和innerHTML的连接
文件碎片
jQuery DataTable插件

我创建了一个小页面来测试所有这些方法的效果： enter image description here

因此，数组连接可能是最快的方法。

这里是简单的代码，用于测试这些方法：

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.1/css/jquery.dataTables.css">       
        <script type="text/javascript" charset="utf8" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>       
        <script type="text/javascript" charset="utf8" src="http://cdn.datatables.net/1.10.1/js/jquery.dataTables.js"></script>
    </head>
    <body>
        <div id="meta"></div>
        <div id="output"></div>
        <script>
            var meta = document.getElementById("meta");
            var output = document.getElementById("output");
            var rowsNumber = 10000;

            var items = [];
            for (var i = 0; i < rowsNumber; i++) {
                items.push(["#" + i, "Simple item"]);
            }           

            // Evaluates given function
            var evaluateWay = function(name, func) {
                var start = new Date();

                for (var i = 0; i < 10; i++) {
                    func();
                    output.innerHTML = "";
                }

                var finish = new Date();

                meta.innerHTML += "Ten iterations to draw table with " + items.length + " rows via '" + name + "' way took " + (finish - start) + " ms<br />";
                output.innerHTML = "";
            };

            // Array concatenation
            evaluateWay("Array concatenation", function () {
                var result = [];

                result.push( "<table>" );

                items.forEach(function (item) {
                    result.push( "<tr> <td>" + item[0] + "</td><td>" + item[1] + "</td> </tr>" );
                });

                result.push( "</table>" );

                // Add to page
                output.innerHTML = result.join(""); // </table>
            });

            // Document Fragments
            evaluateWay("Document Fragments", function () {
                var table = document.createElement('table');

                items.forEach(function (item) {
                    var row = document.createElement('tr');

                    var cell1 = document.createElement('td');
                    var cell2 = document.createElement('td');
                    cell1.innerHTML = item[0];
                    cell2.innerHTML = item[1];
                    row.appendChild(cell1);
                    row.appendChild(cell2);

                    table.appendChild(row);
                });

                output.appendChild(table);
            });

            // jQuery Table Plugin
            evaluateWay("jQuery Table Plugin", function () {
                output.innerHTML = '<table id="myTable"></table>';
                $('#myTable').dataTable( {
                    "data": items,
                    "columns": [
                        { },
                        { },
                    ]
                } ); 
            });
        </script>
    </body>
</html>

Answer 1

我说的最快的方式是原生。

var items = ["a","b","c"];

var table = document.createElement('table');
var header = document.createElement('thead');
header.innerHTML = "<tr><td>Your Header</td></tr>";
var body = document.createElement('tbody');

items.forEach(function (item) {
    var row = document.createElement('tr');
    var cell = document.createElement('td');
    cell.innerHTML = item;
    row.appendChild(cell);
    body.appendChild(row);
});

table.appendChild(header);
table.appendChild(body);

document.getElementById('target').appendChild(table);

修改

如果你想快速预测你将数组中的元素连接到一个字符串的可能性，你可以运行这个脚本（也许最好把它放在一个大的foreach并取出一些平均值，我把它留给你:)） / p>
我的结果是 forEach 比 join 慢得多，但的比 join <快 / p>
// Prepare array var array = []; for(var i=0;i<10000;i++) { array[i] = "a"; } var string = ""; var timestart = 0; var timeend = 0; // misure join time timestart = window.performance.now(); string = array.join(""); timeend = window.performance.now(); joinTime = timeend-timestart; // misure foreach time string = ""; timestart = window.performance.now(); array.forEach(function (item) { string += item; }); timeend = window.performance.now(); foreachTime = timeend-timestart; // misure for time string = ""; timestart = window.performance.now(); for (i=0; i<array.length; i++) { string += array[i]; } timeend = window.performance.now(); forTime = timeend-timestart; alert("Join time: " + joinTime + "\nForeach time: " + foreachTime + "\nFor time: " + forTime);

Answer 2

您可以使用数据表插件，它可以处理更多数据。

请参阅链接了解更多详情http://www.datatables.net/

构建大型html表的最佳方法

2 个答案: