今天用Chrome DevTool中Timeline的帧模式查看网页的性能，发现一个让我很迷惑的问题，如下：
我们知道，上图中的柱状体代表了每一帧所用的时间，高度越大，时间越长（其中30/60fps的基准线分别对应着33.3ms和16.6ms），而其中的透明部分，则代表刷新周期中空闲的部分(idle)。
我的疑惑是，透明的idle部分，为什么不能利用起来渲染下一帧呢？从分析结果可知，这些透明的部分占据了绝大部分，以至于大部分时间fps均在30以下。
思考良久都无法解释这个现象，于是打算去stackoverflow提问，发现已经有人提问过这个问题：http://stackoverflow.com/questions/23166435/large-idle-bars-in-chrome-dev-tools-frames-timeline
采纳的答案如下
Drawing shapes to a canvas is apparently computationally expensive, and must fall under “activity that was not instrumented by DevTools.” I solved my performance issue by first drawing shapes to an offscreen canvas cache, then using drawImage to copy back to the main canvas.
大意是canvas的渲染是很复杂的过程，这个过程不能被DevTool完整地检测到。
显然这个回答也不够确切，如果有朋友对这个问题有了解，可留言与我交流。