Мы используем файлы cookie, чтобы упростить навигацию на этом сайте. Если вы даете свое согласие на использование файлов cookie и обработку ваших персональных данных, нажмите «Принимаю».

Тормозит страница с несколькими iframe

Домой Форумы Для программистов Тормозит страница с несколькими iframe

Просмотр 9 сообщений - с 1 по 9 (из 9 всего)
  • Автор
    Сообщения
  • #17446
    urcosmos
    Customer

    Коллеги, добрый день!
    Подскажите, пожалуйста, что можно сделать.

    Ситуация:
    Есть два проекта verge3d, вставленных на одну страницу. Каждый через свой <iframe>. Когда оба проекта загружены и готовы к работе, то навигация по странице становится затруднительной, тормозит даже скрол страницы.

    Подскажите можно ли оптимизировать работу на странице путем, например, отключения рендера одного проект verge, если он уже не виден на странице? Подскажите хотя бы примерно как это можно реализовать. Между вставками данных <iframe> есть контент и работать сразу с двумя загруженными проектами не будут. Но возможна ситуация, когда сначала посмотрят одну модель, потом пойдут вниз по станице, посмотрят вторую модель, а потом опять вернуться к первой.

    Возможно есть другие решения?

    Благодарю за внимание!

    #18071
    urcosmos
    Customer

    Update:

    Ввиду специфики работы отложил проекты в сторону. Недавно вернулся и с новым опытом решил вопрос по остановке рендера. Публикую на всякий случай, кому-то может пригодится.

    В проекте нужно найти файл с именем “названиемПроекта.js“. В нем в конце будет пустая функция runCode(app). В нее я поместил код с IntersectionObserver, который отслеживает попадает ли контейнер с приложением verge3d во вьюпорт. Если попадает, то включает рендеринг приложения, если не попадает, то выключает.

    На трех проектах проблему зависаний при просмотре сайта решил таким путем.

    Код:

    function runCode(app) {
        // add your code here, e.g. console.log('Hello, World!');
    
        const cnvContainer = app.container;
    
        const options = {
          threshold: 0.1
        };
    
        const callback = function (entries, observer) {
    
          entries.forEach((entry) => {
            if (entry.isIntersecting == true) {
              app.enableRendering();
            } else {
              app.disableRendering();
            }
          });
        };
    
        const observer = new IntersectionObserver(callback, options);
        observer.observe(cnvContainer);
      }
    #18072

    :good:

    Chief 3D Verger | LinkedIn | Twitter

    #18073
    kdv
    Участник

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

    Puzzles and JS. Fast and expensive.

    If you don’t see the meaning in something it primarily means that you just don’t see it but not the absence of meaning at all.

    #18074
    urcosmos
    Customer

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

    У себя замечал только с анимацией такую ситуацию: предположим есть анимация перемещения объекта с 1 по 300 кадр. Запускаю. На 20 кадре выключаю рендеринг, все замирает. На 100 кадре включаю рендеринг и объект продолжает свою анимацию не там, где он остановился на 20 кадре, а там, где он должен быть на 100 кадре. Т.е. его анимация все равно просчитывается все время. Не силен пока в этом. Но отключение рендеринга все равно снижает нагрузку при просмотре.

    Встречал одно из решений выключения объектов – воспользоваться методом .dispose(). Он вроде удаляет элементы. Применить его ко всему, что имеет такой метод в сцене (объекты, материалы и т.д.). Но я думаю, это не совсем подходящее решение, если использовать его с IntersectionObserver – при повторном попадании канваса во вьюпорт модель тогда будет загружаться заново, насколько я понимаю. Здесь не шарю. Лучше у спецов проконсультироваться. :scratch:

    #18075
    kdv
    Участник

    . На 20 кадре выключаю рендеринг, все замирает. На 100 кадре включаю рендеринг и объект продолжает свою анимацию не там, где он остановился на 20 кадре, а там, где он должен быть на 100 кадре.

    о том и речь: при отключении рендеринга приложение не приостанавливает работу, анимации и прочий движ выполняются, только их не видно ))) и на вращение/перемещение приложение реагирует, но не отображает изменения до включения рендеринга. а хотелось бы реально приостановить работу приложения…

    Puzzles and JS. Fast and expensive.

    If you don’t see the meaning in something it primarily means that you just don’t see it but not the absence of meaning at all.

    #18170

    а хотелось бы реально приостановить работу приложения…

    Полностью остановить можно так:

    
    app.renderer.setAnimationLoop(null);
    app.clock.stop();
    

    А включить вот так:

    
    app.animate();
    app.clock.start();
    

    Тут app.renderer.setAnimationLoop – это аналог requestAnimationFrame, который App использует, чтобы всё запустить. Если подать null, то все остановится, а app.animate() в свою очередь все снова запустит.

    Останавливать/запускать app.clock не критично для производительности – он сам по себе отрабатывать все это время не будет. Но вот он ещё используется как счетчик для анимации, поэтому если его не останавливать, то в момент включения всего приложения он бы выдал, что с остановки прошел не 1 кадр, а столько сколько была пауза, и анимация соответственно пошла бы с этого кадра.

    Co-founder and lead developer at Soft8Soft.

    #18171
    kdv
    Участник

    Вот это реально тема! Спасибо за наводку :good:

    Puzzles and JS. Fast and expensive.

    If you don’t see the meaning in something it primarily means that you just don’t see it but not the absence of meaning at all.

    #18172
    urcosmos
    Customer

    Иван, большое спасибо за информацию! :good:

Просмотр 9 сообщений - с 1 по 9 (из 9 всего)
  • Для ответа в этой теме необходимо авторизоваться.