Измерение времени оплавления и рисования в WebKit

Question

Я разрабатываю пользовательский интерфейс на основе JavaScript / HTML на встроенном оборудовании со слабым процессором и WebKit.

Производительность не идеальна, и я хочу профилировать приложение, особенно синхронизировать события перекомпоновки и перерисовки, чтобы получить точные данные о фактической производительности, а не субъективные и меняющиеся мнения.

Синхронизация с использованием обычного getTime () до и после не работает, поскольку WebKit откладывает перекомпоновку и перерисовку после обработчиков событий.

Я пытался профилировать приложение под Speed ​​Tracer, но вычисления настолько дешевы, что события reflow даже не отображаются на оборудовании ПК. Я думаю, что какой-то инструмент, более сфокусированный на reflow / repaint, все еще может быть полезен.

Какие-нибудь советы о том, как получить достоверные данные для этого?

Answer 1

Эти ссылки могут быть полезны. Кто-то из JP нашел способ сделать красивую визуализацию reflow для gecko: http://blog.mozilla.com/gen/2009/04/09/how-to-make-your-own-gecko-reflow-video/

К сожалению, это требует специальной сборки Firefox. Инструкции здесь: https://developer.mozilla.org/En/Simple_Firefox_build

Answer 2

Делая что-то вроде получения высоты документа, заставляет перекомпоноваться. Может быть, вы можете объединить это с getTime ().

Например:

var t1, t2;
t1 = new Date().getTime();

// Do some DOM manipulation

// Force reflow
document.body.offsetHeight;

t2 = new Date().getTime();
console.log(t2 - t1);