將onclick事件添加到大型html表格中的輸入元素會導致頁面渲染緩慢。如何提高性能？

在大的html表（大約2000行）中添加onclick事件來輸入元素（type = image）導致頁面渲染緩慢（在IE 9中）。輸入元素每行出現一次。如果我刪除onclick它呈現得很快。 onclick調用一個javascript函數。有沒有一種替代方法來附加不會減慢渲染速度的事件？ javascrpt函數在頭文件中包含的.js文件中，它會調用不同的頁面來加載div並將其顯示爲彈出對話框（jquery-ui對話框）。將onclick事件添加到大型html表格中的輸入元素會導致頁面渲染緩慢。如何提高性能？

<table class="tables_wrapper" style="width: 1450px; table-layout:fixed"> 
    <colgroup> 
     <col style="width: 150px; word-wrap:break-word; word-break: break-all; " /> 
     <col style="width: 150px; word-wrap:break-word; word-break: break-all; " /> 
     <col style="width: 150px; word-wrap:break-word; word-break: break-all; " /> 
     <col style="width: 150px; word-wrap:break-word; word-break: break-all; " /> 
     <col style="width: 150px; word-wrap:break-word; word-break: break-all; " /> 
     <col style="width: 30px; word-wrap:break-word; word-break: break-all; " /> 
     <col style="width: 30px; word-wrap:break-word; word-break: break-all; " /> 
     <col style="width: 30px; word-wrap:break-word; word-break: break-all; " /> 
     <col style="width: 100px; word-wrap:break-word; word-break: break-all; " /> 
     <col style="width: 150px; word-wrap:break-word; word-break: break-all; " /> 
     <col style="width: 30px; word-wrap:break-word; word-break: break-all; " /> 
     <col style="width: 30px; word-wrap:break-word; word-break: break-all; " /> 
     <col style="width: 100px; word-wrap:break-word; word-break: break-all; " /> 
     <col style="width: 100px; word-wrap:break-word; word-break: break-all; " /> 
     <col style="width: 100px; word-wrap:break-word; word-break: break-all; " /> 
    </colgroup> 
    <asp:Repeater runat="server" EnableViewState="false" ID="repeater1"> 
     <ItemTemplate> 
      <tr> 
       <td><%# ((User)Container.DataItem).Name%></td> 
       <td><%# ((User)Container.DataItem).Name1%></td> 
       <td><%# ((User)Container.DataItem).Name2%></td> 
       <td><%# ((User)Container.DataItem).Name3%></td> 
       <td><%# ((User)Container.DataItem).Name4%></td> 
       <td><%# ((User)Container.DataItem).Name5%></td> 
       <td><%# ((User)Container.DataItem).Name6%></td> 
       <td><input type="image" src="images/tick.png" alt="" onclick='ShowName("<%# ((User)Container.DataItem).Name7 %>", this); return false;' /></td> 
       <td><%# ((User)Container.DataItem).Name8%></td> 
       <td><%# ((User)Container.DataItem).Name9%></td> 
       <td><%# ((User)Container.DataItem).Name10%></td> 
       <td><%# ((User)Container.DataItem).Name11%></td> 
       <td><%# ((User)Container.DataItem).Name12%></td> 
       <td><%# ((User)Container.DataItem).Name13%></td> 
       <td><%# ((User)Container.DataItem).Name14%></td> 
      </tr> 
     </ItemTemplate> 
    </asp:Repeater> 
</table>

來源

2013-10-31 Nith

向我們展示你的代碼 –

向我們展示你是如何連接的事件處理程序。 – melancia

也向我們展示了你的函數在html中的位置（它是高於還是低於它）。 – PlantTheIdea

使用事件代表團，在這種情況下意味着將click事件處理的整個表和檢查從事件起源來決定採取何種行動的元素。

例如：

yourTable.onclick = function(e) { 
    e = e || window.event; 
    var target = e.target || e.srcElement; 
    if (target.nodeName.toLowerCase() == "input" && target.type == "image") { 
     alert("Image input clicked"); 
    } 
};

演示：http://jsfiddle.net/timdown/s5bDL/

來源

2013-10-31 14:19:37

添加僅僅一個事件處理程序;

function handle(e){ 
var img=e.target||window.event.srcElement; 
img.type!='image'||alert(img.src); 
//img.type!='image'||(YOURJQUERYFUNCTION()) 
} 
document.getElementsByTagName('table')[0].onclick=handle;

HTML

<table> 
<tr><td><input type="image" src="http://placekitten.com/50/50"></td><td>a2</td></tr> 
<tr><td><input type="image" src="http://placekitten.com/50/50"></td><td>b2</td></tr> 
</table>

例如

http://jsfiddle.net/rE9zd/

來源

2013-10-31 14:21:40 cocco

將onclick事件添加到大型html表格中的輸入元素會導致頁面渲染緩慢。如何提高性能？

回答

相關問題