udacity/frontend-nanodegree-mobile-portfolio

resizePizzas function using User Timing API incorrectly

mouthbreathingretard opened this issue · 1 comments

The file views/js/main.js lines 402–467:

var resizePizzas = function(size) { 
  window.performance.mark("mark_start_resize");   // User Timing API function

  // Changes the value for the size of the pizza above the slider
  function changeSliderLabel(size) {
    ...
  }

  changeSliderLabel(size);

  // Returns the size difference to change a pizza element from one size to another. Called by changePizzaSlices(size).
  function determineDx (elem, size) {
    ...
  }

  // Iterates through pizza elements on the page and changes their widths
  function changePizzaSizes(size) {
    ...
  }

  changePizzaSizes(size);

  // User Timing API is awesome
  window.performance.mark("mark_end_resize");
  window.performance.measure("measure_pizza_resize", "mark_start_resize", "mark_end_resize");
      var timeToResize = window.performance.getEntriesByName("measure_pizza_resize");
      console.log("Time to resize pizzas: " + timeToResize[0].duration + "ms");
}

The problem here (and since it's more serious than all the problems I found in this issue, I am reporting it as a separate issue ) is that the code fails to report correctly after the first time a user resizes the pizzas with the slider bar.

Even though the resizePizzas code runs freshly from the top each time, the Timing API function window.performance.getEntriesByName(string) function returns an array based on data that isn't freshly renewed. Timing API remembers all of the measure_pizza_resize measurements and the array it returns contains each one.

So if you resize once, it reports element 0's duration and that is perfect.

But when you move the sliderbar and resize the pizzas again, the timeToResize array at element 0 has the data from the first resize and it re-reports old data and that is a failure. (The element at index 1 would contain the data we need to make the function perfectly in this case.)

To fix this, I think you can either make use of the clearMeasures method which is explained at the link on line 12 of the same file, and also at the W3, or change the code inside of resizePizzas to let it report from the correct measure_pizza_resize measures.


Technically, you have the exact same problem on line 481.

However, the problem shouldn't be visible to users because the performance measure there should only ever happen when the whole page loads or refreshes, and under those conditions the array will always be one element big, and thus timeToGenerate[0] always shows the correct measure.

Looks like this issues references an older version of this file. The bug referenced is no longer there. Closing issue.