优化。当用户提交表单时，加载对话框不会立即出现
我正在开发一个 Web 应用程序，该应用程序允许用户查看以 SVG 格式显示的大型（代谢）网络并与之交互。可以在此处查看链接。
我有相当大量的 jQuery 代码来处理不同的事件。特别是当用户提交表单时，会执行提交函数。我在该函数中做的第一件事是显示模式对话框，该对话框会阻止 UI 并告诉用户页面正在加载。
$('#indexForm').submit(function() {
dialog.dialog('open');
...
之后，该函数操作网页上的元素，通过 AJAX 加载大型网络 XML 并将其附加到页面。所有操作完成后，对话框消失，用户可以再次开始与页面交互。
我的问题在于单击提交按钮到显示对话框之间存在的延迟。用户按下提交后，UI 会冻结相当长的一段时间。
我怀疑浏览器被页面上的元素数量淹没（SVG 地图有很多元素~3mb），因此它无法对表单提交等事件立即做出反应。期待任何解释和建议来改进我的代码并解决这个问题。
I am working on a web application that allows user to view and interact with large (metabolic) networks displayed in SVG format. It can be viewd here link.
I have fairly large amount of jQuery code that handles different events. Particularly when user submits a form the submit function gets executed. The first thing I do in the function is display modal dialog that blocks UI and tells user that the page is loading.
$('#indexForm').submit(function() {
dialog.dialog('open');
...
After that the function manipulates elements on the webpage, loads large network XML via AJAX and appends it to the page. After all of the manipulations are complete the dialog disappears and user can start interacting with the page again.
My problem is in the latency that exists between the moment of clicking on submit button to the moment of showing the dialog. UI is frozen for a noticeable amount of time right after user presses submit.
I am suspecting that the browser is overwhelmed by the amount of elements that are on the page (SVG map has a lot of elements ~3mb) therefore it cannot react on the events like form submit immediately. Looking forward for any explanations and suggestions to improve my code and fix this problem.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
尝试添加您的对话框以在单击事件中打开，而不是在提交中打开，以便：
看看这是否有助于性能
try adding ur dialog to open on a click event and not within the submit so:
to see if that helps performance at all
问题在于网页上渲染的 SVG 的大小。一旦我尝试优化 SVG 数据（我读取了许多元素），延迟就开始减少。
The problem is in the size of the SVG rendered in on the webpage. Latency started to decrease once I tried to optimize the SVG data (I got read of many elements).