5.Chrome开发者工具不完全指南：（三、性能篇）

一个网站的性能主要关乎两项，一是加载性能、二是执行性能。第一项可以利用Network来分析，我以后会再次写一篇关于它的文章分享卤煮的提高加载速度的经验，不过在此之前，我强烈推荐你去阅读《web高性能开发指南》这本书中的十四条黄金建议，这是我阅读过的最精华的书籍之一，虽然只有短短的一百多页，但对你的帮助确实无法估量的。而第二项性能问题就体现在内存泄露上，这也是我们这篇文章探讨的问题——通过Timeline来分析你的网站内存泄露。

虽然浏览器日新月异，每一次网站版本的更新就意味着JavaScript、css的速度更加快速，然而作为一名前端人员，是很有必要去发现项目中的性能的鸡肋的。在众多性能优化中，内存泄露相比于其他性能缺陷（网络加载）不容易发现和解决，因为内存泄露设计到浏览器处理内存的一些机制并且同时涉及到到你的编写的代码质量。在一些小的项目中，当内存泄露还不足以让你重视，但随着项目复杂度的增加，内存问题就会暴露出来。首先内存占有过多导致你的网站响应速度（非ajax）变得慢，就感觉自己的网页卡死了一样；然后你会看到任务管理器的内存占用率飙升；到最后电脑感觉死了机一样。这种情况在小内存的设备上情况会更加严重。所以，找到内存泄露并且解决它是处理这类问题的关键。

在本文中，卤煮会通过个人和官方的例子，帮助诸位理解Timeline的使用方法和分析数据的方法。首先我们依然为该面板区分为四个区域，然后对它们里面的各个功能进行逐一介绍:

虽然Timeline在执行它的任务时会显得花花绿绿让人眼花缭乱，不过不用担心，卤煮用一句话概括它的功能就是：描述你的网站在某些时候做的事情和呈现出的状态。我们看下区域1中的功能先：

在区域1主题是一个从左到右的时间轴，在运行时它里面会呈现出各种颜色块（下文中会介绍）。顶部有一条工具栏，从左到右，一次表示：1、开始运行Timeline检测网页。点亮圆点，Timline开始监听工作，在此熄灭圆点，Timeline展示出监听阶段网站的执行状态。2、清除所有的监听信息。将Timeline复原。3、查找和过滤监控信息。点击会弹出一个小框框，里面可以搜索或者显示隐藏你要找的信息。4、手动回收你网站内内存垃圾。5、View：监控信息的展示方式，目前有两种，柱状图和条状图，在展示的事例中，卤煮默认选择条状图。6、在侦听过程中希望抓取的信息，js堆栈、内存、绘图等。。。。

区域2是区域1的完全版，虽然他们都是展示的信息视图，在在区域2种，图示会变得更加详细，更加精准。一般我们查看监控视图都在区域2种进行。区域3是展示的是一些内存信息，总共会有四条曲线的变化。它们对应表示如下图所示:

区域4中展示的是在区域2种某种行为的详细信息和图表信息。在对功能做了简单的介绍之后我们用一个测试用例来了解一下Timeline的具体用法。

新建一个html项目，然后再Chrome中打开它，接着按F12切换到开发者模式，选择Timeline面板，点亮区域1左上角的那个小圆圈，你可以看到它变成了红色，然后开始操作界面。连续按下button执行我们的js程序，等待所有div的内容都变成hello world的时候再次点击小圆圈，熄灭它，这时候你就可以看到Timeline中的图表信息了，如下图所示:

在区域1中，左下角有一组数字2.0MB-2.1MB,它的意思是在你刚刚操作界面这段时间内，内存增长了0.1MB。底部那块浅蓝色的区域是内存变化的示意图。从左到右，我们可以看到刚刚浏览器监听了4000ms左右的行为动作，从0~4000ms内区域1中列出了所有的状态。接下来我们来仔细分析一下这些状态的具体信息。在区域2种，滚动鼠标的滚轮，你会看到时间轴会放大缩小，现在我们随着滚轮不断缩小时间轴的范围，我们可以看到一些各个颜色的横条:

---

http://web.jobbole.com/82576/

http://www.tuicool.com/articles/bQvaUjn

http://horve.github.io/2015/10/26/timeline/

https://github.com/zhangyaowu/CN-Chrome-DevTools/blob/master/md/Performance-Profiling/Performance-profiling-with-the-Timeline.md

http://www.oschina.net/translate/performance-optimisation-with-timeline-profiles