Вопрос по фронтэнду: формирование странички средствами JS и jQuery

Р
На сайте с 17.05.2011
Offline
136
1869

Я планирую сделать так:

Изначально в HTML документе будут некоторые элементы (в моем случае это div-ы, содержащие краткую инфу о пользователях, пока пустую), которые я сразу средствами jQuery сохраняю в переменную и тут же удаляю:

html_users = jQuery('#contact-list')[0].outerHTML;

jQuery('#contact-list').html('');

Потом я AJAX-ом подгружаю данные из моего API и восстанавливаю из переменной элементы заполняя параллельно данными (имя, фотка, идентификатор и т.д.).

Вернее, я это еще не сделал, но я так планирую.

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

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

Есть ли еще какие-нибудь факторы, о которых следует подумать? Раньше я уже поднимал эту тему немножко в другом ключе, и были высказаны вот какие соображения:

1) Это медленно (ну не знаю, у меня все работает довольно быстро, в т.ч. на мобильном)

2) Не на всех платформах может работать. Но для пущей совместимости я хочу все что можно по-возможности делать средствами jQuery, он, вроде, умеет адаптироваться к старым браузерам...

ДП
На сайте с 23.11.2009
Offline
203
#1

Так потихоньку можно прийти к шаблонизаторам клиенским, а от них - так вообще в фреймворкам типа ангуляра, ембера, vue и т.д.

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

tommy-gung
На сайте с 22.11.2006
Offline
303
#2
Рамарио:
переменную и тут же удаляю:
...
jQuery('#contact-list').html('');

.remove();

Здесь не могла быть ваша реклама
Р
На сайте с 17.05.2011
Offline
136
#3
tommy-gung:
.remove();

Я так понимаю по-тому, что быстрее?

S
На сайте с 30.09.2016
Offline
469
#4

Это совершенно другой метод с совершенно другим назначением.

Отпилю лишнее, прикручу нужное, выправлю кривое. Вытравлю вредителей.
tommy-gung
На сайте с 22.11.2006
Offline
303
#5
Рамарио:
Я так понимаю по-тому, что быстрее?

потому что удаляет, а не очищает

S1
На сайте с 15.09.2016
Offline
9
#6
Рамарио:
Есть ли еще какие-нибудь факторы, о которых следует подумать?

Это не будет индексироваться Яндексом. Тот блок, который вы загрузите джава-скриптом не будет проиндексирован Яндексом, т.к. у него проблемы с исполнением JS-кода. У Гугла таких проблем нет.

---------- Добавлено 16.02.2017 в 21:31 ----------

Рамарио:
Я так понимаю по-тому, что быстрее?

И очистка и тем более удаление элемента из DOM - это тяжелые и медленные операции. Используйте простое скрытие (display: none). В jquery это метод hide()

SEO анализ сайта (https://seo11.ru/)
Р
На сайте с 17.05.2011
Offline
136
#7
seo11:
Это не будет индексироваться Яндексом. Тот блок, который вы загрузите джава-скриптом не будет проиндексирован Яндексом, т.к. у него проблемы с исполнением JS-кода. У Гугла таких проблем нет.

---------- Добавлено 16.02.2017 в 21:31 ----------


И очистка и тем более удаление элемента из DOM - это тяжелые и медленные операции. Используйте простое скрытие (display: none). В jquery это метод hide()

Честно говоря, я думал, что все поисковики (включая Гугл) не умеют исполнять JS...

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

По поводу "медленные операции" - спасибо, учту. hide действительно лучше. Однако, замечу, что у меня в браузере пока все (.html('')) работает очень быстро, вообще даже не заметно (а комп у меня прямо скажем - слабенький).

D
На сайте с 31.01.2017
Offline
15
#8
Рамарио:
По поводу "медленные операции" - спасибо, учту. hide действительно лучше. Однако, замечу, что у меня в браузере пока все работает очень быстро, вообще даже не заметно (а комп у меня прямо скажем - слабенький).

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

S1
На сайте с 15.09.2016
Offline
9
#9
Рамарио:
Честно говоря, я думал, что все поисковики (включая Гугл) не умеют исполнять JS...

Гугл прекрасно исполняет и индексирует JS-код. Даже SPA-сайты, которые полностью построены на JS (Angular, React и т.д.), индексируются Гуглом без проблем. Вот моя статья на Хабре по этому вопросу - https://habrahabr.ru/post/314172/

AP
На сайте с 12.06.2015
Offline
74
#10
Рамарио:
Я планирую сделать так:
Изначально в HTML документе будут некоторые элементы (в моем случае это div-ы, содержащие краткую инфу о пользователях, пока пустую), которые я сразу средствами jQuery сохраняю в переменную и тут же удаляю:

html_users = jQuery('#contact-list')[0].outerHTML;
jQuery('#contact-list').html('');

Потом я AJAX-ом подгружаю данные из моего API и восстанавливаю из переменной элементы заполняя параллельно данными (имя, фотка, идентификатор и т.д.).

Зачем Вам вообще скрытые поля элементы? Сразу на страницу выдавайте значение переменной:

html_users = "user_vasya";

И при загрузке страницы останется только п.2, то есть подгружать через ajax данные по значению этой переменной.

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий