html - Chrome 中的慢速聚焦输入字段

Question

我有一个包含 2 列的大数据表，用于存储输入字段 (type="text")，没有事件，只有 HTML 和 CSS 焦点和悬停属性，所以这里是 HTML:

            <tr <?=($pKey%2!=0)?'style="background-color:#eee;"':''?>>
               <td>
 Some data: 
               </td>
               <td>
 Some data: 
               </td>               
               <td width="200">
                  <input type="hidden" name="cyber_id[]" value="<?=$pVal?>"/>

                  <input name="bank_commission[]" type="text" class="bank_commission" value=""/>
               </td>
               <td>
                  <input name="bank_reward[]" type="text" class="bank_reward" value=""/>          
               </td>               
            </tr>

每个字段的 CSS:

input {
    border: 1px solid #888;
    font: normal 14px Tahoma;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    /*behavior: url(/style/PIE.php);*/
    padding: 3px;
    color: #555;
    outline: 0 none;
}

input:hover {
    border: 1px solid #0075BB;
    font: normal 14px Tahoma;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    /*behavior: url(/style/PIE.php);*/
    padding: 3px;
    outline: 0 none;
}
input:focus {
    border: 1px solid #0075BB;
}

确切的问题是，当我单击该字段时，光标会在 2-4 秒后显示，这对用户来说不是一件好事。 bank_commission 和 bank_reward 都没有 CSS，所以这不是重点。

Answer 1

太多的表单元素和太多的表格元素肯定会占用浏览器......你为什么不尝试以 block 的形式显示数据......比如说以 100 行的 block 并添加延迟加载来加载下一 block 数据...而且如果您将表格布局转换为 div 布局，那么它也会使页面更轻。