缩小 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吗？根据您的示例代码，我不知道。此外，也许不是在页面加载时加载链接和项目 ID，而是根据需要通过 AJAX 获取它们。

午餐吃沙拉时我的两分钱， 尼基特

为 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 在客户端构建所有这些内容可能更经济。

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

Answer 3

John Resig 在documentDragmentshttp://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 和 overflow: auto 以便用户在页面中获得一个可滚动的窗口？

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

Answer 5

另一种解决方案

...关于“页面内容过多”的问题：

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

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

然后您可以在该技术中显示所有时髦的数据，嵌入到您的浏览器页面中。页面内容与浏览器无关，因此不会让您感到厌烦。

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