Редактируемый HTML-контент очень лаги, когда он большой

Например, у меня есть следующая простая HTML-страница, где <span>[SOME FIELD]</span> повторяется много раз, чтобы составить около 200 КБ размера файла:

<!DOCTYPE html>
<html>
<head>
</head>
<body editableContent="true">
        <span>[SOME FIELD]</span>
        <span>[SOME FIELD]</span>
...
        <span>[SOME FIELD]</span>
</body>
</html>

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

Вот полный вариант воспроизведения. Чтобы понять, что я имею в виду, просто переместите курсор в конец редактируемого контента и попробуйте отредактировать. Он сильно отстает от IE и Chrome, что делает его практически невозможным. Он отлично работает под Firefox.

Проблема: Мне нужно заставить его работать достаточно быстро под IE.

До сих пор я был близок к эмуляции IE8 (с <meta http-equiv="X-UA-Compatible" content="IE=8">), поэтому this работает (в IE).

Однако мне также нужно поддерживать IE=edge. Любые советы о том, как это сделать, будут очень признательны. IMO, это ошибка (которую я представил здесь для IE и здесь для Chrome), но я ищу любой способ обхода.

Обновлено, для любого решения, которое работает при загрузке в автономном браузере IE или в специализированном приложении управлении WebBrowser, предоставляется щедрость., используя IE=edge режим HTML-документа.

Обновлено, соответствующая ошибка IE, сообщенная, была просто закрыта как "Не исправлена ​​".

Ответы

Ответ 1

Выбор символа с помощью мыши или SHIFT + ARROW, а затем удаление путем нажатия DELETE вернет скорость редактирования в обычное состояние в IE.

Ответ 2

Почему бы не сломать данные и не хранить их в массиве или объекте Json, а только читать часть за раз, обновляя, когда пользователь прокручивает или перемещается по содержимому. Таким образом, только небольшая часть будет обрабатываться в любой момент времени. Если вы используете Jquery, вы можете получить идентификатор из ссылки на класс. Если вы не хотите использовать Jquery, вы можете написать функцию идентификатора класса в необработанном Javascript. Ниже приведен пример, но вы можете получить эту идею.

<!DOCTYPE html>
<html>
<head>
</head>
<body editableContent="true">
    <span id="item1" class="handle_items">[SOME FIELD]</span>
    <span id="item2" class="handle_items">[SOME FIELD]</span>
    ...
    <span id="item-n" class="handle_items">[SOME FIELD]</span>
</body>
</html>

<script>
$(function(){

    var arrayData = [];

    $(".handle_items").mouseover(function() {
        var identVar = $( this ).prop('id');
        fillHtml(identVar);
    });

    function fillHtml(identVar) {
        $("#" + identVar).html(arrayData[i]);
    }
});
</script>

Ответ 3

Одним из решений было бы не использовать contenteditable = true для всей области (раздел тела в вашем случае). Вы можете определить видимую область тела, создать 'Range' для соответствующей области и временно обернуть ее элементом contenteditable = true.

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

Ответ 4

После многих слепых стрельб, я думаю, что нашел что-то, что могло бы действительно работать:

  • Скопируйте большой кусок HTML в буфер обмена
  • Вставить его поверх любого содержимого внутри редактируемой области
  • Voilà, отставание в процессе редактирования, похоже, пропало.

Предположительно, оба действия могут выполняться программно.

Ответ 5

Во всех браузерах, чем больше элементов, тем медленнее они получаются. Другое, что вызывает проблемы, - это утечки памяти. Большинство крупных фреймворков, таких как angular или нокаут, вызывают утечку памяти. Вы можете профилировать их, запустив моментальный снимок памяти в профайле памяти.

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

Ответ 6

У меня нет IE для проверки производительности прямо сейчас, так или иначе, в Chrome (Ubuntu) это поможет. Я просто удаляю contenteditable из корневого элемента и добавляю его к каждому span.

Это делает редактирование контента довольно быстрым.

Вы можете проверить это в Chrome со следующими шагами:

  • в devtools (панель элементов) выберите root node редактора (то есть body с атрибутом contenteditable)

  • попал в консоль javascript devtools

  • выполните этот фрагмент кода:

Отрывок:

var nodes = $0.querySelectorAll('span');
$0.setAttribute('contenteditable', false)
for (var i = 0, max = nodes.length; i < max; i++) {
    nodes[i].setAttribute('contenteditable', true);
}

Ответ 7

Вы сказали, что не хотите использовать разбивку на страницы, потому что...

Я не вижу, как AJAX/pagination может помочь с редактируемым контентом. На самом деле это полнофункциональный редактор, похожий на Word. Например, у него есть контекстный инструмент проверки орфографии, который зависит от слов вокруг курсора. Или как пользователь может выбрать блок текста, который охватывает несколько страниц.

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

Я знаю Objective-C, и эта проблема очень похожа на UITableViewControllers. Они борются с проблемой, отображая элементы таблицы, которые в настоящее время просматриваются, и освобождая остальные. В вашем случае вы захотите сохранить свою информацию в массиве JavaScript.

То, как я это сделаю, - создать функцию loadItem и функцию unloadItem. loadItem получит содержимое элемента и добавит его в тело, а unloadItem скопирует содержимое обратно в массив и удалит элемент (возможно, установив стиль visibility:hidden, но я не проверял его посмотрите, работает ли он).

Чтобы найти соответствующие строки:

  • Все, что находится на экране
  • Все, что является частью выбора
  • Все, что может появиться, должно отображаться

Поскольку строки не выбраны, выйдите из экрана или что-то еще, что делает их более не требуемыми, вызовите unloadItem() и передайте ему номер строки/все, что идентифицирует строку.

EDIT: Это то, что я имею в виду:

for(var count=0;count<1000;count++){
  document.getElementById("main").innerHTML+="<span id='item"+count+"'>[SOME FIELD "+count+"]</span>";
}

function loadItem(number){
  document.getElementById("item"+number).style.visibility="visible";
}
function unloadItem(number){
  document.getElementById("item"+number).style.visibility="hidden";
}

unloadItem(1);
unloadItem(2);
loadItem(1);

// I didn't have time to implement the rest. Basically, when a user is not viewing a line, it should be hidden. When they scroll to view it, it should show up again. I haven't tested this yet, but it should work.

// There is supposed to be a bit of slowness when it loads, it is creating all the content and that is normal.
<!DOCTYPE html>
<html>
<head>
</head>
<body contenteditable="true" id="main">
</body>
</html>

Ответ 8

  • Я думаю, вы должны сделать каждый тег span редактируемым и показывать ограниченное количество интервалов за раз. это поможет улучшить загрузку вашей веб-страницы. и контент будет легко редактироваться.
  • Кроме того, вы можете сделать editableContent = "true", если пользователь хочет редактировать более одного тега span в одно и то же время. что немного удивительно, потому что, если ваш файл содержит размер 200 тыс., кто-то редко редактирует несколько контента одновременно. всякий раз, когда пользователь нажимает на редактирование всей веб-страницы, создайте всплывающее окно с простым базовым компоновкой html и позволяйте пользователю изменять все, что захочет. он будет правильно загружаться в всплывающем окне основного макета.