简体繁体 English

使用JavaScript进行海量数据渲染的性能

[英]Mass data rendering performance with JavaScript

原文 2012-10-10 21:25:52 0 2 javascript/ rendering

I am developing a special grid solution for a software product in javascript. 我正在为javascript中的软件产品开发特殊的网格解决方案。 The data are collected with a PHP script on the server side and pushed to JavaScript via a JSON array. 数据是通过服务器端的PHP脚本收集的，并通过JSON数组推送到JavaScript。 In my script I have to parse this array and render the grid rows. 在我的脚本中，我必须解析此数组并渲染网格行。 And here is my problem. 这是我的问题。 If I receive for example 4000 rows, javascript is rendering this very fast, but I think the bottleneck is the browser... 例如，如果我收到4000行，则javascript可以非常快速地呈现此行，但是我认为瓶颈是浏览器...

My question is, is it possible to render only the visible parts? 我的问题是，是否可以仅渲染可见部分？ I need to scroll to the other information, but the browser does not need to render it if it is not visible. 我需要滚动到其他信息，但是如果浏览器不可见，则不需要渲染它。 is it possible to render something outside of the viewport? 是否可以在视口之外渲染某些东西？

I need to set width and positions and this is only possible if I added the new element to the viewport and this is very slow by a huge mass on data... How could I solve this problem? 我需要设置宽度和位置，这只有在我将新元素添加到视口的情况下才有可能，而且由于大量数据，这非常缓慢...我该如何解决此问题？

2 个解决方案

The solution here might be to paginate your data on client side. 解决方案可能是在客户端分页数据。 That way, you can sort your object array with JS and simply insert a section of the data into the DOM at a time. 这样，您就可以使用JS对对象数组进行排序，并且只需一次将一部分数据插入DOM中即可。

Client side pagination library options have be discussed here . 客户端分页库选项已在此处讨论。

DOM updates are the slowest part of the chain. DOM更新是链中最慢的部分。 Process the result in memory and insert it into the DOM in one go if you can. 如果可以的话，将结果存储在内存中，并一次性将其插入DOM。