优化。当用户提交表单时，加载对话框不会立即显示

Question

我正在开发一个Web应用程序，允许用户查看以SVG格式显示的大型（代谢）网络并与之交互。可在此处查看link。

我有相当多的jQuery代码来处理不同的事件。特别是当用户提交表单时，执行提交功能。我在函数中做的第一件事是显示模式对话框，它阻止UI并告诉用户页面正在加载。

 $('#indexForm').submit(function() {
    dialog.dialog('open');
  ...

之后，该函数处理网页上的元素，通过AJAX加载大型网络XML并将其附加到页面。完成所有操作后，对话框消失，用户可以再次开始与页面交互。

我的问题在于点击提交按钮到显示对话时刻之间存在的延迟。用户按下提交后，UI会被冻结一段相当长的时间。

我怀疑浏览器被页面上的元素数量所淹没（SVG地图有很多元素〜3mb）因此它无法立即对表格提交等事件做出反应。期待任何解释和建议，以改善我的代码并解决这个问题。

Answer 1

尝试添加您的对话框以在点击事件上打开，而不是在提交内：

$("#indexForm").click(function(){
       dialog.dialog('open');
});

看看这是否有助于提高绩效

Answer 2

问题在于在网页上呈现的SVG的大小。一旦我尝试优化SVG数据（我阅读了许多元素），延迟开始减少。