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

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

chrome开发者工具功能拾遗：Sources面板篇
本文主要介绍一些本人在此之前不甚了解,但经过了解后又发现对自己的工作很有帮助的一些chrome开发者工具调试技巧/功能.也借这篇文章提醒一下自己,在实际项目中多使用这些功能,尽快熟悉起来,提升自己的工 ...
Chrome开发者工具-阅读列表
Chrome的开发者工具是Chrome浏览器内置的编辑和调试利器,熟练使用chrome开发者工具是成为前端修炼的必由之路,来,来,来,一起提高. Chrome开发者工具不完全指南 chrome 开发者 ...
在 Chrome 开发者工具中调试 node.js
命令行工具 devtool ,它可以在 Chrome 的开发者工具中运行 Node.js 程序. 下面的记录显示了在一个 HTTP 服务器中设置断点的情况. 该工具基于 Electron 将 Node ...
请参阅：Chrome开发者工具中的悬停状态
我希望看到:hover我在Chrome中徘徊的锚点的:hover样式. 在Firebug中,有一个样式下拉列表,允许我为元素选择不同的状态. 我似乎无法在Chrome中找到类似内容. 我错过了什么吗? ...
程序员的你是否熟练掌握Chrome开发者工具？
写在前面再过几天就是1024程序员节日了,这里提前祝各位程序员同胞们节日快乐哈^_^ 回归正题,本文主要是介绍一下Chrome developer tool(开发者工具)的使用,以方便我们的日常开发 ...
如何给 Chrome 开发者工具设置 Material Design 风格的主题外观
图一是 Chrome 开发者工具默认的 Light 风格. 在设置选项里,选择 Dark,即可加载如下图所示的风格: 还可以安装这个 Material DevTools Theme Collectio ...
Jerry和您聊聊Chrome开发者工具
Chrome开发者工具是Jerry日常工作使用的三大调试器之一.虽然工具名称前面带了个"开发者", 但是它对非开发人员仍然有用.不信? 用Chrome打开我们常用的网站,按F12, ...
Chrome开发者工具使用小技巧
正所谓不用Chrome的开发者不合格,不晓得Chrome开发者工具进行web调试也不是合格的web开发者.所以本文总结了Chrome开发者工具使用的一些小技巧. 一:首先来说下如何打开开发者工具吧: ...
Chrome 开发者工具的Timeline和Profiles提高Web应用程序的性能[转]
我们都希望创建高性能的Web应用程序.由于我们的应用程序变得越来越复杂,我们可能想要支持丰富的画面以及理想的60帧/秒,这能保证我们的应用程序响应灵敏且生动流畅. 知道如何衡量和提高性能,是一个有用的 ...
Chrome 开发者工具官方中文文档
传送门 Chrome开发者工具官方中文文档 Chrome开发者工具详解前端学习front-end-study系列 Elements面板(https://zhuanlan.zhihu.com/p/24 ...

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

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

最新文章

热门文章