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

Question

我正在开发一个web应用程序，允许用户查看并与以SVG格式显示的大型(代谢)网络进行交互。可以在这里查看链接。

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

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

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

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

我怀疑浏览器被页面上的元素数量所淹没(SVG地图有很多元素~3mb)，因此它不能立即对表单提交等事件做出反应。

Answer 1

尝试在点击事件中添加对话框，而不是在提交中:

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

查看是否对性能有帮助

Answer 2

问题在于网页上呈现的SVG的大小。当我尝试优化SVG数据时(我读取了许多元素)，延迟开始减少。