在 javascript 文档就绪时获取 html 还是通过 ajax 单击按钮获取它？

Question

我有一个带有按钮的网页。单击该按钮时，我们希望显示一个 HTML 表单。以下是相同的 fiddle link。我们有 2 个选择：

准备好文档上的 html 并仅在单击按钮后显示它。例如：

$(document)on('ready', function () {
   $.ajax({
       type: "GET",
       url: "/getform/",
       success: function (data) {
          $("#view").html(data);
       }});
});

由于此 ajax 调用已就绪，因此不会影响页面加载时间。缺点是用户可能不会点击按钮，对于这种情况，如果我们采用这种方法，我们将不必要地带来这个 HTML。像这样获得额外的HTML有什么损失？第

点击按钮后得到HTML然后显示

如何判断哪种方法更好？

Answer 1

如果表单不是太大（即加载时间不长）并且一开始点击按钮的人不多，我会考虑在点击按钮时加载它。

向用户显示加载图标，如下所示：

并让他们等待加载 "few KBs".

所需的时间

$("#form-button").on('click', function () {
   $("#view").html(`<img src="spinner.gif" alt="Loading..." />`);
   $.ajax({
       type: "GET",
       url: "/getform/",
       success: function (data) {
          $("#view").html(data);
       }});
});

在 javascript 文档就绪时获取 html 还是通过 ajax 单击按钮获取它？

Fetching html on javascript document ready vs getting it on click of button through ajax?

javascript

ajax

document-ready