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吗？我根据您的示例代码不知道。此外，也许不是在页面加载时加载链接和项目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.
    }
);

Answer 2

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

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

最后，我认为您可以删除span的大部分内容。您不需要ID，onclick()中不需要参数。调用一个JS函数，它将确定从哪个节点调用它，向上移动一个节点以找到包含div的节点，然后循环包含的节点和/或查看文本以确定{{1}中的哪个项目它应该响应。你可以让onclick处理程序做很多工作 - 这项工作只在鼠标点击时完成一次，并且不会乘以2000x的东西。它不会花费大量的用户时间。

Answer 3

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

希望有所帮助

Answer 4

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

这不是我喜欢的用户，但如果它修复了光标的怪异，那么它可能是一种可接受的解决方法。

Answer 5

又一种解决方案

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

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

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

然后您可以在该技术中显示所有那些时髦的数据，嵌入到您的浏览器页面中。该页面的内容不会是浏览器的任何业务，因此它不会扼杀您。

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

收缩html帮助

5 个答案: