javascript - JS 中的 HTML？或者在单独的 html 文件中(通过 $.ajax 或 $.load 加载)

Question

更好/最好的解决方案是什么？以前我所有的标记都是在 html 文件中初始化的，

index.php:

//login block
<div id="login">
    form ...
</div>

因此，每当我登录时，我都必须使用 $.ajax 来检查是否存在现有 session ，然后隐藏整个登录标记( .hide( ) ) 并为登录用户显示不同的标记。

这样做的问题是，它在执行脚本之前等待整个文档加载，因此意外/隐藏的标记将显示，然后在页面加载时快速消失。

我也尝试将标记内联放入 javascript 中，但我认为这违反了 js 中的“Unobtrusive”理念。

例如

var markup_arr = [
    '<h4>Login</h4>',
    '<form></form>'
];
var markup = markup_arr.join('');

所以我最终得到了这个

当前解决方案:单独的 html 文件并使用 jQuery 的 $.load() 加载它

您在使用什么，哪些是最佳实践，哪些加载速度快？或者您有什么更好的解决方案可以建议吗？谢谢。

编辑:这些都是 javascript/ajax 进程，所以我不是在寻找服务器端解决方案(include,require_once)

Answer 1

这个问题没有正确答案。我的观点是，您希望以最少的请求数向用户提供最少的数据量。这一切都是为了找到适当的平衡。根据您的用户，余额将更改为。

对我来说，我更愿意发送两个每个 5kB 的文件，而不是四个 2kB 的文件。您正在发送更多数据，但由于请求较少，因此速度应该会一样快。我认为将其作为 Javascript 的一部分提供可能是最好的。请注意，它不一定需要是同一个文件，尽管我将其作为一个文件提供 - 有一个简单的(PHP 等)脚本将代码文件和数据文件连接成一个，然后将其传递出去

我要确保的另一件事是您正在尽可能地缓存所有内容。如果您只需下载一次并且缓存一年，那么拥有稍大的文件通常不是问题。如果您的用户每天下载较大的文件，或更糟糕的是，每次页面浏览都会成为问题。