focus() 或 select() 方法 javascript，Chrome 中的性能较慢答案

【问题标题】：focus() or select() method javascript, slow performance in Chromefocus() 或 select() 方法 javascript，Chrome 中的性能较慢
【发布时间】：2013-07-18 10:31:25
【问题描述】：

我注意到 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');

时间大约是：chrome 150ms，firefox 15ms。 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();

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

与 id 属性相同。

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

【问题讨论】：

也许吧，但我也认为这是输入数量的问题，我在同一页面中有大约 3000 个输入
如果我删除输入的名称属性会提高性能，大约 100 毫秒，如果我删除 id 会更好，但是我需要通过 id 访问以进行更多更改...

标签： javascript performance google-chrome select focus

【解决方案1】：

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

【讨论】：