Fatal编程技术网

使用javascript构建表

javascript html firefox

使用javascript构建表,javascript,html,firefox,html-table,appendchild,Javascript,Html,Firefox,Html Table,Appendchild,我试图理解为什么在Firefox43.0.2上使用javascript重建一个表需要这么长时间 下面是我的代码的简化版本。“真实”代码和简单版本都使用“publishTable（）向表中添加行。publishTable删除一个表体元素（如果存在），创建一个新的表体元素，向其添加约9000行，并将完成的表体附加到表中 PublishTable在加载时运行，当用户单击“go”按钮时运行。因此，我希望加载和重建时的性能类似 当第一次加载“真实”页面时，Firefox[根据performance.now

我试图理解为什么在Firefox43.0.2上使用javascript重建一个表需要这么长时间

下面是我的代码的简化版本。“真实”代码和简单版本都使用“publishTable（）向表中添加行。publishTable删除一个表体元素（如果存在），创建一个新的表体元素，向其添加约9000行，并将完成的表体附加到表中

PublishTable在加载时运行，当用户单击“go”按钮时运行。因此，我希望加载和重建时的性能类似

当第一次加载“真实”页面时，Firefox[根据performance.now（）]大约需要300毫秒来构造表。当宣布此结果的警报（）关闭时，我可以立即上下滚动页面

但如果我点击“go”按钮重建表格，Firefox会在我关闭alert（）对话框后旋转数十秒（或更长时间）。一个“stop script？”对话框可能会出现多次。简单版本的行为类似

所以：
为什么初始构建和重新构建的性能有如此大的差异？显然可以在300ms内构建表！我能做些什么吗

进一步观察：
IE的性能在初始加载时差得多，在重建时也差得多。Chrome的性能相当不错：构建或重建需要2秒。

如果我使用innerHTML，而不是insertRow、appendChild等，结果是相似的

如果我拆下将表体固定到工作台的管路，则不会出现车轮打滑症状

在“瀑布”图中（在Firefox性能工具中），“DOM事件”比“事件处理程序”（我认为它涵盖了代码的运行时）占用的时间要多得多，我不知道这意味着什么。在js停止运行和DOM事件结束之间发生了什么，这不属于其他瀑布类别吗

DOM事件之后是重新计算样式的短暂时间、绘制的时间，然后是一系列的“循环收集”周期，然后是“增量gc”、“cc图形缩减”、“循环收集”、“图形缩减”等，持续数十秒。在一种情况下，性能调用树为“Gecko”分配了49秒（这似乎是空闲时间）和另外25秒的“图形”（在这段时间内，publishTable（）只分配了1秒）。这里有什么我可以采取行动的吗

对于进一步的分析，或者如何修改js，我没有合理的想法。我对性能信息的理解不够，无法对其采取行动。（现在，在与IE和Chrome进行计时后，我甚至不确定该向谁提出这个问题。）

代码中是否存在根本性错误？更好的表构造策略？使用性能工具来理解问题的方法？Firefox中的一个bug？（现在我将在服务器端做这件事。但我仍然好奇到底发生了什么。）


去

？

你好
（功能（）{
变量mmm=['1'、'2'、'3'、'4'、'5'、'6'、'7']；
函数publishTable（）{
//用户可能会多次运行，每次都会更改一些参数。
var tStart=performance.now（）；
var table=document.getElementById（'tideTable'）；
//var tableBody=table.getElementsByTagName（'tbody'）[0]；
var tableBody=table.tBodies[0]；
if（表体）{
tableBody.parentNode.removeChild（tableBody）；
}
showHeight（）；
tableBody=document.createElement（'tbody'）；
对于（变量i=0；i<8500；i++）{
appendTableRow（表体，毫米）；
}
table.appendChild（表体）；
document.getElementById（“btnGo”）.disabled=false；
警报（“时间：”+（performance.now（）-tStart）+“毫秒”）；
showHeight（）；
}
函数appendTableRow（表体、列）{
var细胞；
var-textNode；
var row=tableBody.insertRow（-1）；
对于（var i=0；i
我想，这可能是因为在插入新项目之前删除了现有项目。您可以尝试以下操作：

  • 如果只扩展表而不删除，请测量性能会发生什么变化

  • 在插入表格之前先构建表格，例如，制作一个变量tableContent，将行放入其中，然后将tableContent添加到表格中，这应该会更快，因为每次插入时浏览器都必须重新呈现页面

    • 我建议您考虑使用angurjs，如果您打算使表动态

    您的JS被缩小，在云前CDN。

    异步的

    推迟

    结果

    同样的时间

    Firefox加载时为142ms

    每次点击事件的平均值为230ms

    铬负载846ms

    每次点击事件的平均值为930ms

    将您的
    标签放在结束
    标签之前

    （函数（）{
变量mmm=['1'、'2'、'3'、'4'、'5'、'6'、'7']；
函数publishTable（）{
//用户可能会多次运行，每次都会更改一些参数。
var tStart=performance.now（）；
var table=document.getElementById（'tideTable'）；
var tableBody=table.getElementsByTagName（'tbody'）[0]；
if（表体）{
tableBody.parentNode.removeChild（tableBody）；
}
tableBody=document.createElement（'tbody'）；
for（var i=

    <!DOCTYPE html>    
<html>     
<head>    
<meta charset="UTF-8">    
</head>    
<body>    
<div id='a'>    
<button type="button" disabled id="btnGo">Go</button><br />    
    <button type="button"  id="btnQ">?</button><br />    
<table id="tideTable" style="Width:40%;margin-left:auto;margin-right:auto;">    
</table>    
</div>    
<div id="b">    
hello    
</div>    
<script>    
(function() {
var mmm = ['one', 'two', 'three', "four", "five", "six", "seven"];
function publishTable() {
//  The user may run this several times, varying some parameters each time.
    var tStart = performance.now();
    var table = document.getElementById('tideTable');
//  var tableBody = table.getElementsByTagName('tbody')[0];
    var tableBody = table.tBodies[0];
    if (tableBody) {
        tableBody.parentNode.removeChild(tableBody);
        }
    showHeight();
    tableBody = document.createElement('tbody');
    for (var i=0; i < 8500; i++) {
        appendTableRow(tableBody, mmm);
        }
    table.appendChild(tableBody);
    document.getElementById("btnGo").disabled = false;
    alert("Time: " + (performance.now() - tStart) +  "ms");
    showHeight();
}

function appendTableRow(tableBody, columns) {
    var cell;
    var textNode;
    var row = tableBody.insertRow(-1);
    for (var i = 0; i < columns.length; i++) {
        cell = row.insertCell(i);
        textNode = document.createTextNode(columns[i]);
        cell.appendChild(textNode);
    }
}
    function showHeight(){
        var el = document.getElementById('b');
        var topPos = el.offsetTop;
        alert("position: " + topPos);
    }

document.getElementById("btnGo").addEventListener("click", publishTable);
document.getElementById("btnQ").addEventListener("click", showHeight);
publishTable();
})();
</script>
</body>
</html> 

    

    var tableBody = table.getElementsByTagName('tbody')[0];

    

    var tableBody = table.tBodies[0];