缩小 html 帮助

Question

我有一个包含 2000 个项目的数组，我需要以 html 形式显示它们 - 每个项目都放置在一个 div 中。现在，每个项目都可以有 6 个链接，单击即可执行进一步操作。以下是单个项目当前的外观：

<div class='b'>
  <div class='r'>
    <span id='l1' onclick='doSomething(itemId, linkId);'>1</span>
    <span id='l2' onclick='doSomething(itemId, linkId);'>2</span>
    <span id='l3' onclick='doSomething(itemId, linkId);'>3</span>
    <span id='l4' onclick='doSomething(itemId, linkId);'>4</span>
    <span id='l5' onclick='doSomething(itemId, linkId);'>5</span>
    <span id='l6' onclick='doSomething(itemId, linkId);'>6</span>
  </div>
  <div class='c'>
  some item text
  </div>
</div>

现在的问题在于性能。我正在使用innerHTML 将项目设置到页面上的主div 中。我的“单个项目”包含的 html 越多，DOM 添加它所需的时间就越长。我现在正在尝试减少 HTML 使其尽可能小。有没有办法以不同的方式渲染跨度，而不必为每个跨度使用单个跨度？也许使用 jQuery？

Answer 1

您应该做的第一件事是通过 jQuery 或其他框架将 onclick 事件附加到 DIV 并让它冒泡，以便您可以使用 doSomething 来覆盖所有情况，并且根据您单击的元素，您可以提取项目 ID和链接 ID。另外，跨度真的需要 ID 吗？根据您的示例代码我不知道。另外，也许您可​​以根据需要通过 AJAX 获取它们，而不是在页面加载时加载链接和项目 ID。

午餐吃沙拉时我的两分钱，
nickyt

更新了 vikasde 的信息。这个语法可能不完全正确。我正在午休。

$(".b").bind( // the class of your div, use an ID , e.g. #someID if you have more than one element with class b
    "click",
    function(e) { // e is the event object
        // do something with $(e.target), like check if it's one of your links and then do something with it.
    }
);

Answer 2

如果您设置节点的 InnerHtml 属性，DOM 必须解释您的 HTML 文本并将其转换为节点。本质上，您在这里运行一个语言解释器。更多文本，更多处理时间。我怀疑（但不确定）创建实际的 DOM 元素节点以及所有必需的内容嵌套并将它们挂接到包含节点会更快。您的“InnerHTML”解决方案在幕后做同样的事情，但还需要进行额外的工作来理解您的文本。

我也同意其他人的建议，他说在服务器上构建所有这些内容可能比通过 JS 在客户端构建更经济。

最后，我认为您可以消除 span 的大部分内容。您不需要 ID，也不需要 onclick() 中的参数。调用一个 JS 函数，该函数将确定从哪个节点调用它，向上一个节点查找包含的 div 并可能循环包含的节点和/或查看文本以找出其中的哪一项它应该响应的 div 。您可以让 onclick 处理程序完成大量工作 - 这项工作仅在鼠标单击时完成一次，并且不会乘以 2000 倍。它不会花费可察觉的用户时间。

Answer 3

John Resig 在 documentDragments 上撰写了一篇博客 http://ejohn.org/blog /dom-documentfragments/

我的建议是为每一行创建一个 documentDragment 并在创建时将其附加到 DOM。如果浏览器有任何挂起，包装每个 appendChild 的 timeout 可能会有所帮助，

function addRow(row) {
    var fragment = document.createDocumentFragment();

    var div = document.createElement('div');
    div.addAttribute('class', 'b');

    fragment.appendChild(div);
    div.innerHtml = "<div>what ever you want in each row</div>";

    // setting a timeout of zero will allow the browser to intersperse the action of attaching to the dom with other things so that the delay isn't so noticable
    window.setTimeout(function() { 
        document.body.appendChild(div);
    }, 0);
};

希望有帮助

Answer 4

另一个问题是页面上有太多内容，浏览器无法正常处理。我不确定页面的设计是否允许这样做，但是如何将这 2000 行放入具有固定大小和 overflow: auto 的 DIV 中，以便用户获得可滚动的内容页面中的窗口？

这不是我作为用户所喜欢的，但如果它修复了光标的怪异现象，它可能是一个可以接受的解决方法。

Answer 5

另一种解决方案

...针对“页面上的内容太多”问题：（

当您厌倦了这些建议时请告诉我！）

如果您可以选择使用嵌入式对象，例如 Java Applet（我个人的偏好，但大多数人不会碰它）或 JavaFX 或 Flash 或 Silverlight 或...

然后您可以使用该技术显示所有时髦的数据，并将其嵌入到您的浏览器页面中。该页面的内容与浏览器无关，因此不会让您感到困惑。

除了 Java 或其他的加载时间之外，这对用户来说可能是透明且不可见的，即（几乎）可以这样做，以便文本看起来显示在页面上，就像直接显示在 HTML 中一样。