javascript - 直接从 ajax 请求加载 HTML，还是克隆模板并使用 JavaScript 插入数据？

Question

我正在开发一个类似论坛的页面，其中线程页面之间的更改会从 ajax 请求中提取 html 并将其插入到 div 容器中。

我的问题是，通过 json 检索获取基本数据，然后执行诸如克隆消息模板并将所需数据插入该模板之类的操作会更快吗？

Answer 1

通常我只从后端发送 JSON 数据，然后将其插入到 HTML 页面中，但我喜欢。

恕我直言，这将后端与前端稍微解耦，并使服务器端 API 更加可重用/通用。

我在网站中放置了预定义的 html 部分，然后用 JSON 数据填充这些部分。我最近构建了一个应用程序，您可以在其中浏览图像。始终一次显示 10 张图像。 html 看起来像这样:

<table>
    <tr>
        <td id="img_0"></td>
        <td id="img_1"></td>
        <td id="img_2"></td>
        ....
        <td id="img_9"></td>
    </tr>
</table>

JSON 是这样的(粗略的例子):

{images:
    [
        {imgTag: "<img src='foo.jpg' />"},
        {imgTag: "<img src='foo.jpg' />"},
    ]
}

在 Javascript 中我做了:

for(var i = 0; i < 10; i++) {
    var currentImage = response.images[i];
    if(currentImage) document.getElementById('img_' + i).innerHTML = currentImage.imgTag;
    else document.getElementById('img_' + i).innerHTML = '';
}

这是可行的，因为数据量(在本例中为图像)已知:最多始终为 10。网格是预定义的，可以用 JSON 数据填充。

当然，这非常快，因为 JSON 响应大多数时候都非常小(在我的情况下 < 2 kb)。据我所知，使用innerHTML 在现有元素中插入数据相当快。

<小时/>

当 HTML 相当复杂并且我无法在网站中预定义 HTML 部分然后用 JSON 数据填充时，从 AJAX 请求返回到服务器的完整 HTML 是我的一个选择。

例如，当我有一篇博客文章并且该博客文章的所有评论都是通过 AJAX 加载时(==愚蠢的示例)，那么我将在服务器端构建 HTML。因为评论数可以是 0 到 N 之间的任意值。

当然，您可以从后端加载评论，如下所示:

{comments:
    [
        {text: "some text"},
    ]
}

然后通过创建dom节点将其插入到html页面中:

for(var i = 0; i < response.comments.length; i++) {
    var currentComment = response.comments[i];

    var commentDiv = document.createElement('div');
    commentDiv.className = "comment"
    commentDiv.innerHTML = currentComment.text;

    document.getElementById('commentContainer').appendChild(commentDiv);
}

但这通常对我来说不是一个选择:使用 document.createElement('div') 构建复杂的 HTML 在我看来非常烦人。

存在 Javascript 模板引擎，这可能会让事情变得更容易，但我从未使用过。

在这个示例中，在服务器端构建完整的、可能复杂的 HTML 对我来说似乎要好得多。

使用 GZIP，您可以减少通过线路发送的数据量，并且通过巧妙的缓存策略，可以降低服务器负载。

<小时/>

就您的情况而言，第二种方法(从服务器获取生成的 HTML)可能似乎是更好的方法。但如果没有更完整的信息，很难说。

这没有明确的法律，因此您的里程会有所不同。到目前为止，这只是我在 AJAX Web 应用程序方面的工作经验。