当HTML表很大时响应慢 [英] Slow response when the HTML table is big

问题描述

我正在一个网页上管理产品数据，其中所有产品都以4列（索引号，SKU，产品说明，库存）的表格显示。

我的问题是，当表非常长（〜1000产品现在），页面是非常慢（我有 tr：hover 通过CSS）。

要解决这个问题，最初我使用AJAX加载数据并存储在数组中，然后使用以下代码在向下滚动时显示数据：

  if（tablesDIV.scrollTop> = tablesDIV.scrollHeight  - （tablesDIV.clientHeight + 80））{
 / * ... * / 
} 
  

结束到达，它没有到达结束，当你加载所有数据页面再次减慢。

这个问题有一些有趣的解决方案吗？

编辑：已上传CSS代码 c> #tables thead th {border-bottom：1px solid #CCC; background-color：＃F5F5F5; background-image：-webkit-gradient（linear，left top，left bottom，from（＃F5F5F5），to（＃F1F1F1 ）;背景图像：-moz-线性梯度（顶部，＃F5F5F5，＃F1F1F1）;背景图像：-o-线性梯度（顶部，＃F5F5F5，＃F1F1F1）;背景图像： （top，＃F5F5F5，＃F1F1F1）; font-weight：700; cursor：default}
#tables tbody th {font-weight：700; text-overflow：none}
#tables tbody tr {背景：#FFF; cursor：pointer}
#tables tbody tr：nth-​​child（even）{background：＃F8F9FC}
#tables tbody tr：hover {background：#CDE}

EDIT2：添加了演示链接。

演示： http://jsfiddle.net/4dpGz/

解决方案

减慢循环的第一件事是 .insertRow（）。你在循环的顶部执行此操作，然后向其中添加单元格。在添加行之后，在添加每个单元格之后，浏览器正在进行布局计算。而是在循环结束时使用 .createElement（），然后使用 .appendChild（）。

演示： http://jsfiddle.net/ThinkingStiff/gyaGk/

替换：

  row = tableContent.insertRow（i）; 
  

有：

 code> row = document.createElement（'tr'）; 
  

并在循环结束时添加：

  tableContent.tBodies [0] .appendChild（row）; 
  

这将解决您的加载速度问题。对于悬停，你有太多的CSS规则影响使用标签选择器的 tr 和 td 元素。我删除了几个，并使用几个类，和悬停突出显示更快。具体来说，我注意到 td 元素的 overflow：hidden 大大减慢了它。考虑组合一些规则，使用更简单的选择器，以及为元素添加类以实现更快的CSS处理。在悬停期间，许多事情必须由布局引擎重新计算，并且CSS规则越少越好。当表中只有一个 tbody 时，我在代码中看到的一个例子是 #tables tbody tr #tables tr 已足够。比任何一个更好的是一个类。我在我的演示中使用了 .row 。

Google Page Speed ：

• 避免后代选择器： table tbody tr td


• 避免多余的祖先： body section article <（code> body 不需要）


• 避免使用通用（*）选择器： body *


• 避免使用标签选择器作为键（最右边）： ul li


• 避免子选择器或邻近选择器： ul> li> a


• 避免过度合格的选择器： form＃UserLogin （＃已经具体）


• 尽可能将您的规则设为特定（类别或编号）。

I'm working on a webpage where manage the products data, where all products are displayed in a table with 4 columns (index number, SKU, product description, stock).

The problem I have is that when the table is very long (~1000 product for now), the page is very slow (I have tr:hover efect made by CSS).

To resolve this, initially I used AJAX to load the data and stored in a array, then use the following code to displays the data when scrolling down:

 if (tablesDIV.scrollTop> = tablesDIV.scrollHeight - (tablesDIV.clientHeight + 80)) {
   /*...*/
 }

It gave a good results, but when you press "End" to reach down, it not reach the end, and when you load all data the page was slow down again.

Is there are some interesting solution to this problem?

EDIT: Uploaded CSS code.

#tables thead th{border-bottom:1px solid #CCC;background-color:#F5F5F5;background-image:-webkit-gradient(linear,left top,left bottom,from(#F5F5F5),to(#F1F1F1));background-image:-moz-linear-gradient(top,#F5F5F5,#F1F1F1);background-image:-o-linear-gradient(top,#F5F5F5,#F1F1F1);background-image:linear-gradient(top,#F5F5F5,#F1F1F1);font-weight:700;cursor:default}
#tables tbody th{font-weight:700;text-overflow:none}
#tables tbody tr{background:#FFF;cursor:pointer}
#tables tbody tr:nth-child(even){background:#F8F9FC}
#tables tbody tr:hover{background:#CDE}

EDIT2: Added a demo link.

Demo: http://jsfiddle.net/4dpGz/

解决方案

The first thing that is slowing your loop down is .insertRow(). You're doing this at the top of your loop and then adding cells to it. After the row is added, and after each cell is added, the browser is doing layout calculations. Instead use .createElement() and then .appendChild() at the end of your loop.

Demo: http://jsfiddle.net/ThinkingStiff/gyaGk/

Replace:

row = tableContent.insertRow(i);

With:

row = document.createElement('tr');

And add this at the end of your loop:

tableContent.tBodies[0].appendChild(row);

That will solve your loading speed issue. As for the hover, you have way too many CSS rules affecting your tr and td elements using tag selectors. I removed a few, and used classes on a few, and the hover highlighting is much faster. Specifically, I noticed that overflow: hidden on the td elements slowed it down considerably. Consider combining some of your rules, using simpler selectors, and adding classes to elements for quicker CSS processing. During hover many things have to be recalculated by the the layout engine, and the fewer CSS rules the better. One example I saw in your code was #tables tbody tr when there was only one tbody in the table. #tables tr would have sufficed. Better than either of those is a class. I used .row in my demo.

Best practices from Google Page Speed:

• Avoid descendant selectors: table tbody tr td
• Avoid redundant ancestors: body section article (body never needed)
• Avoid universal (*) selectors: body *
• Avoid tag selectors as the key (right-most): ul li
• Avoid child or adjacent selectors: ul > li > a
• Avoid overly qualified selectors: form#UserLogin (# is already specific)
• Make your rules as specific as possible (class or id).

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