Справка по сокращению 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

Первое, что вы должны сделать, это присоединить событие onclick к DIV через jQuery или какую-то другую инфраструктуру и дать ему всплыть, чтобы вы могли использовать doSomething для всех случаев и в зависимости от того, на каком элементе вы щелкнули, вы можете извлечь идентификатор элемента и идентификатор ссылки. Кроме того, пролеты действительно нужны идентификаторы? Я не знаю, основываясь на вашем примере кода. Также, возможно, вместо загрузки ссылки и идентификаторов элементов при загрузке страницы, получите их через 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

Еще одно решение

... к проблеме "слишком много материала на странице":

(пожалуйста, дайте мне знать, когда вы устали от этих предложений!)

Если у вас есть возможность использовать встроенный объект, скажем, Java-апплет (мои личные предпочтения, но большинство людей его не трогают) или JavaFX, Flash или Silverlight или ...

тогда вы могли бы отобразить все эти забавные данные в этой технологии, встроенные в вашу страницу браузера. Содержимое страницы не будет иметь никакого отношения к браузеру и, следовательно, не захлебнется вами.

Помимо времени загрузки для Java или чего-либо еще, оно может быть прозрачным и невидимым для пользователя, т.е. это (почти) возможно сделать так, чтобы текст отображался на странице так же, как если бы он находился непосредственно HTML.

Answer 3

Еще одна проблема заключается в том, что на странице слишком много вещей, чтобы ваш браузер мог с ними справиться. Я не уверен, разрешает ли дизайн страницы это, но как насчет того, чтобы поместить эти 2000 строк в DIV с фиксированным размером и overflow: auto, чтобы пользователь получил окно с прокруткой на странице?

Это не то, что я бы предпочел как пользователь, но если это исправит странность курсора, это может быть приемлемым обходным путем.

Answer 4

Джон Ресиг написал блог на 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 5

Если вы установите свойство InnerHtml узла, DOM должен будет интерпретировать ваш HTML-текст и преобразовать его в узлы. По сути, вы работаете здесь с переводчиком языка. Больше текста, больше времени на обработку. Я подозреваю (но не уверен), что было бы быстрее создать фактические узлы элемента DOM со всеми необходимыми вложениями содержимого и привязать их к содержащему узлу. Ваше решение "InnerHTML" делает то же самое под покровом, но также выполняет дополнительную работу по осмыслению вашего текста.

Я также поддерживаю предложение кого-то еще, кто сказал, что было бы более экономично создавать весь этот контент на сервере, а не на клиенте через JS.

Наконец, я думаю, что вы можете устранить большую часть содержимого ваших span s. Вам не нужен идентификатор, вам не нужны аргументы в вашем onclick(). Вызовите функцию JS, которая определит, из какого узла она вызывается, поднимитесь на один узел, чтобы найти содержащий div и, возможно, зациклите содержащиеся в нем узлы и / или посмотрите на текст, чтобы выяснить, какой элемент в div это должен отвечать на. Вы можете заставить обработчик onclick выполнять большую часть работы - эта работа выполняется только один раз, во время щелчка мышью, и не будет умножена на 2000x. Это не займет заметного количества времени пользователя.