在DevTools中读取Chrome帧速率结果

Question

As far as I know the white (empty) bar represents idle time. I know I should focus so that the application would run (at best) > 60fps and at least >30fps

This is my bar:

As you can see, I'm repainting on scroll ( changing the background position of an image ). The middle line marks 60fps in this case, and if you pay attention closely, there is a top line (which is 30fps).

I've compared my results with others out there, and it seems that I have rather large idle times. Is that okay ? I know that paint, javascript and anything else is bad, but what purpose does displaying idle times serve ? Should I attempt to get rid of it, if so, what should I watch out for ?

Also, there is a spike every now and then because of "Image Decode", is there anything I can do about it ?

Answer 1

Image Decode

You can reduce the size of the image, which will make the decodes shorter. You can also trick the browser into doing these decodes earlier, perhaps at a time when there's no activity and therefore won't hurt your FPS.

I would also kill these big images temporarily to see if that moves you from 30fps to 60fps.

Scroll handler

You should minimize the amount of work you're doing in your scroll handler. At most you should be grabbing one scroll metric from the DOM and a timestamp perhaps. Then do your adjustments to style in a requestAnimationFrame loop: http://www.hesslerdesign.com/blog/javascript/optimizing-javascript-performance-handling-coordinate-updates/

Heavy paints

background-position isn't optimized well in WebKit or Blink, especially for this sort of usecase. I would put the image into a div and just slide its position using a transform: translate(x,y) (and promote it to its own layer if possible.) If sucessful, you won't repaint the entire screen on every scroll.

30 FPS Aint bad

A solid 30FPS actually looks better than something that's jumping between 60 and 45 all the time. Curious.. Are you in Canary or on a retina screen?

---

In general, you're doing pretty okay on your hardware, but I would try to reduce those image decodes. And you can go further with the above if you want.