chrome 如何调试、查看、分析当页页面性能?

Question

更新到了chrome51，发现工具简化了，如图所示，各个颜色代表什么意思？
如何在TimeLine中调试和追踪页面、动画、js性能？
以及如图所示的页面性能，好还是不好？

Answer 1

谢谢楼上
通过g的官网，发现并没有什么特别具体的高深的办法
总结一下：
a页面加载速度,b页面渲染速度，主要指动画

a页面加载的速度，首先要知道关键呈现路径，然后是dom/cssom/rendertree/layout/paint/comp的过程以及jank的呈现情况，html,css,js文件三者的阻塞关系，加载优化就是平衡就三者之间的内连/外联/体积/个数的关系，但是内连文件会减少请求次数--chrome最多一次6个请求，其余的就是连接等待了，通过减少延迟缩短加载时间，但是会影响页面体积，进而影响页面下载时间--同一个文件可能会通过多次下载完毕，期间发送多个请求；以及其他一技术从关键呈现路径中的各个环节中减少页面阻塞，比如js的异步加载，放在页面的位置，css选择器的优化，dom的优化，一句话就是一切从简。。
b.页面性能优化，首先要先会使用timeline工具，然而我发现chrome50以后的不如原来好用，然后是普通显示器的刷新率是60次每秒，则页面完全流畅就需要也每秒刷新(layout/paint/comp)60次，则每次刷新的时间只有16.6ms，刨除浏览器自身开销，大约只有10ms的时间给浏览器进行运算和页面重排/绘/合成，以及一些用户体验的方面，动画方面就是尽可能使像素渲染流水线的最后一个或两个进行，同时避免过于复杂的动画，其实在此我有个小技巧，不知道算不算，就是在页面埋一个css3动画开gpu渲染，让其在页面一直播放，可以保证60fps刷新率，但是动画的相关运算要是太复杂和庞大会高于10ms时，依旧会使动画卡顿，以及使用requestAnimate替代定时器--其实没必要，现代浏览器已经对定时器进行了优化二者性能差距没大到让不流畅变流畅的程度；
差不多先这些

Answer 2

当然是官网啦： https://developers.google.com/web/tools/chrome-devtools/?hl=en