Chrome提供了所有主流浏览器中最强大的诊断页面性能的工具，我们这里就依照我们团队项目为例子，来介绍下这个工具的使用：
Timeline Check:
首先，我们去检查了载入首页的timeline,我测试了8次，平均下来，大概要花费我5.3秒的时间。
从这里我们可以看到以下结论：
(1)所有的资源文件，比如js文件，或者css文件，都是并行的加载的， 所以从timeline图上可以看出来，它们是同时发生的。也就是上图中所有小蓝色的圆点都同时开始的，当然那个蓝条有长短，因为各个资源文件有大小区别。
(2)Parsing 这个步骤花费了非常多的时间，它大概用了1.52秒：
当我们深入细节之后，我们发现，它主要是用来解析/评测各个js文件，安装定时器，激活浏览器的垃圾回收事件等。
(3)另外一个消耗时间比较多的地方在于如下url:
test?p_p_id=envprovisioningportlet_WAR_envprovisioningportlet&p_p_lifecycle=2&p_p_state=normal&p_p_mode=view&p_p_resource_id=paginationRequestInfo&p_p_cacheability=cacheLevelPage&p_p_col_id=column1&p_p_col_count=1&_dc+1369363077815&start=0&limit=20&page=1
这是因为我们需要填充第一个grid，而且我们使用的是ajax,而ajax需要调用时间。
Profiler:
这个是专门用来分析页面访问低速度的工具。
首先，我们来检查CPU的执行时间：
我们看下所有的js的函数的执行，可以发现以下的函数占据了太多的CPU时间：
一个是app.js的第8行->Ext.application.launch 方法
一个是AEREnvGrid.js第8行->Ext.define.initComponent方法：
接下来我们来检查CSS选择器的选择时间：
经验告诉我们，类选择器，父子选择器总会比id选择器占据更多的时间，我们这里按照时间排序可以看出花费时间较多的都是这些选择器：
按照这样的思路，我们能很快的分析我们的代码中的大多数影响前端性能的问题。
