html - 使用大量 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 %>

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

1. 在创建后处理选项以添加它们。这非常糟糕，可能不会让您比默认生成器提速很多。
2. 将默认值转储到 javascript 变量中，然后在页面加载后使用 JS 设置它们。

部分 AJAX

这会产生加载速度更快的错觉，即使服务器时间是相同的(虽然它可能在某种程度上是并行的，但你会增加额外的网络延迟)。最简单的方法是使用 jQuery's .load method .

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

在JS中生成选择框

如果您可以相对快速地获取客户端所需的所有数据(也许在 JSON 端点中提供？)，您可以尝试直接使用 jQuery 构建选择框，这在 Programmatically create select list 中有介绍。

删除多余的 HTML

为什么您的下拉菜单中有 div？有没有办法简化？