使用大量 HTML 渲染页面

Question

我正在创建一个包含大量 HTML（数千个 div 元素）的网站。没有真正的方法可以摆脱所有这些 div 元素，并且它使站点加载非常缓慢（7-12 秒）。我试过在网站上放置缓存，但它没有帮助，因为网站仍然必须呈现所有这些 div 元素。

更具体地说，它有 140 个下拉列表，每个包含 100-800 个 div 元素，它们需要很长时间才能显示。

我的想法是在页面加载后呈现下拉列表中的 div 元素，但我不知道该怎么做？

在页面加载后呈现部分部分的最简单方法是什么？顺便说一句，我正在使用 Rails 4。

关于如何处理大量 HTML 的任何其他建议？

Answer 1

我的一个页面上也有类似的问题。以下是一些与选择框相关的可尝试的操作。

（前两个可能不相关，因为您说您尝试过缓存，但为了完整性，我将其包括在内。您尝试了哪种类型的缓存？您如何验证是浏览器渲染速度慢？）

仔细检查问题的原因

注释掉生成选择框的代码，并检查 Rails 日志中的时间（与浏览器测量结果相反）是否下降。这确定了该指标的性能改进的“下限”。

避免使用 Rails 助手。

如果您使用select_tag、options_for_select或任何该系列方法，您可能会做大量重复工作，因为每次调用它们时都需要重建选项列表。如果每个选择框的选项都相同，您可以将它们构建一次，然后将它们转储到页面中：

<% options = options_from_collection_for_select(@array, "id", "name") %>
<%= select_tag "myfield", options %>

如果您需要为每个值选择不同的值，您可以尝试：

部分 AJAX

即使服务器时间相同，这也会给人加载速度更快的错觉（尽管可能会稍微并行化，但会增加额外的网络延迟）。最简单的方法是使用jQuery 的 .load 方法。

$("#element-1").load("/path/to/partial/1")

在JS中生成选择框

如果您可以相对快速地向客户端获取所需的所有数据（也许可以在 JSON 端点中提供它？），您可以尝试直接使用 jQuery 构建选择框，这在以编程方式创建选择列表中进行了介绍

删除多余的 HTML

为什么你的下拉菜单div里面有 s ？有没有办法简化？