Как освободить системные ресурсы / использование процессора на веб-странице? - PullRequest
Новая
       16

Как освободить системные ресурсы / использование процессора на веб-странице?

0 голосов
/ 16 октября 2018

Я использую этот шаблон HTML: http://volar.makwan.net/index02.html

Многие из моих пользователей испытывают высокую загрузку ЦП на своих ноутбуках и нетбуках при просмотре веб-сайта, Safari также выдает это сообщение, когда они находятся на веб-сайте дляболее чем на несколько минут: «Эта веб-страница потребляет значительную энергию. Закрытие может повысить быстродействие вашего Mac».

Моя первая попытка освободить ресурсы состояла в том, чтобы избавиться от эффекта шейдера на плоской поверхности, когдапользователь прокручивает с главного экрана, используя этот код: 

window.onscroll = function() {
  let home = document.getElementById('home-section');
  let effect = document.getElementById('fss');
  if(!isElementInViewport(home) && isVisible) {
    effect.style.display = "none"
    console.log("effects disabled in order conserve resources");
    isVisible = false;

  } else if(isElementInViewport(home) && !isVisible){
    effect.style.display = "block";
    isVisible = true;
  }

};

Это сработало довольно хорошо, но есть другие элементы на странице, которые все еще занимают много ресурсов.

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

Ответы [ 2 ]

0 голосов
/ 16 октября 2018

Это то, что вы делаете в fssinit.js.requestAnimationFrame рендерит со скоростью 60 кадров в секунду.Причудливая графика, но также ресурсоемкая.

Попробуйте замедлить requestionAnimationFrame с помощью setTimeout и посмотрите, поможет ли это.Если это так, то это источник вашей проблемы.В fssinit.js попробуйте выполнить 

function animate() {
  now = Date.now() - start;
  update();
  render();
  setTimeout(() => requestAnimationFrame(animate), 500);
}

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

0 голосов
/ 16 октября 2018

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

Теперь откройте ее.Boom !, доходит до 50%.(У меня на самом деле подскочило до 95%)

В верхней части вашей страницы есть большая красная анимированная область.Требуется весь экран.Теперь щелкните правой кнопкой мыши где-нибудь вокруг него и выберите «Инспектировать элемент» из меню.Теперь вы увидите источник, он называется "home-section" , это идентификатор тега

.Щелкните правой кнопкой мыши по источнику и выберите «Удалить».(Обычно я сначала просто скрываю их, чтобы посмотреть, является ли это только рендерингом; это не так.)

Итак, Удалить элемент .

Aa, процессорснова дышит!

Итак, это ваш преступник.Вы можете продолжить тестирование, чтобы увидеть, если за это отвечает только его часть, я просто иллюстрирую концепцию здесь.Обычно несколько удалений ясно показывают, в чем проблема.По сути, ваша проблема где-то в голове, я подозреваю, что nr1 - это эффект многоугольного перехода, который следует за мышью повсюду.

В любом случае, получайте удовольствие, осматривая!

...