如果表单包含大表格，则使用提交按钮提交 HTML 表单需要 15 秒答案

【问题标题】：HTML form taking 15 seconds to submit using submit button if form contains large table如果表单包含大表格，则使用提交按钮提交 HTML 表单需要 15 秒
【发布时间】：2019-05-16 20:41:01
【问题描述】：

我有一个非常标准的表格

<form name="mainContent" id="mainContent" action="/mySite/reporting/index.html" method="post">

我在这个表单中有一个提交按钮

<button type="submit" name="SubmitButton">Submit</button>

通常，如果我的表单很空，一切都会按预期工作。但有时我的表单包含一个非常大的表格（大约 100 行和 75 列），我注意到从我点击提交到请求实际出现在 chrome 的网络选项卡中的时间，浏览器完全冻结了大约 15 秒。

我尝试在按钮上放置一个事件监听器，可以看到只要按下按钮就立即触发了事件监听器。如果我使用 jquery 删除表然后按提交，浏览器会立即提交请求，所以我认为这种冻结是由于浏览器对这个大表做了一些事情。

奇怪的是使用 jquery.remove() 删除表只需要不到一秒钟的时间。所以我不明白 html 表单在做什么会在重新提交表单之前冻结浏览器 15 秒

【问题讨论】：

嗨，也许可以使用profiler 看看会发生什么？
表格是否包含表单域？
恕我直言，我认为这是正在发生的事情——从技术上讲，当您点击提交 ..您已经联系了“下一个”页面。在这种情况下：/mySite/reporting/index.html 正在发生的事情是 index.html 正在处理这些表格元素，而您的浏览器正在等待来自 index.html 的响应。所以它似乎您的表单需要更长的时间JS方面..但它实际上是在“处理”方面。您可以通过查看开发人员选项中的 network 选项卡来查看此内容
@Zak，事实并非如此。如果我在提交表单时有一个事件监听器，我可以看到该事件在 15 秒后才会触发

标签： html forms

【解决方案1】：

当你可以在首页如html、jsp或php文件中获取所有预期的数据时，你可以使用ajax（jQuery）异步发送数据。请阅读示例：How do I submit a form in jQuery async?

【讨论】：

这个问题和jQuery无关——是关于表单和提交的。
我认为这也不是您的代码的问题。 1）您可以检查某些插件是否会干扰您的浏览器。 2）如果问题也存在，您可以尝试使用其他浏览器，例如firefox。 3）chrome会以未知原因占用大量内存。如果关闭它，chrome 将再次正常工作。 4）尝试删除cookie。