0

我有一个包含 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？

4

5 回答 5

3

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

午餐吃沙拉时我的两分钱，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.
    }
);
于 2009-11-17T16:37:59.317 回答
0

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

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

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

于 2009-11-17T17:06:21.183 回答
0

One other problem is that there's too much stuff on the page for your browser to handle gracefully. I'm not sure if the page's design permits this, but how about putting those 2000 lines into a DIV with a fixed size and overflow: auto so the user gets a scrollable window in the page?

It's not what I'd prefer as a user, but if it fixes the cursor weirdness it might be an acceptable workaround.

于 2009-11-18T14:33:17.583 回答
0

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

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

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);
};

希望有帮助

于 2009-11-17T18:12:34.747 回答
0

另一个解决方案

...对于“页面上的东西太多”问题：

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

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

然后你就可以在你的浏览器页面中显示该技术中的所有时髦数据。页面的内容不会是浏览器的任何业务，因此它不会让你窒息。

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

于 2009-11-18T15:55:22.160 回答