创建一个Profile

　　时间线(timeline)告诉我们代码运行花费的时间，但是并没有帮助我们知道代码运行的时候发生了什么。我们可以做一些改动然后不断的测每次代码运行的时间，但这是盲目的。profiles给我们提供了更好的方法。profiler告诉我们哪些函数的执行占用了大部分时间。让我们切换到chrome开发者工具的“Profiles”标签页开始性能测试，这里一共提供了三种类型的性能测试。

　　1、 javascript cpu 性能测试

　　显示javascript占用了多少CPU

　　2、 css选择器性能测试

　　显示处理CSS选择器占用的CPU

　　3、 堆栈快照

　　显示javascript对象的内存占用情况

　　我们想要javascript代码执行的更快，所以我们进行CPU性能测试。我们开始性能测试，刷新页面然后停止。

　　通过性能分析首先知道很多函数在执行。“颜色排序器”使用了jQuery和jQuery UI,来处理些管理插件和解析表达式之类的事情。我发现列表最顶端的是decimalToHex和makeColorSorter两个函数。这两个函数占用了CPU13.2%的时间，这是做优化的好地方。

　　我们可以点击函数调用旁边的“下一个”箭头来查看完整的函数调用堆栈。展开后，可以看到decimalToHex是被makeColorSorter调用的，makeColorSorter是通过$(document).ready调用的。

　　代码如下

　　$(document).ready(function() {
　　makeColorSorter(.05, .05, .05, 0, 2, 4, 128, 127, 121);
　　makeSortable();
　　});

　　弄清楚这两个函数是哪里调用的，也就弄清楚了让颜色可以排序并不是最大的性能问题。通常情况下性能问题都是由多余的排序操作造成的，但是在我的代码中相比与排序增加DOM元素花费了更多时间。

　　我想要让这些函数执行的更快，但是首先我想要将我的改动区隔开。在页面载入过程中会发生很多事情，我不想要这些影响到我的性能分析。