Самый эффективный способ дребезжать непрерывное выполнение JavaScript на веб-странице

Question

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

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

Обновление: Чтобы уточнить, код, о котором идет речь, представляет собой кадры рендеринга на canvas непрерывно. Единицей работы здесь является один кадр. Мы стремимся к максимально возможной частоте кадров.

Answer 1

Можно использовать window.postMessage(), чтобы преодолеть ограничение на минимальное время, установленное setTimeout. См. this article. Демо доступно here.

Answer 2

веб-рабочие что-то попробовать

https://developer.mozilla.org/en-US/docs/DOM/Using_web_workers 

Answer 3

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

var Main = function(){ 
    this.queue = []; 
    this.actions = {}; 

    requestAnimationFrame(this.loop) 
} 

Main.prototype.loop = function(){ 
    while (this.queue.length){ 
     var action = this.queue.pop(); 
     this.executeAction(e); 
    } 

    //do you rendering here 
    requestAnimationFrame(this.loop); 
} 

Main.prototype.addToQueue = function(e){ 
    this.queue.push(e); 
} 

Main.prototype.addAction = function(target, event, callback){ 
    if (this.actions[target] === void 0) this.actions[target] = {}; 
    if (this.actions[target][event] === void 0) this.actions[target][event] = []; 

    this.actions[target][event].push(callback); 
} 

Main.prototype.executeAction = function(e){ 
    if (this.actions[e.target]!==void 0 && this.actions[e.target][e.type]!==void 0){ 
     for (var i=0; i<this.actions[e.target][e.type].length; i++){ 
      this.actions[e.target][e.type](e); 
     } 
    } 
} 

Так в основном вы должны использовать этот класс для обработки всего, что происходит на странице. Каждый обработчик событий будет onclick='Main.addToQueue(event)' или, тем не менее, вы хотите добавить свои события на свою страницу, просто укажите им, чтобы добавить событие в реплику, и просто используйте Main.addAction, чтобы направить эти события на то, что вы хотите, чтобы они делали. Таким образом, каждое действие пользователя выполняется, как только ваш холст будет завершен, и прежде чем он снова будет перерисован. До тех пор, пока ваш холст окажется на достойной частоте кадров, ваше приложение должно оставаться отзывчивым.

EDIT: забыл «это» в requestAnimationFrame (this.loop)

Answer 4

Вы можете настроить производительность за счет изменения объема работы вы делаете на вызов. В вашем вопросе вы говорите, что делаете «небольшой кусок работы». Установите параметр, который контролирует объем выполняемой работы и пробует различные значения.

Возможно, вы также попытаетесь установить тайм-аут до, вы делаете обработку. Таким образом, затраченная на обработку обработка должна учитывать любой минимальный набор браузеров.

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

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