3

I recently read the following article by Stoyan about browser reflow. It takes in depth look about what is reflow and repaint, what impact on performance does it have and how to improve things. It also shows some third party tools which can help to visualize this.

I started to look if it possible to somehow detect reflows in the browser without third party tools and have some metrics based on this (for example in javascript I can calculate how many ajax calls has been fired).

Because my searches were unsuccessful, I am asking here if it is possible to calculate the number of reflows/repaints triggered on some actions? For example if I have a function

function foo(){
    // trigger and manipulate some DOM elements
    $.post( "ajax/test", function( data ) {
        // do some manipulations with data and attach it to the DOM
    });
}

I would like to know how many reflows/repaints has this function caused.

This question, also sounds similar is looking for a tool to do this (such tools are described in the article).

Community
  • 1
  • 1
Salvador Dali
  • 214,103
  • 147
  • 703
  • 753
  • @eXecute have you read my question? In the end I am writing that I looked at this question and also it sounds similar it looks for 3rd party tools. – Salvador Dali Feb 27 '14 at 02:50
  • 1
    [Relevant article](https://developers.google.com/speed/articles/browser-paint-events). I don't *think* there is anything outside of browser/third party tools to do this. I can see some limited cases of it being useful though – Zach Saucier Feb 27 '14 at 03:47
  • 1
    In Google Chrome dev tools there is the Timeline tab where you can record and then filter by repaints. Is that the kind of thing you're looking for? Or are you looking for some code that would detect it and then log a quantity somewhere for you? – keithwyland Feb 27 '14 at 04:23

0 Answers0