Question

嗯，我注意到Chrome中的性能问题，如果我这样做：

console.time('someFunction timer');

//one of both

//document.getElementById("R_"+row+"_C_"+(col+1)+"_D_"+day).focus();
document.getElementById("R_"+row+"_C_"+(col+1)+"_D_"+day).select();
console.timeEnd('someFunction timer');

时间约为：镀铬150毫秒，火狐只需15毫秒。 chrome中的focus（）方法或select（）方法有问题吗？

如果我使用jQuery时间类似于：

console.time('someFunction timer');

//one of both

//$("#R_"+row+"_C_"+(col+1)+"_D_"+day).focus();
$("#R_"+row+"_C_"+(col+1)+"_D_"+day).select();
console.timeEnd('someFunction timer');

已解决临时性：

我发现了一个临时解决方案，问题在于Chrome，当处理许多（数千）输入文本时，问题进展缓慢。我的解决方案是删除表单标签，然后当我单击提交按钮时，使用jQuery捕获它并创建一个新表单，并附加到正文，然后仅使用更改的输入提交此新表单。

             for (var z=1;z<=48;z++){
                 var select = $("#R_"+i+"_C_"+z+"_D_"+day);
                 bodyform += '<input type="text" name="ID_'+select.data("idp")+'_C_'+select.data("coll")+'_D_'+day+'_H_'+z+'" value="'+select.val()+'"/>';
            }

            $("#plantables").append('<form id="myForm" style="margin: 0px;" action="{{ path(app.request.attributes.get('_route') , {'shop':app.request.get('shop'),'iduniverse': universe.iduniverso}) }}" method="post">'+bodyform+'</form>');
            //$("#plantables").after('</form>');
            $("#myForm").submit();

另一个技巧是删除输入的名称属性，我看到如果存在降低速度，但问题是当你需要发送表单时，此输入不会附加到post，但如果在发送之前命名，则解决它

与id属性相同。

Firefox或IExplorer可以很好地处理表单和输入。

Answer 1

focus（）是dom API。它负责元素的重排。它重新计算元素的位置并阻止浏览器执行任何其他操作。负责回流的方法很少。您可以在这里查看： https://gist.github.com/paulirish/5d52fb081b3570c81e3a

focus（）或select（）方法javascript，Chrome中的性能降低

1 个答案: