На локальном сервер лаганные анимации в CEF

[GasikPasik]

Я новичок и я написал свой "гавно код" на react.
На рейдже же запускаю сервер.

CEF открываю с помощью

loginScreen = mp.browsers.new("http://localhost:3000/")
loginScreen.execute("mp.invoke('focus', true)")

В целом вот вопросы:

1) @keyframe в css сильно бьют по производительности?
2) Может на локальном сервере есть config, в котором можно увеличить выделяемую мощнорсть?
3) react 18 версии, влияет? (по факту скачал с офф сайта node.js и всё)
4) react-transition-group - а из-за него может быть лаганые анимации?
5) А в этом проблема может быть?

import Particles from "react-tsparticles";
import { loadFull } from "tsparticles";

Проблема не фпс. Просто сами по себе анимации ужасно дёрганые, как-будто 5 ФПС.
На других серверах всё хорошо(не в ПК проблема)
Вот пример.

https://imgur.com/a/bmeWJY3

Насчёт частиц. С ними и без них - одно и тоже.
Видел подобное на другом сервере - не лагает.


Помогите пожалуйста, я предоставлю всё что надо, рад любому совету

P.S. В браузере работает всё на ура

 

[akudinov28]

У меня такая же проблема с vuejs. Причем одни компоненты, которые используют keyframes, работают нормально (accordion list, carousel), а другие, в которых совсем немного css кода, и которые не используют keyframes, лагают ужасно (модальные окна, например). Тоже подожду тут знающих людей.

 

[XDeveluxe]

На всякий случай напишу, что страницу стоит открывать вот так:

mp.browsers.new("package://folder/file.html");

Через IP/URL тоже можно, но не забудьте в релизной версии изменить localhost на какую-то реальную ссылку, иначе столкнётесь с тем, что у вашего игрока не будет файлов браузера на localhost'е.

 

[GasikPasik]

На всякий случай напишу, что страницу стоит открывать вот так:

mp.browsers.new("package://folder/file.html");

Через IP/URL тоже можно, но не забудьте в релизной версии изменить localhost на какую-то реальную ссылку, иначе столкнётесь с тем, что у вашего игрока не будет файлов браузера на localhost'е.

Да я знаю, но спасибо)

 

[Harland David Sanders]

На всякий случай напишу, что страницу стоит открывать вот так:

mp.browsers.new("package://folder/file.html");

Через IP/URL тоже можно, но не забудьте в релизной версии изменить localhost на какую-то реальную ссылку, иначе столкнётесь с тем, что у вашего игрока не будет файлов браузера на localhost'е.

Факт, лучше всего юзать рейджовый метод чем стандартый какой-то порт веб-сервера, даже на локалхосте.
Потом могу предположить что проблема все таки в версии React и react-transition-group - но тут я не уверен.

На VueJS писали анимацию - все было плавно. React на 16 версии - по памяти тоже все было ок, не так плавно как в браузере, но все же.

 

[GasikPasik]

Факт, лучше всего юзать рейджовый метод чем стандартый какой-то порт веб-сервера, даже на локалхосте.
Потом могу предположить что проблема все таки в версии React и react-transition-group - но тут я не уверен.

На VueJS писали анимацию - все было плавно. React на 16 версии - по памяти тоже все было ок, не так плавно как в браузере, но все же.

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

 

[akudinov28]

Не стал создавать новую тему, спрошу здесь, может кто сталкивался. Опытным путём пришёл к выводу, что лагать в CEF начинает блок со свойством backdrop-filter (конкретно у меня это blur, но эксперименты показывают, что любая функция этого свойства лагает в CEF). При этом во всех обычных десктопных и мобильных браузерах всё работает штатно. Может кто-то сталкивался? Обходные пути?

 

[Amazingevich]

Не стал создавать новую тему, спрошу здесь, может кто сталкивался. Опытным путём пришёл к выводу, что лагать в CEF начинает блок со свойством backdrop-filter (конкретно у меня это blur, но эксперименты показывают, что любая функция этого свойства лагает в CEF). При этом во всех обычных десктопных и мобильных браузерах всё работает штатно. Может кто-то сталкивался? Обходные пути?

блюр сам по себе на рейдже не рекомендуется юзать, он достаточно редко "не лагает"

 

[Harland David Sanders]

Не стал создавать новую тему, спрошу здесь, может кто сталкивался. Опытным путём пришёл к выводу, что лагать в CEF начинает блок со свойством backdrop-filter (конкретно у меня это blur, но эксперименты показывают, что любая функция этого свойства лагает в CEF). При этом во всех обычных десктопных и мобильных браузерах всё работает штатно. Может кто-то сталкивался? Обходные пути?

backdrop-filter не работает в рейдже, ну или вызывает косяки в верстке. Щас прикреплю скрин если найду.