今天用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完整地檢測到。
顯然這個回答也不夠确切，如果有朋友對這個問題有了解，可留言與我交流。