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

　　卤煮在前面已经向大家介绍了Chrome开发者工具的一些功能面板，其中包括Elements、Network、Resources基础功能部分和Sources进阶功能部分，对于一般的网站项目来说，其实就是需要这几个面板功能就可以了（再加上console面板这个万精油）。它们的作用大多数情况下是帮助你进行功能开发的。然而在你开发应用级别的网站项目的时候，随着代码的增加，功能的增加，性能会逐渐成为你需要关注的部分。那么网站的性能问题具体是指什么呢？在卤煮看来，一个网站的性能主要关乎两项，一是加载性能、二是执行性能。第一项可以利用Network来分析，我以后会再次写一篇关于它的文章分享卤煮的提高加载速度的经验，不过在此之前，我强烈推荐你去阅读《web高性能开发指南》这本书中的十四条黄金建议，这是我阅读过的最精华的书籍之一，虽然只有短短的一百多页，但对你的帮助确实无法估量的。而第二项性能问题就体现在内存泄露上，这也是我们这篇文章探讨的问题——通过Timeline来分析你的网站内存泄露。

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

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

　　

 

　　博文已经迁移至新地址