Как улучшить производительность всплывающих подсказок JavaScript для больших строк? - PullRequest
Новая
       5

Как улучшить производительность всплывающих подсказок JavaScript для больших строк?

6 голосов
/ 03 апреля 2011

Я работаю над приложением-подсказкой для веб-страницы и хочу, чтобы событие Javascript запускалось каждый раз, когда пользователь перемещается по слову.

В настоящее время у меня это работает, помещая тег <span> вокруг каждого слова индивидуально, например, <span id="word1">word1</span> <span id="word2">word2</span> <span id="word3">word3</span> и затем обработка событий наведения / выключения мыши для каждого из них.

Это работает нормально, но иногда вводимый текст состоит из тысяч слов, и все эти теги, кажется, замедляют работу браузера (по крайней мере, сильно замедляют IE). Я использую делегирование событий, поэтому к нему не присоединяются тысячи обработчиков событий, и это достаточно быстро после рендеринга. Проблема в том, что 8+ секунд может потребоваться, прежде всего, для рендеринга индивидуально помеченных слов, когда я задаю его через innerHTML, что приводит к зависанию браузера в процессе.

( Редактировать: Просто чтобы уточнить, что я имею в виду - пользователь вводит строку текста, он отправляется на сервер с помощью ajax, а HTML-теги добавляются на стороне сервера. В обратном вызове ajax success, Я установил новый HTML-код, установив элемент innerHTML напрямую. Задержка определяется настройкой innerHTML, а не на стороне сервера.)

Есть ли в любом случае, что может быть изменено на <span id="line1">word1 word2 word3</span> и все еще работать? Есть ли какой-нибудь способ узнать, какое конкретное слово пользователь наделал мышью, не помещая отдельный тег вокруг каждого?

Ответы [ 3 ]

1 голос
/ 03 апреля 2011

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

<script>
function getWordFromEvent (evt)
{
    if (document.body && document.body.createTextRange)
    {
        var range = document.body.createTextRange();
        range.moveToPoint(evt.clientX, evt.clientY);
        range.expand('word');
        document.getElementById("wordMouseIsOver").innerHTML = range.text;
    }
}
</script>
<span onMouseMove="getWordFromEvent(event)">word1 word2 word3</span>
<BR>
<span id="wordMouseIsOver"> </span>
1 голос
/ 03 апреля 2011

используйте Фрагмент документа , прежде чем вводить длинный HTML-код в документ.

Чтение * * Джона Ресига (создатель библиотеки jQuery ) длинная статья о преимуществах использования фрагментов документов

0 голосов
/ 03 апреля 2011

Взгляните на эту ссылку (точка 7): http://www.tvidesign.co.uk/blog/improve-your-jquery-25-excellent-tips.aspx#tip7.

Вы в основном обернете все свои пролеты внутри одного span / div и вставите этот единственный элемент DOM.

...