Есть ли способ в Javascript настроить время перекомпоновки браузера?

Мне нужно иметь возможность протестировать конкретную сборку браузера на основе webkit, и я измеряю время, необходимое для выполнения определенных действий, таких как манипуляции с DOM, ограничения памяти и т. д.

У меня есть тест ниже, который записывает время, необходимое для одновременной загрузки 10 довольно тяжелых изображений PNG. В коде мне нужно иметь возможность засечь время, необходимое для завершения загрузки. Я попытался установить функцию onLoad для динамического объекта изображения, чтобы получить время в мс. Однако, как показано в шапке ниже, он дает неточное показание, потому что показание, которое он дает, является крошечным из-за того, что он записывает только часть передачи данных нагрузки, а затем возникает значительная (3000 + мс) задержка, когда изображения доступны для просмотра - обведены синим цветом, это цикл переформатирования браузера.

Есть ли какое-то событие в webkit, которое я могу использовать для записи, когда браузер завершил перекомпоновку, чтобы я мог сравнить это? Мне нужно иметь возможность записывать время в миллисекундах в коде, потому что тестируемая мной сборка webkit не имеет инструментов разработчика. Я могу наблюдать разницу в Chrome в порядке, но производительность между двумя сборками сильно различается, и мне нужно иметь возможность точно измерить ее для сравнения.

тест изображения


javascript dom performance reflow webkit
person giles    schedule 28.05.2012    source источник
comment
В небольшом масштабе вы можете использовать программное обеспечение для захвата экрана и (вручную) найти точку, где загружается изображение.   -  person Rob W    schedule 28.05.2012
comment
В этой превосходной статье о перекомпоновке/перекраске упоминается SpeedTracer для webkit — может помочь?   -  person Erik Eidt    schedule 30.08.2012

Ответы (2)


arrow_upward
1
arrow_downward

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

(function(){
    var start, end;

    $(document).ready(function(){
         start = new Date()    
    });
    $(window).load(function(){
         end = new Date();
         console.log(end.getTime() - start.getTime());
    });

}());

Редактировать:

Вы видели таймер перекомпоновки браузера? По сути, он проверяет, сколько времени потребуется браузеру, чтобы вернуть управление движку JavaScript после изменений в dom. Судя по странице, он должен работать в любом браузере, хотя лично я не проверял. Возможно, вы могли бы адаптировать код, запускаемый во время тестов, чтобы синхронизировать перекомпоновку на вашей странице.

person Ryan Lynch    schedule 28.05.2012
comment
Выдает тот же результат, что и img.load — срабатывает, когда загрузка файла завершена, но все еще остается большая несвоевременная пауза между запуском перекомпоновки браузера и завершением. - person giles; 28.05.2012

arrow_upward
1
arrow_downward

Кроме того, вы можете взглянуть на стресс-тест CSS. Букмарклет отлично подходит для тестирования производительности страницы. http://andy.edinborough.org/CSS-Stress-Testing-and-Performance-Profiling

Как насчет того, чтобы установить PNG как div background-image и запустить стресс-тест, он должен включать/отключать изображение несколько раз с таймингами.

person Paul    schedule 29.08.2012