Должен ли я использовать requestAnimationFrame для распределения вычислений?

Question

У меня есть большой расчет JS, который я хочу выполнить на загрузке страницы. На достойном компьютере расчет занимает около 5-10 секунд, что слишком велико, потому что браузер замерзает за это время.

Я могу легко нарезать вычисление до кусков, которые занимают около 8 мс для вычисления. Я хочу сделать каждый кусок, добавив его в элемент холста. Было бы разумно попытаться распределить эти куски с помощью requestAnimationFrame? Есть ли какие-то лучшие альтернативы (и почему)?

---

Справочная информация: Я использую html2canvas для отображения страницы на изображении, а затем я размывания изображения с помощью сверхбыстрых Размытие (http://www.quasimondo.com/BoxBlurForCanvas/FastBlurDemo.html). Причиной этого является повторение эффекта матового стекла iOS7. Для получения дополнительной информации об этом см. http://abduzeedo.com/ios7-frosted-glass-effect-html-5-and-javascript. В зависимости от размеров страницы это занимает довольно много времени.

Answer 1

Если вы не планируете выполнять отдельные шаги, вы должны использовать setInterval или setTimeout. Нет смысла использовать requestAnimationFrame, если вы не хотите анимировать.

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

var timeoutId = 0, 
    calc = function() { 
     // Your calculations go here 

     if(!finished) { 
      timeoutId = setTimeout(calc, 4); 
     } 
} 

calc();