Q:

what's rendering frame in javascript's optimization context

I'm reading this article about javascript optimization and there is the following passage there:

When visual changes are happening on screen you want to do your work
  at the right time for the browser, which is right at the start of the
  frame. The only way to guarantee that your JavaScript will run at the
  start of a frame is to use requestAnimationFrame.

And this:

Frameworks or samples may use setTimeout or setInterval to do visual
  changes like animations, but the problem with this is that the
  callback will run at some point in the frame, possibly right at the
  end, and that can often have the effect of causing us to miss a frame,
  resulting in jank.

I'm wondering what is frame here? Is it referred to a picture that browser or device puts up at the 60 fps interval? If so, how can callback run at some point in the frame as stated in the passage?

A:

Yes, a frame in this context is the update cycle of the screen.
The screen is not updated all at once, instead it is updated from the top to the bottom during the update cycle. In a CRT monitor it was an actual beam sweaping across the screen that lit up the phosphor, in an LCD screen it's just pixels that get updated with new data but it's sweaping in the same manner.
If screen updates are synchronised with the frame rate, animations will flow smoothly, but if an interval runs at a different rate it will do double updates or no updates for some cycles which is visible as jerky movement. If the update happens right when the sweap passes that part of the screen, you can even see tearing.
The ideal time to update animations is during the vertical blanking interval. That's when the sweep has finished one update cycle and is waiting for the next to start. That's what requestAnimationFrame is for.

