数据可视化Web应用程序的优化性能应用程序、性能、数据、Web

2023-09-10 14:38:15 作者:鹿还长别心凡i

我重写上面写着3年前一个数据可视化网络工具。自那时以来,浏览器的JavaScript引擎已经变得更快的方式,所以我想从服务器转移工作的一部分客户。

I'm rewriting a data visualisation web tool which was written 3 years ago. Since that time, JavaScript engine of browser have become way faster so i was thinking to transfer part of the job from server to client.

在页面,数据可视化在表中,并在图(或表),这是使用相同的数据,但是以不同的方式,以便在两个算法prepare用于显示的数据是不同的。

On the page, data is visualized in a table and in a map (or chart), it's using the same data, but in a different way so the two algorithm to prepare the data for display are different.

与数据下拉选择(3主+ 2sub取决于3个主要的)用户的每一次互动之前,3 Ajax请求被发送,PHP做所有的工作,并发送回只有necesary数据(以HTML为表/ XML图表)非常微小的反应,没有性能问题,JavaScript是附加的反应,做不了多少不是追逐变更事件。

Before at every interaction of the user with the data dropdown selectors (3 main + 2sub depending on the 3 main), 3 ajax request were sent, php doing all the work and sending back only necesary data (in html for the table/xml for the chart) very tiny response, no performance issue and javascript was appending response and doing not much more than chasing change events.

所以表现得不错,但在标准用户的每一个变化必须等待Ajax响应:/

So performance was ok but at every single change of criteria user has to wait for ajax response :/

现在我的想法就是发回一个JSON对象在一个Ajax请求,只在主3标准组合的每一个变化,然后有JavaScript的填充在表中的数据和的ajaxSuccess图表/地图,然后还要对变化的2个子标准。

Now my idea is to send back a json object in one ajax request, only at every change of the main 3 criteria combination and then have javascript populating the data in the table and the chart/map on ajaxsuccess and then also on change of the 2 sub criteria.

我犹豫涉及JSON的结构发送由服务器,有效负载的平衡。

My hesitation concerns the structure of the json send by the server, the balance of the payload.

事实上,如果有必要创造想要的JSON结构,以显示从原始数据中的数据只有一种算法,我将不得不PHP数据处理到该对象准备的JavaScript来解决它没有任何额外的处理;但也有2

Indeed, if there were only one algorithm necessary to create the wanted json structure to display the data from the raw data, i would have php processing the data into this object ready for javascript to deal with it without any additional treatment; but there are 2.

于是

如果我做PHP程序中的数据来创建2个对象(一个用于表/一为图),我会加倍JSON响应和放大器的尺寸;增加在客户端存储器使用;我不喜欢这种做法,因为这两个目标包含相同的数据,只是不同的结构和放大器;冗余是邪恶的,不是吗?

if I make php process the data to create 2 objects (one for table/one for chart), I will double the size of the json response & increase memory usage on the client side; i don't like this approach because this two object contain the same data, just structured differently & redundancy is evil, isn't it ?

如果我发送的原始对象,让JavaScript的搜索一下,以显示与在那里我给客户提供很多的工作 - 这也是在每个子标准的变化(或者我可以在一次创建所有的JSON对象的ajaxSuccess所以他们准备的情况下,这个子标准的变化) - 在这里,我有点担心,为用户提供旧的浏览器/小公羊...

if i send the raw object and let javascript search for what to display and where i'm giving lot of job to the client - this also at every subcriteria change (or i could create all the json objects once on ajaxsuccess so they are ready in case of this subcriteria change ?)- here i'm little worry for users with old browser/small ram...

(原始JSON对象进行治疗,根据标准3KB和12KB之间变化,500年至2000年和记录)

(The raw json object untreated, depending on criteria vary between 3kb and 12kb, between 500 and 2000 records)

我未能找出最好的方法......

I'm failing to spot the best approach...

因此​​,对于这个单一的原始数据到多个结构化对象的工作,你将有PHP(增加响应的大小和发送冗余数据)或JavaScript(增加JavaScript的有效载荷)处理原始数据?

So for this single raw data to multiple structured objects job, would you have php (increasing response size and sending redundant data) or javascript (increasing javascript payload) processing the raw data ?

由于一吨您的意见

推荐答案

我找到了一个合适的解决方案,所以我会回答我的问题。

I found an appropriate solution, so I will answer my own question.

我跟@ Daverandom的建议是:

I have followed @Daverandom's advice:

PHP发送原始数据(连同几个参数取决于主要标准组合) 科学家发现 上帝指纹

PHP sends raw data (along with a couple of parameters that depends on the combination of the main criteria)

JavaScript的处理原始数据,呈现在网页

JavaScript processes the raw data and render it in the page

的JavaScript重新处理原始数据,如果子标准被改变,如在测试循环过程显得十分快,不冻结的浏览器无论如何,所以没有必要保持结构化对象中的范围

JavaScript reprocesses the raw data if sub-criteria are changed, as upon testing the looping process appears to be very fast and doesn't freeze the browser whatsoever, so there is no need to keep the structured object in the scope

激进缓存头被发送的JSON Ajax响应(这些数据永远不会改变 - 唯一的新记录,每年都加)在已被征询的情况下用户再咨询谁的数据:所以原始数据不会保存在如果未显示它的JavaScript范围

Aggressive caching headers are sent with the JSON AJAX response (those data never change - only new records are added every year) in case user re-consults data that has already been consulted: so raw data is not kept in the JavaScript scope if it is not being displayed

在最重要的是,通过PHP呼应的JSON字符串被缓存在服务器上(因为这些数据不会改变),所以这减少了数据库的查询,提高了响应时间

On top of that, the JSON strings echoed by php are cached on the server (because those data never change) so this reduces database queries and improves response time

最后code是整洁,易于维护,并且应用程序完美的作品。

The final code is neat, easy to maintain, and the application works flawlessly.

感谢@Daverandom的帮助。

Thanks to @Daverandom for the help.