有很多输入时，Chrome会很慢 [英] Chrome is slow when there are a lot of inputs

问题描述

在我们的MVC5项目中，有一个用户可以检查多个资产的页面。
每个资产都通过复选框和名称代表。

当Chrome中的资产很多时（约为800-1000），Chrome变得非常缓慢。甚至有时会显示消息页面不负责任。

它看起来像这样：
- 页面部分呈现并在DIV上复选，复选框为
- 然后延迟30-40-50秒。有时会显示错误消息
- 呈现复选框和页面其余部分的DIV也会显示出来。

在bf和IE中它没问题。

预先感谢

我同意这不是一个好的用户体验，但在现阶段我需要解决这个问题。
这里是标记（这个div是4级嵌套）：

 < div class =list> 
 @for（int i = 0; i< Model.Items.Count; i ++）
 {
< text> 
 @ {var cid = Guid.NewGuid（）。ToString（）;} 
 @ Html.HiddenFor（m => Model.Items [i] .Id）
 @ Html.CheckBoxFor （m => Model.Items [i] .Selected，new {id = cid}）
< label for =@ cid> @ Trakopolis.WebSite.AppHelper.GetLocalizedString（Model.Items [i ] .Name）< / label>< br /> 
< / text> 
} 
< / div> 
  

解决方案

在带有数据属性的纯文本中，并且在点击时，临时添加输入元素，输入元素接受输入并将其发送到服务器（或者将其保存在使用服务工作者的异步索引数据库中）并删除自身或等待下一个输入。

 < td id =unique-id1data-url =/ actiondata-name =InputName> ;数据< / TD> 
  

In our MVC5 project there is a page where user can check multiple assets. Each asset is represeneted by checkbox and name.

When there are a lot of assets (about 800-1000) Chrome getting extremely slow. It's even sometimes show message that "page is unresponsible".

It looks like this: - page is partially rendered and stucked on DIV with checkboxes - then there is delay 30-40-50 sec. Sometimes error message - DIV with checkboxes rendered and rest of the page rendered too

In FF and IE it's ok.

Thanks in advance

I agree that it's not a good user experience, but at the current stage I need to solve this problem. Here is markup (this div is 4 level nested):

<div class="list">
        @for (int i = 0; i < Model.Items.Count; i++)
        {
            <text>
                @{var cid = Guid.NewGuid().ToString();}
                @Html.HiddenFor(m => Model.Items[i].Id)
                @Html.CheckBoxFor(m => Model.Items[i].Selected, new { id = cid })
                <label for="@cid">@Trakopolis.WebSite.AppHelper.GetLocalizedString(Model.Items[i].Name)</label><br />
            </text>
        }
    </div>

解决方案

You could try to use javascript for this where everything is in plain text with data attributes and on click, input element is temporarily added, the input element takes the input, sends it to the server (or saves it in indexeddb for async using a service worker) and removes itself or waits for next input.

<td id="unique-id1" data-url="/action" data-name="InputName">data</td>

这篇关于有很多输入时，Chrome会很慢的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！