powered by simpleCommunicator - 2.0.59     © 2025 Programmizd 02
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Формирование HTML c помощью JS. Нужно экспертное мнение.
25 сообщений из 353, страница 10 из 15
Формирование HTML c помощью JS. Нужно экспертное мнение.
    #39510912
Фотография Petro123
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
вадя,
даже если не смотреть, что там лежало у ОДНОЙ знакомой в Африке.
Разве неинтересен другой проект? Другая кастрюля? Другая отвёртка?
вадяя высказываю своё мнение, не нравится не слушай
я тоже высказал, не нравится - не слушай)).
10 лет про сокеты - скучновато.
...
Рейтинг: 0 / 0
Формирование HTML c помощью JS. Нужно экспертное мнение.
    #39510914
Фотография Petro123
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
вадясделать проект с ws, ему очень понравилось. а ты пробовал?
сожалею. Всё что мне попадалось - серверная сторона)) где "клиентщик" не командует протоколом.
Много значения имеют фреймворки, на которые у тебя аллергия.
...
Рейтинг: 0 / 0
Формирование HTML c помощью JS. Нужно экспертное мнение.
    #39510923
mars478
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
skyANAДля хохмы хотелось бы узнать, а понимаете ли Вы от чего зависит время, что Вы предлагаете сравнивать?

Боюсь что понимаю суть многих оптимизаций клиентского жс и работы с хтмл - бывали случаи когда мне удавалось некоторые jquery ui компоненты ускорять на пару порядков своими костылями (например, автокомплит с 8к строк открывался с поиском по одному часто встречаемому символу в оригинале 3+ секунд, после модернизации - стабильно быстрее 200мс). Приходилось даже в странице реализовывать вывод таблиц в 300 колонок и десятками тысяч строк. Без особых тормозов.

Конкретно в случае с вставкой разметки все зависит в первую очередь от исходного дома и наличия мутейшн обсерверов, в простейших случаях разница будет ничтожна. В более сложных когда $.html() с его проверками правильности синтаксиса начинает выполняться дольше 200мс по причине слишком большой исходной страницы или до одури огромной вставки начинаются замеры производительности, всплывают те самые родные браузерные inner(outer)HTML`и, подбирается правильный вариант иницализции дополнительной логики (допустим, тех же jquery ui виджетов в вставляемой разметке).

Еще интересный случай - перенос кусков разметки с сохранением логики на детачах/аттачах из jq, но это уже выходит за рамки темы обсуждения.

А теперь излагайте Ваше мнение по поводу производительности, я тоже послушаю-почитаю. Если оно есть.
...
Рейтинг: 0 / 0
Формирование HTML c помощью JS. Нужно экспертное мнение.
    #39510926
Фотография skyANA
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
mars478в простейших случаях разница будет ничтожна
Спасибо, мы как раз про этот случай.
...
Рейтинг: 0 / 0
Формирование HTML c помощью JS. Нужно экспертное мнение.
    #39510952
Фотография Изопропил
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
mars478сравнить замену через innerHTML/outerHTML и html() из jquery.
jquery при помощи святого духа DOM модифицирует
...
Рейтинг: 0 / 0
Формирование HTML c помощью JS. Нужно экспертное мнение.
    #39510953
Фотография Изопропил
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
mars478В более сложных когда $.html() с его проверками правильности синтаксиса начинает выполняться дольше 200мс по причине слишком большой исходной страницы или до одури огромной вставки начинаются замеры производительности, всплывают те самые родные браузерные inner(outer)HTML`и, подбирается правильный вариант иницализции дополнительной логики (допустим, тех же jquery ui виджетов в вставляемой разметке).
без jquery - никак?
...
Рейтинг: 0 / 0
Формирование HTML c помощью JS. Нужно экспертное мнение.
    #39510956
mars478
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Изопропилбез jquery - никак?

описан и способ на vanilla js, прочитай еще раз, ковбой.
...
Рейтинг: 0 / 0
Формирование HTML c помощью JS. Нужно экспертное мнение.
    #39510959
Фотография Изопропил
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
mars478,

без фреймоворков - не умеешь? (если так уж припёрла проблема производительности)
...
Рейтинг: 0 / 0
Формирование HTML c помощью JS. Нужно экспертное мнение.
    #39510960
mars478
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Изопропилmars478,

без фреймоворков - не умеешь? (если так уж припёрла проблема производительности)

молодой человек, vanilla js это чистый яваскрипт.
...
Рейтинг: 0 / 0
Формирование HTML c помощью JS. Нужно экспертное мнение.
    #39510972
вадя
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Petro123вадясделать проект с ws, ему очень понравилось. а ты пробовал?
сожалею. Всё что мне попадалось - серверная сторона)) где "клиентщик" не командует протоколом.
Много значения имеют фреймворки, на которые у тебя аллергия.
сочувствую, значит не удалось вкусить всей прелести.
...
Рейтинг: 0 / 0
Формирование HTML c помощью JS. Нужно экспертное мнение.
    #39510973
вадя
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Petro123,
ну не 10, а меньше..
...
Рейтинг: 0 / 0
Формирование HTML c помощью JS. Нужно экспертное мнение.
    #39510995
Фотография Petro123
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
вадясочувствую, значит не удалось вкусить всей прелести.
Для того чтобы судить о качестве приготовленной яичницы, необязательно уметь нести яйца (с)
Шутка.
...
Рейтинг: 0 / 0
Формирование HTML c помощью JS. Нужно экспертное мнение.
    #39511007
вадя
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Petro123вадясочувствую, значит не удалось вкусить всей прелести.
Для того чтобы судить о качестве приготовленной яичницы, необязательно уметь нести яйца (с)
Шутка.
тут боле подходит
«не читал, но осуждаю...»
...
Рейтинг: 0 / 0
Формирование HTML c помощью JS. Нужно экспертное мнение.
    #39511012
monstrU
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
PrizzrakЯ чёт-т не понял, а формировать html c помощью JS по вашему задача элементарная?
сформировать html на основе json достаточно просто, если пользоваться js шаблонизатором типа EJS (каким то аналогом), применить react js
...
Рейтинг: 0 / 0
Формирование HTML c помощью JS. Нужно экспертное мнение.
    #39511014
monstrU
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
skyANAmonstrUпоскольку речь идет про получение данных по ajax в json-html, то это подразумевает, что речь идет об каких-то операциях пользователя.
вопрос - когда они выполняются - при старте страницы или после первой загрузки.
Вы издеваетесь? :) Речь идёт о, с**а, фильтрах в каталоге интернет-магазина.
теперь понятнее.
то есть на страницу вывалили каталог товаров, и далее пользователь включает\выключает фильтры.
тут если на проекте нет angular, react js или схожего фреймворка я бы применял Js шаблонизатор.
...
Рейтинг: 0 / 0
Формирование HTML c помощью JS. Нужно экспертное мнение.
    #39511019
вадя
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
monstrUPrizzrakЯ чёт-т не понял, а формировать html c помощью JS по вашему задача элементарная?
сформировать html на основе json достаточно просто, если пользоваться js шаблонизатором типа EJS (каким то аналогом), применить react js
так же просто сформировать html из правильно сыормироваггошо резульсета и без всяких шаблонов. при этом отпадает лишнее преобразование.
...
Рейтинг: 0 / 0
Формирование HTML c помощью JS. Нужно экспертное мнение.
    #39511020
вадя
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
PS,
на java при этом происходит увеличение скоросли создания строки
...
Рейтинг: 0 / 0
Формирование HTML c помощью JS. Нужно экспертное мнение.
    #39511021
monstrU
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
вадяmonstrUпропущено...

сформировать html на основе json достаточно просто, если пользоваться js шаблонизатором типа EJS (каким то аналогом), применить react js
так же просто сформировать html из правильно сыормироваггошо резульсета и без всяких шаблонов. при этом отпадает лишнее преобразование.
на проекте, где верстальщик и программист разные люди, можно приобрести кое-какие проблемы
...
Рейтинг: 0 / 0
Формирование HTML c помощью JS. Нужно экспертное мнение.
    #39511024
вадя
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
monstrUвадяпропущено...

так же просто сформировать html из правильно сыормироваггошо резульсета и без всяких шаблонов. при этом отпадает лишнее преобразование.
на проекте, где верстальщик и программист разные люди, можно приобрести кое-какие проблемы
тут надо уметь сотрудничать , понимать работу доуг друга,
...
Рейтинг: 0 / 0
Формирование HTML c помощью JS. Нужно экспертное мнение.
    #39511032
Фотография бухалтер фантоцци
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
mars478... по причине слишком большой исходной страницы или до одури огромной вставки начинаются замеры производительности ...
Просьба рассказать, как были проведены замеры производительности.
Интересно.

Если через время выполнения JS-кода, то это туфта, о реальном рендеринге (реальном отображении) ничего не говорит.
Особенно заметна разница на мобильных, где JS "отстреливается" за время n , а реальные изменения на странице видны через 10n и более (в случае больших объёмов).
Я лично не нашёл другого способа, как сравнивать "на глаз" или с помощью ручного секундомера, когда объём вставляемых данных довольно большой.

Чем больший объём - тем больше разница в реальном рендеринге, скорость выполнения JS на рендеринг не влияет.

Сравните по этому тесту - делался больше года назад - уже возможны некоторые изменения в браузерах.
Реальная скорость исполнения JS (формирование строки для innerHTML-вставки) - нижняя длинная кнопка.
Можно создать статичный Грид, и Перемещаемый Грид соответствующими кнопками и посмотреть разницу.
Имхо этот тест максимально приближен к реальным приложениям.
...
Рейтинг: 0 / 0
Формирование HTML c помощью JS. Нужно экспертное мнение.
    #39511033
Фотография бухалтер фантоцци
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
P.S. да, использовался можно сказать vanilla JS (сборка через текстовые строки - а строковые операции очень быстры) с последующим innerHTML
...
Рейтинг: 0 / 0
Формирование HTML c помощью JS. Нужно экспертное мнение.
    #39511040
вадя
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
бухалтер фантоцци,
из приктики - самое медленное было рендеринг вставленного html самим браузером, а добавить к этому доп работу со строками.....
...
Рейтинг: 0 / 0
Формирование HTML c помощью JS. Нужно экспертное мнение.
    #39511045
Фотография бухалтер фантоцци
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
вадябухалтер фантоцци,
из приктики - самое медленное было рендеринг вставленного html самим браузером, а добавить к этому доп работу со строками.....
у меня Chromium 56 - новый грид 10 х 5000 (50 тыс. ячеек) рендерит 2-3 сек, а строковые операции сборки (общее выполнение JS-кода с вызовом .innerHTML() ) делает примерно за 0.2 - 0.3 сек.

На бюджетных мобильных (особенно SmartTV) гриды более чем 3000 ячеек рендерятся уже с видимой задержкой, хотя JS выполняется довольно быстро.
...
Рейтинг: 0 / 0
Формирование HTML c помощью JS. Нужно экспертное мнение.
    #39511048
Фотография бухалтер фантоцци
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Да, кстати, современные браузеры стараются оптимизировать,
и при повторении (со 2-3 раза) некоторые вещи делают уже значительно быстрее.
...
Рейтинг: 0 / 0
Формирование HTML c помощью JS. Нужно экспертное мнение.
    #39511054
Фотография Petro123
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
вадятут боле подходит
«не читал, но осуждаю...»
что именно читать? Голый сокет и отсутствие библиотек (паттернов)?
Вот это твоё?
Код: sql
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
var con;
var rg = /^([a-z_0-9.]{1,})\|([\s\S]*)/; // для выделения команды
 var rg_url = /https?\:\/\/([\S\w][^:|/]{1,})/; // для выделения из адреса - самого имени , либо ip, 
исключает необходимость отслеживать имя/адрес сервера/сайта
                var ws = rg_url.exec(document.URL);
                con = new WebSocket('ws://' + ws[1] + ':<%=Singleton.getPORT_WS()%>'); // порт прописывется в Singleton , мой вариант , кому как нравится

                con.binaryType = "arraybuffer";  // почитать в спеках
                con.onopen = function (e) {
                    con.send('auth|<%=request.getSession().getAttribute("token")%>~<%= session.getId()%>');
//мой вариант авторизации ws
//для начала надо войти по логину/паролю на странице входа
//первой передаётся команда auth c  данными логин разделитель (~) сесия - на сервере проверяется есть ли токое, если нет ws закрывается //сервером. если есть это записывается в параметры ws коннекта, для дальнейшей возможности отправлять сообщения от пользователя //пользователю   это мой работающий вариант, опробован. 
//
                };
                con.onmessage = function (response) {
                    if (typeof (response.data) === 'string') {   //проверка на тип данных 
                        var r = rg.exec(response.data);  //делим на команду и данные
                        try {
                            if (r[1].includes('.')) {  // небольшая фишка для обращения к "свойствам объекта"
                                var d = r[1].split('.');  //проверка на наличие точки
                                window[d[0]][d[1]](r[2]);   //"аналог рефлексии"  d[0] -имя объекта, d[1] - имя свойства, r[2] данные
                            } else {
                                window[r[1]](r[2]);  // стандартный вызов
                            }
                        } catch (er) {
                            console.log('ошибка ' + er.stack);  //обработка ошибки, правда такой не очень информативет перехватывает и другие ошибки...
                            console.log('вызов ' + r[1]);   //пока оставлено как есть....
                            console.trace();

                        }
                    } else {  //тут для передачи бинарных данных, всё аналогично, пока заглушка, небыло необходимости, картинки передвались в base64
                        //                var uInt8Array = new Uint8Array(response.data);
                        //                var arrayBuffer = response.data;
                        //                var bytes = new Uint8Array(arrayBuffer);
                        //                console.log(bytes);
                        //               
                    }
                };
         //тут пока заглушка, что-либо городить не было причин, поэтому оставлено на будущее....
                  con.onclose = function (event) {
                    if (event.wasClean) {
                        console.log('Соединение закрыто чисто');
                    } else {
                        console.log('закрытие');
                    }
                    console.log('Код: ' + event.code + ' причина: ' + event.reason);
                };
                con.onerror = function (error) {
                    console.log("Ошибка ws " + error.message);
                };

...
Рейтинг: 0 / 0
25 сообщений из 353, страница 10 из 15
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Формирование HTML c помощью JS. Нужно экспертное мнение.
Найденые пользователи ...
Разблокировать пользователей ...
Читали форум (0):
Пользователи онлайн (0):
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]