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

2024-05-15

我正在重写 3 年前编写的数据可视化网络工具。从那时起,浏览器的 JavaScript 引擎变得更快,所以我正在考虑将部分工作从服务器转移到客户端。

在页面上,数据在表格和地图(或图表)中可视化,它使用相同的数据,但以不同的方式,因此准备显示数据的两种算法是不同的。

在用户与数据下拉选择器(3 个主 + 2 个子,取决于 3 个主)的每次交互之前,发送了 3 个 ajax 请求,php 完成所有工作并仅发送回必要的数据(在 html 中为表/xml 为图表)非常小的响应,没有性能问题,并且 javascript 附加响应并且除了追踪更改事件之外没有做更多的事情。

所以性能还可以,但每次标准更改时,用户都必须等待 ajax 响应:/

现在我的想法是在一个ajax请求中发送回一个json对象,仅在主要3个条件组合的每次更改时,然后让javascript在ajaxsuccess上填充表和图表/地图中的数据,然后在2个条件的更改时发送回一个json对象子标准。

我的犹豫涉及服务器发送的json的结构,负载的平衡。

事实上,如果只需要一种算法来创建所需的 json 结构来显示原始数据中的数据,我会让 php 将数据处理到这个对象中,以便 javascript 处理它,而无需任何额外的处理;但有2个。

So

  • 如果我让 php 处理数据来创建 2 个对象(一个用于表,一个用于图表),我会将 json 响应的大小加倍并增加客户端的内存使用量;我不喜欢这种方法,因为这两个对象包含相同的数据,只是结构不同并且冗余是邪恶的,不是吗?

  • 如果我发送原始对象并让 javascript 搜索要显示的内容以及我在哪里为客户端提供大量工作 - 这也是在每个子标准更改时(或者我可以在 ajaxsuccess 上创建一次所有 json 对象,以便它们准备好这个子标准发生变化的情况?)-在这里我对使用旧浏览器/小内存的用户不担心......

(未经处理的原始json对象,根据标准在3kb到12kb之间变化,在500到2000条记录之间变化)

我无法找到最好的方法......

因此,对于将单个原始数据发送到多个结构化对象的作业,您是否需要使用 php(增加响应大小并发送冗余数据)或 javascript(增加 javascript 有效负载)来处理原始数据?

非常感谢您的意见


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

我遵循了@Daverandom的建议:

  • PHP 发送原始数据(以及几个取决于主要标准组合的参数)

  • JavaScript 处理原始数据并将其呈现在页面中

  • 如果子标准发生更改,JavaScript 会重新处理原始数据,因为在测试时,循环过程似乎非常快,并且不会冻结浏览器,因此无需将结构化对象保留在范围内

  • 积极的缓存标头与 JSON AJAX 响应一起发送(这些数据永远不会改变 - 每年只会添加新记录),以防用户重新查询已经查询过的数据:因此,如果原始数据是这样,则原始数据不会保留在 JavaScript 范围中不显示

  • 最重要的是,php 回显的 JSON 字符串缓存在服务器上(因为这些数据永远不会改变),因此这减少了数据库查询并提高了响应时间

最终的代码整洁、易于维护,并且应用程序运行完美。

感谢@Daverandom 的帮助。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

优化数据可视化 Web 应用程序的性能 的相关文章

  • .points 不透明度/大小在三个.js 内

    我回来回答有关 points 的第二个问题 这次想知道如何将不透明度从 0 更改为 1 然后又回到距发射器的特定像素距离内 var particleCount 14 particles new THREE Geometry pMateria
  • 如何下载临时文件

    我正在尝试创建一个简短的 PHP 脚本 该脚本采用 JSON 字符串 将其转换为 CSV 格式 使用fputcsv 并使该 CSV 可作为下载的 csv 文件使用 我的想法是使用tmpfile 不用担心 cronjobs 或磁盘空间不足 但
  • 如何知道 .keyup() 是否是字符键(jQuery)

    如何知道 keyup 是否是字符键 jQuery input keyup function if key is a character such as a b A b c 5 3 2 etc not enter key or shift o
  • 如何使用 PHP 将字符串按大写字母分解?

    我有一个字符串 CamelCaseString 我想对大写字母进行explode split 或一些更好的方法来将该字符串分解为单个单词 最简单的方法是什么 解决方案更新 此链接指向一个略有不同的问题 但我认为答案通常比本页当前问题的答案更
  • ES6 模块范围

    我有代码 lib js var a a export var b b main js console log a a variable is not available in a global scope import b from lib
  • 如何在React中动态分配属性?

    这是一个有两个参数的函数 我要创建的标签的名称 具有以下属性的对象 Using React 我创建一个组件并将该元素渲染到 DOM 问题是我想向元素添加属性 但它不允许循环在元素内设置属性 var Element function elem
  • Angular JS - 使服务可以从控制器和视图全局访问

    假设我们有以下服务 myApp factory FooService function 然后 从控制器中 我会说 myApp controller FooCtrl scope FooService function scope FooSer
  • 如何从 CSS 选择器中提取类名?

    故事 我目前正在构建一个 ESLint 规则 以警告在 CSS 选择器定位器中使用引导布局导向和角度技术类 目前我在字符串方法中使用简单的子字符串 for var i 0 i lt prohibitedClasses length i if
  • 为什么 call 比 apply 快那么多?

    我想知道是否有人知道why call比apply 在 Chrome 中 速度大约快 4 倍 在 Firefox 中快 30 倍 我什至可以制作自定义原型 apply2 在大多数情况下 运行速度是apply 这个想法取自角度 Function
  • MySQL如何从多个表中获取数据

    我正在寻找 php MySQL jquery 的帮助 我有2张桌子 table1表 1 有 4 列 id 标题 desc thumb img tabel2表 2 有 3 列 id 表 id img 我只想将 2 个表与 get QS 的值进
  • 从网页运行 ClickOnce 应用程序,无需用户操作

    我们有一个基于 Java 的 Web 应用程序以及用 C 编写的相同应用程序 如果 java 检查器发现客户端计算机上没有安装 Java 则应该运行该应用程序 这个想法是运行 C 单击一次 http en wikipedia org wik
  • 轮播滑动(未滑动)事件上的火灾事件,Bootstrap 3

    Bootstrap 2 似乎可以很好地处理幻灯片事件 请参阅这个问题 https stackoverflow com questions 9651466 how to attach slide slid events to the boot
  • 致命错误 - 未找到“Mongo”类

    我正在尝试执行此操作 但我收到以下错误 致命错误 在 C wamp www 中找不到类 Mongo Info PHP 5 38 MongoDB mongodb win32 i386 2 0 2 MongoDB PHP 驱动程序 mongo
  • 如何将MathJax公式转换为img

    Mathjax 现在在我的项目中运行良好 但有一个问题 有没有办法将MathJax的公式 纯html和css 转换成img文件 我可以保存 MathJax 可以配置为生成 SVG 看http docs mathjax org en late
  • Symfony VS CakePHP:哪一个最接近 PHP [关闭]

    Closed 这个问题是基于意见的 help closed questions 目前不接受答案 我主要是一名 Rails 开发人员 但有时 我必须使用 PHP 进行编码 因为 stackoverflow com更喜欢可以回答的问题 我想知道
  • Elm:如何从 JSON API 解码数据

    我有这个数据使用http jsonapi org http jsonapi org format data type prospect id 1 attributes provider user id 1 provider facebook
  • Vue - 调度完成后调用 store getter?

    我正在使用 Laravel 5 7 Vue2 Vuex 我在调度调用完成后让 Vue 返回存储值时遇到一些困难 我的申请流程如下 我单击一个提交按钮 该按钮调用组件上的 validate Validate 分派到我的 addLease 操作
  • 如何缩短 PHP if 语句?

    我有一个 if 语句 我需要将单个字符串与许多不同的选项进行比较 我在下面发布的代码非常清楚地表明了我的意思 我知道有两种方法可以做到这一点 但另一种甚至更长 那么 是否有任何函数可以以更短的方式实现类似的功能 我的要求可能看起来很愚蠢 但
  • 如果 POST 响应仅包含 ID,如何将数据保存到我的 Ember 存储?

    Ember 数据期望我的服务器在每次成功后返回完整的对象POST 但是 我的 API 只返回一种元对象 其中包含id 当 Ember 收到此对象时 记录中的现有数据将被删除 除了id 例如 当我这样做时 var asset App Asse
  • 如何在单元测试中使用 JSON 发送请求

    我的 Flask 应用程序中有在请求中使用 JSON 的代码 我可以像这样获取 JSON 对象 Request request get json 这一直工作得很好 但是我正在尝试使用 Python 的 unittest 模块创建单元测试 但

随机推荐

  • 静态文件不通过 IIS 提供服务,而是通过 localhost 提供服务 - ASP.NET Core 3.1 MVC 和 C#

    我是编程新手 我能够自己解决大部分问题 但这个问题超出了我的想象 我正在使用 Visual Studio 在本地运行我的应用程序 当我在 VS 中单击 IIS Express 来运行该应用程序时 该应用程序将在带有 url 的浏览器中打开h
  • 在Vim函数中获取不带文件扩展名的文件名

    我想在Vim中获取不带文件扩展名的文件名 我在我的中编写了以下函数 vimrc文件来编译并运行Java程序 function JAVA RUN javac M endfunction map
  • 使用 graphql 提供图像

    I have graphql服务器由表达Graphql我使用 mongoDb 将图像存储在普通数据库集合中 因为它们小于 16MB I have react and android应用程序 向客户提供这些图像的最佳方式是什么 在我的架构中
  • 模型元中的“可交换”是什么?

    看着艰难的 django auth 模型代码 我遇到了这段代码 class User AbstractUser class Meta AbstractUser Meta swappable AUTH USER MODEL 很明显 这和新的有
  • 使用 Ajax 在输入时提交 Textarea,然后渲染部分内容而不刷新整个页面

    目前我正在尝试通过 JS 和 Ajax 在没有提交按钮的情况下发表评论 并且它有效 问题是当帖子提交时 页面重新加载到 post id comment页面 我希望它呈现部分内容 而不是刷新整个页面或将我带到不同的页面 我对 JS 不熟悉 任
  • Android studio - 如何保存先前活动中选择的数据

    这是我的代码片段 这Textview充当按钮并具有Onclicklistner在他们 当cpu1000时Textview单击它会导致cpu g1000其代码如下所示的类 public class Game 1000 extends AppC
  • Chrome 中的错误或 CSS 错误? (隐藏可见性的锚点)

    在任何 HTML 中测试这个简单的行 a href anything span insible text here span a 您可以直接从这里测试 http jsfiddle net wqS3E http jsfiddle net wq
  • SQLite FTS4 使用特殊字符进行搜索

    我有一个 Android 应用程序 它使用 FTS4 虚拟表在 SQLite 数据库中搜索数据 它工作正常 但是当表中的数据包含特殊字符 如 或 时 SQLite MATCH 函数不会给出任何结果 我现在迷路了 谢谢 注意 默认的分词器真的
  • C# Byte[] 转 BCD 和 BCD 转 INT

    我有一个由 CashRegister Machine 创建的 Hex 文件 我必须读入这个文件 文件使用下面详述的格式 它就像套接字数据包 代码数据 2字节PLU 代码数据 7 字节单价数据 5字节数量数据 5字节数据总量 5字节PLU 名
  • 更新到 Kotlin 1.3.30 后出现“未解析的引用:Parcelize”

    我使用 Kotlin 1 3 21 很长时间了kotlin android extensions插件长期处于实验模式 今天我通过升级版本切换到 Kotlin 1 3 30 现在无论我使用什么 Parcelize注释我看到错误 Unresol
  • 如何使用 conda 在一行中安装多个包?

    我需要使用 conda 安装以下多个软件包 我不确定 conda forge 是什么 有些使用 conda forge 有些不使用它 是否可以将它们安装成一行而不需要一一安装 谢谢 conda install c conda forge d
  • 从 MATLAB 调用 Java?

    我想要Matlab程序调用java文件 最好有一个例子 需要考虑三种情况 Java 内置库 也就是说 任何描述的here http docs oracle com javase 6 docs api 这些项目可以直接调用 例如 map ja
  • 如何在react-select v2中创建optgroup?

    我想在我的反应选择列表中包含 optgroups 但它似乎没有记录在任何地方 我有以下结构 是从评论中提取的https github com JedWatson react select issues 59 https github com
  • 如何强制 Meteor 重新加载订阅?

    在我的应用程序中 sections是一个链接到的集合courses通过一个名为course sectionIds 初始加载工作正常 但在管理面板中添加部分时遇到非反应式连接问题 这是路线 route adminCourse path adm
  • 查找并替换目录中所有 Excel 文件工作簿中的字符串

    我正在编写 VBA 代码来替换位于特定目录中的多个 Excel 文件 工作簿 中的特定字符串 我尝试在 Stack Overflow 上搜索 找到答案 但这与通过 Excel 中的宏替换文本文件中的字符串有关 相同的链接是查找并替换文件中的
  • 将巨大的模式编译成Java

    有两个主要工具提供了将 XSD 模式编译为 Java 的方法 xmlbeans 和 JAXB 问题是 XSD 模式确实很大 30MB 的 XML 文件 大部分模式在我的项目中没有使用 所以我可以注释掉大部分代码 但这不是一个好的解决方案 目
  • 在 Highcharts (React Native) 上触发点击事件时,无法执行除“警报”之外的任何其他操作

    我在 React Native 中使用 Highcharts 对于条形图 我定义了以下单击事件 plotOptions series cursor pointer point events click gt alert Clicked 我想
  • 循环内的局部变量会被垃圾收集吗?

    我想知道将循环内引用的任何变量放在循环外是否更有效 或者它们可以像函数内的变量一样被垃圾收集吗 var obj key val for var i 0 i lt 10 i console log obj or for var i 0 i l
  • pandas Wide_to_long 后缀参数

    我对在 pandas 中使用 Wide to long 时的参数有疑问 有一个参数叫suffix我不明白 在文档中它说 后缀 str 默认 d 捕获所需后缀的正则表达式 d 捕获数字后缀 没有数字的后缀可以用否定字符类 D 指定 您还可以进
  • 优化数据可视化 Web 应用程序的性能

    我正在重写 3 年前编写的数据可视化网络工具 从那时起 浏览器的 JavaScript 引擎变得更快 所以我正在考虑将部分工作从服务器转移到客户端 在页面上 数据在表格和地图 或图表 中可视化 它使用相同的数据 但以不同的方式 因此准备显示