Оптимизация Jquery

[byte916]

Добрый день.
Небольшая предыстория: есть подготовленные материал, оформленный как html-страница (только тексты и картинки). Нужно этот текст разбить на равные страницы (с известными размерами). Картинки могут обладать float, т.е. текст будет их обтекать.
Как сделано сейчас: весь html обрабатывается блок за блоком, картинки вставляются, текст разбивается по словам, и по каждому слову добавляется. Если новое слово не вмещается в размеры страницы, создаётся новая страница.

Сейчас добавление каждого слова выглядит так:

var textArray = $(elem).html().replace('<br>', ' <br> ').split(/\s/);
for (var ind = 0, j = textArray.length; ind < j; ind++) {
  var textElement = textArray[ind];
  $(newElement).html($(newElement).html() + " " + textElement);
    if ($(currPage).outerHeight() > contentHeight) {
    //Если высота текущей страницы не вписывается в границы, то создаём новую и продолжаем вписывать в неё
    }
}
...

Такое добавление по одному слову прямо в dom через html() невероятно медленное. Но я другого варианта не придумал, потому что надо после каждого слова проверять размер страницы (потому что помимо текста могут быть картинки с обтеканием).

Собственно вопрос: как можно обойтись без html()? Пробовал Append, но работает так же медленно.
Прошу подсказки)

[Naive]

Если картинка попадает на разрыв страницы, то как решаешь вопрос?

[Gorychev]

Добавлять, допустим, по 50 слов за одну итерацию. Или разбивать текст по предложениям и добавлять к тексту по одному предложению за раз. Или я вот смотрю текст у вас <br> форматирован, можно по этим бэрам и разбивать на массив и тоже прибавлять к тексту по элементу или несколько.

[Naive]

Ну, вообще работа с dom штука медленная, а innerHTML ваще тормоз.
Я бы в фоне попилил текст по заголовкам в отдельные слои, предварительно обернув каждое слово в спанчик.
Дальше бы драгал картинки до близжайшего непересечения оными границы страницы.
Затем уже сам попил, слов по страничкам, запихать в document.fragment, а его уже в соответствующую страницу.

[byte916]

Если картинка не помещается, то переносится на следующую страницу. Если она и туда не помещается, то масштабируется до размера страницы.

Я сделал так - определял размер страницы, размер шрифта, высчитывал сколько в среднем поместится слов на строку (при средней длине 6 слов плюс пробел, а ширина буквы 4/7 к высоте), считал число строк, и получал количество слов, которые засовывал, и дальше смотрел, поместится ли еще.

Ну и еще пара мелких оптимизаций, которые почти не помогли.

Короче говоря, производительность выросла в 2.5 раза, книга разбивающаяся на 80 страниц (при размере экрана 1280х1024) стала разбиваться за 6 секунд вместо 15 в начале (на i3)

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

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

[Naive]

6 секунд — адово, конечно. Можешь скинуть пару примеров самому поковыряться?

[nerv]

ппц, пока писал авторизация слетела, текст не сохранился
адовый форум

ниже неполный сокращенный вариант того, что хотел сказать

---

для текста

допустим,
- книга 1000 слов
- среднее кол-во слов на странице 300
- кол-во слов на странице в текущей книге 240

1. words = 300
2. поместилось на странице? нет, page = 0 (!)
3. words /= 2
4. поместилось на странице?, да page = 150 (!)
5. words /= 2
6. поместилось на странице?, да page = 150+75 (!)

итого: 3 проверки, 225 слов (~240)
думаю, смысл ясен

https://ru.wikipedia.org/wiki/Геометрическая_прогрессия

[byte916]

Сообщение от Naive

6 секунд — адово, конечно. Можешь скинуть пару примеров самому поковыряться?

Там почти 1000 строк js-кода) Мало удовольствия в этом копаться)

[byte916]

Сообщение от nerv

ппц, пока писал авторизация слетела, текст не сохранился
адовый форум

ниже неполный сокращенный вариант того, что хотел сказать

---

для текста

допустим,
- книга 1000 слов
- среднее кол-во слов на странице 300
- кол-во слов на странице в текущей книге 240

1. words = 300
2. поместилось на странице? нет, page = 0 (!)
3. words /= 2
4. поместилось на странице?, да page = 150 (!)
5. words /= 2
6. поместилось на странице?, да page = 150+75 (!)

итого: 3 проверки, 225 слов (~240)
думаю, смысл ясен

https://ru.wikipedia.org/wiki/Геометрическая_прогрессия

К сожалению, все слова не так одинаковы по длинне и размеру шрифта, да еще и это не плоский набор слов, а куски текста обёрнутые в дивы, да еще и с примесью картинок и списков

[Naive]

Сообщение от byte916

Там почти 1000 строк js-кода) Мало удовольствия в этом копаться)

Я имел ввиду пример данных =) Примеров книг то у меня дофига, конечно. Просто хотелось побаловаться именно с твоим примером. Вдруг шустрее выйдет?