1 Тема від ktretyak Востаннє редагувалося ktretyak (06.07.2015 13:54:26)

  • ktretyak
  • Replace Group
  • Поза форумом
  • Дата реєстрації: 30.01.2014
  • Повідомлень: 2 080
    • Репутація: 758

Тема: Видалення чи додавання верхніх елементів DOM. Проблема смикання.

Спостерігаючи на dou.ua теми, де дуже багато коментарів, бачу, що явно не вистачає механізму їх приховування.

Ідея проста:
1. не друкувати усі коментарі зразу, якщо їх більше певного максимуму, скажімо більше двох сотень;
2. оскільки користувач може за один раз бачити максимум - все що вміщується на одному екрані, то й потрібно в DOM залишати не набагато й більше цього максимуму;
3. при прокручуванні вниз, в DOM додаються коментарі вниз (це реалізується без проблем);
4. при прокручуванні вниз, досягнувши певного максимуму, верхні коментарі починають видалятись;
5. при прокручуванні вгору, нижні коментарі починають видалятись, а верхні додаватись;

І ось четвертий та п'ятий пункти є проблематичними, через смикання всього DOM вгору чи вниз.

Перше що спадає на думку - згладжування стрибків через CSS transition, але це більше схоже на костиль, ніж на рішення.

Ніхто не в курсі як можна видаляти елементи в DOM, щоб інші елементи не смикались?

2 Відповідь від ktretyak

  • ktretyak
  • Replace Group
  • Поза форумом
  • Дата реєстрації: 30.01.2014
  • Повідомлень: 2 080
    • Репутація: 758

Re: Видалення чи додавання верхніх елементів DOM. Проблема смикання.

Ідея вирішення проблеми: зробити верхню межу не фіксованою, а "резиновою", тобто вона буде розтягуватись за допомогою JavaScript на висоту елемента, який збираємось видаляти, а після видалення - відновлювати початкову висоту. Ну або ж, навпаки - верхня межа після видалення елемента буде опускатись на висоту цього елемента.

P.S. Я розумію, що декому може показатись, що це зайві витрати часу, і воно не варто того, але це швидше прицінювання "чи можна так зробити", ніж "треба так зробити".

3 Відповідь від ktretyak

  • ktretyak
  • Replace Group
  • Поза форумом
  • Дата реєстрації: 30.01.2014
  • Повідомлень: 2 080
    • Репутація: 758

Re: Видалення чи додавання верхніх елементів DOM. Проблема смикання.

Мабуть посторінкове розбиття коментарів все таки буде кращим рішенням, хоча і не всім це сподобається. Реально неоправдано складний механізм треба для описаної мною задумки.

Подякували: quez1

4 Відповідь від ailkiv

  • ailkiv
  • ailkiv
  • Користувач
  • Поза форумом
  • Дата реєстрації: 03.09.2013
  • Повідомлень: 102
    • Репутація: 70

Re: Видалення чи додавання верхніх елементів DOM. Проблема смикання.

Щось не зрозумів суті проблеми, це ви так хотіли оптимізувати рендер сторінки?
Якщо ні, то у чому проблема на блок і якому всі коментарі поставити наприклад:

overflow-y: auto;
height: 5000px;

5 Відповідь від ktretyak

  • ktretyak
  • Replace Group
  • Поза форумом
  • Дата реєстрації: 30.01.2014
  • Повідомлень: 2 080
    • Репутація: 758

Re: Видалення чи додавання верхніх елементів DOM. Проблема смикання.

ailkiv написав:

Щось не зрозумів суті проблеми, це ви так хотіли оптимізувати рендер сторінки?
Якщо ні, то у чому проблема на блок і якому всі коментарі поставити наприклад:

overflow-y: auto;
height: 5000px;

Так, саме оптимізувати роботу відмальовки нижніх елементів DOM, коли видаляють або додають верхні елементи.

Оптимізація подачі коментарів однозначно потрібна. Ось приклад сторінки, де їх дуже багато http://dou.ua/forums/topic/7313/

6 Відповідь від funivan

  • funivan
  • funivan
  • Replace Team
  • Поза форумом
  • Звідки: Київ
  • Дата реєстрації: 24.09.2012
  • Повідомлень: 2 005
    • Репутація: 927

Re: Видалення чи додавання верхніх елементів DOM. Проблема смикання.

Сиджу з планшета. На вищевказаній сторінці ніяких лагів немає. Все гладко прокручується.

funivan вебсайт

7 Відповідь від ktretyak

  • ktretyak
  • Replace Group
  • Поза форумом
  • Дата реєстрації: 30.01.2014
  • Повідомлень: 2 080
    • Репутація: 758

Re: Видалення чи додавання верхніх елементів DOM. Проблема смикання.

funivan написав:

Сиджу з планшета. На вищевказаній сторінці ніяких лагів немає. Все гладко прокручується.

А де ви прочитали про лаги?

8 Відповідь від funivan

  • funivan
  • funivan
  • Replace Team
  • Поза форумом
  • Звідки: Київ
  • Дата реєстрації: 24.09.2012
  • Повідомлень: 2 005
    • Репутація: 927

Re: Видалення чи додавання верхніх елементів DOM. Проблема смикання.

Помилився. Я просто не бачу проблеми якщо сторінка завантажується без проблем.
Зараз можна без проблем прокрутити за 1ну секунду на 50% коментарів вниз або пошукати по сайті текст. А з вашим підходом буде більш напряжніше );

funivan вебсайт

9 Відповідь від ktretyak

  • ktretyak
  • Replace Group
  • Поза форумом
  • Дата реєстрації: 30.01.2014
  • Повідомлень: 2 080
    • Репутація: 758

Re: Видалення чи додавання верхніх елементів DOM. Проблема смикання.

funivan написав:

Помилився. Я просто не бачу проблеми якщо сторінка завантажується без проблем.
Зараз можна без проблем прокрутити за 1ну секунду на 50% коментарів вниз або пошукати по сайті текст. А з вашим підходом буде більш напряжніше );

Та ну, перестаньте. Ви бачили скільки часу готується сторінка, та на скільки під час цієї підготовки завантажується проц і скільки пам'яті займає потім вкладка браузера з такими коментарями?

В мене досить потужний з чотирма ядрами проц завантажується під 70% більше 5 секунд, після чого закладка важить більше 615 МБ. Плюс стає помітною важка реакція різних DOM елментів, коли щось робиш з JavaScript.

Мою ідею я у себе таки реалізував для теста, але відмовився від неї, як і писав - неоправдано складний механізм, який ще й кострубато працює...

Зупинився на тому, що при відкритті сторінки, спочатку завантажуються коментарі на пару екранів, а потім довантажується решта, якщо користувач прокручує сторінку вниз.

10 Відповідь від ailkiv

  • ailkiv
  • ailkiv
  • Користувач
  • Поза форумом
  • Дата реєстрації: 03.09.2013
  • Повідомлень: 102
    • Репутація: 70

Re: Видалення чи додавання верхніх елементів DOM. Проблема смикання.

Сторінковість погана тим що не зручно буде шукати конкретний коментар + якщо коментарі гілками те ж, мабуть, буде не зручно читати гілку якщо вона буде на стику двох сторінок.

Конкретно на тій сторінці бачу одну проблему яка все гальмує, їсть трафік + і генерує достобіса запитів, це аватарки. І бінго, щоб її позбутися можна просто поставити лезі-лод для аватарок

11 Відповідь від ktretyak Востаннє редагувалося ktretyak (08.07.2015 10:52:01)

  • ktretyak
  • Replace Group
  • Поза форумом
  • Дата реєстрації: 30.01.2014
  • Повідомлень: 2 080
    • Репутація: 758

Re: Видалення чи додавання верхніх елементів DOM. Проблема смикання.

Як це ви собі уявляєте гілку, яку розривають на дві сторінки? Ні, таке навпаки складніше зробити. Є кореневі коментарі, від яких відгалуджуються інші коментарі. Хоча, швидше за все, я не буду робити посторінковий поділ коментарів, але якщо б робив, то зрозуміло що кількість вімірювалась саме кореневими коментарями.

Стосовно "в чому саме проблема", то це далеко не лише через аватарки. Хоча я тут не експерт, але судячи з профілювання, основна проблема у відмальовці всієї структури коментарів.
https://1933a544b9b651d3813e8de397efcd5a179e17e8.googledrive.com/host/0Bwk9euTxkxYUOFFUS29tSGJ4eXM/replace.org.ua/img/summary-large-page.png

Оновлено:
Зараз згадав, що досить легко відірвати коментарі від кореневого коментаря при посторінковому поділі, але якщо використовувати одномірний масив, коли відступи показуються в залежності від рівня вкладеності. Саме так, до речі, реалізовано на ДОУ. Але такий підхід менш гнучкий, ніж коли дочірні коментарі відгалуджуються від батьківських коментарів відповідно до їхньої ієрархії.

12 Відповідь від ailkiv Востаннє редагувалося ailkiv (08.07.2015 13:56:07)

  • ailkiv
  • ailkiv
  • Користувач
  • Поза форумом
  • Дата реєстрації: 03.09.2013
  • Повідомлень: 102
    • Репутація: 70

Re: Видалення чи додавання верхніх елементів DOM. Проблема смикання.

Як це ви собі уявляєте гілку, яку розривають на дві сторінки?

Ну якщо саме в одному кореневому коментарі розрослася дискусія на 100500 коментів?

Хоча я тут не експерт, але судячи з профілювання, основна проблема у відмальовці всієї структури коментарів.

Аватарки крім того що завантажуються ще й відмальовуються. Плюс по вашому профайлу видно 43 сек простою, а це буває коли сторінка відправила 100 запитів на сервер і чекає поки прийдуть дані щоб їх завантажити, відрендерити і промалювати

----
Хочу зауважити, що я не стверджую це допоможе, але якби була така проблема у мене то це перше щоб зробив.

----
Бачачи вже не вперше теми такого характеру від вас. НМСД, не варто придумувати собі проблеми.
Почитайте про KISS, можливо зміните свою думку про надлишкову розробку. https://uk.wikipedia.org/wiki/%D0%9F%D1 … D0%BF_KISS

13 Відповідь від ktretyak

  • ktretyak
  • Replace Group
  • Поза форумом
  • Дата реєстрації: 30.01.2014
  • Повідомлень: 2 080
    • Репутація: 758

Re: Видалення чи додавання верхніх елементів DOM. Проблема смикання.

"Не варто створювати собі проблем"... я б ще додав "нехай вони залишаються у користувачів" - це повніше характеризує предмет обговорення.

Тобто, зрозуміло, що мої експерименти спрямовані на вирішення вже існуючої проблеми, а не лише за для фішки як такої.

14 Відповідь від Sensetivity

  • Звідки: Дім
  • Дата реєстрації: 06.01.2015
  • Повідомлень: 378
    • Репутація: 207

Re: Видалення чи додавання верхніх елементів DOM. Проблема смикання.

При прокрутці коментарів на DOU справді "лагає".

Sensetivity вебсайт

15 Відповідь від ailkiv

  • ailkiv
  • ailkiv
  • Користувач
  • Поза форумом
  • Дата реєстрації: 03.09.2013
  • Повідомлень: 102
    • Репутація: 70

Re: Видалення чи додавання верхніх елементів DOM. Проблема смикання.

"Не варто створювати собі проблем"... я б ще додав "нехай вони залишаються у користувачів" - це повніше характеризує предмет обговорення.

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

І, будь ласка, не сприймайте це як зазнавання, я справді хотів вам допомогти (про що свідчать перші коменти у цій темі), просто за таким вилизуванням ви ніколи не представите публіці свій проект, бо будете постійно щось допилювати.

16 Відповідь від ktretyak

  • ktretyak
  • Replace Group
  • Поза форумом
  • Дата реєстрації: 30.01.2014
  • Повідомлень: 2 080
    • Репутація: 758

Re: Видалення чи додавання верхніх елементів DOM. Проблема смикання.

ailkiv написав:

...
І, будь ласка, не сприймайте це як зазнавання, я справді хотів вам допомогти (про що свідчать перші коменти у цій темі), просто за таким вилизуванням ви ніколи не представите публіці свій проект, бо будете постійно щось допилювати.

Тю, де це ви вже подумали, що я так сприймаю? Здається, все ж у рамках пристойності.

Стосовно "вилизування" свого проекту, то це ще не вилизування, воно ще попереду =).

Якщо представляти якийсь проект без фішок, то у публіки не буде причин переходити на нього.

Можливо творці codeguida.com образяться на мене, але вони явно поспішили представити публіці свій проект. Єдиною фішкою у них було те, що статті виходять українською мовою, але цього точно замало.

В мене фішок точно не бракуватиме, але ви праві - це може затягнутись... сподіваюсь все таки десь на осінь представити хоча б на ріплейсі бета версію, а через місяць-другий, якщо не випливуть явні косяки, то і на ДОУ ризикну засвітитись.