Chrome开发者工具不彻底指南：（3、性能篇）

醉人说梦 2021-05-12

展开全文

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

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

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

Chrome开发者工具不彻底指南：（3、性能篇）

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

Chrome开发者工具不彻底指南：（3、性能篇）

在区域1主题是一个从左到右的时间轴，在运行时它里面会呈现出各类颜色块（下文中会介绍）。顶部有一条工具栏，从左到右，一次表示：java

一、开始运行Timeline检测网页。点亮圆点，Timline开始监听工做，在此熄灭圆点，Timeline展现出监听阶段网站的执行状态。node

二、清除全部的监听信息。将Timeline复原。web

三、查找和过滤监控信息。点击会弹出一个小框框，里面能够搜索或者显示隐藏你要找的信息。ajax

四、手动回收你网站内内存垃圾。chrome

五、View：监控信息的展现方式，目前有两种，柱状图和条状图，在展现的事例中，卤煮默认选择条状图。浏览器

六、在侦听过程当中但愿抓取的信息，js堆栈、内存、绘图等。。。。

区域2是区域1的彻底版，虽然他们都是展现的信息视图，在在区域2种，图示会变得更加详细，更加精准。通常咱们查看监控视图都在区域2种进行。

区域3是展现的是一些内存信息，总共会有四条曲线的变化。它们对应表示以下图所示:

Chrome开发者工具不彻底指南：（3、性能篇）

区域4中展现的是在区域2种某种行为的详细信息和图表信息。

在对功能作了简单的介绍以后咱们用一个测试用例来了解一下Timeline的具体用法。

?

 
         <!DOCTYPE html> 
        

 
         div{

 
         height: 20px;

 
         widows: 20px;

 
         font-size: 26px;

 
         font-weight: bold;

}

 
         HELLO WORLD0

 
         HELLO WORLD2

 
         HELLO WORLD3

 
         HELLO WORLD4

 
         HELLO WORLD5

 
         HELLO WORLD6

 
         HELLO WORLD7

 
              
         < 
         button 
          id 
         = 
         "btn" 
         >click me</ 
         button 
         > 
        

 
              
         < 
         script 
          type 
         = 
         "text/javascript" 
         > 
        

 
         var k = 0;

 
         function x() {

 
         if(k >= 7) return;

 
         document.getElementById('div'+(++k)).innerHTML = 'hello world'

}

 
         document.getElementById('btn').addEventListener('click', x);

 
         </ 
         script 
         >

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

Chrome开发者工具不彻底指南：（3、性能篇）

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

Chrome开发者工具不彻底指南：（3、性能篇）

在操做界面时，咱们点击了一次button，它耗费了大约1ms的时间完成了从响应事件到重绘节目的一些列动做，上图就是在789.6ms-790.6ms中完成的此次click事件所发生的浏览器行为,其余的事件行为你一样能够经过滑动滑轮缩小区域来观察他们的状况。在区域2种，每一种颜色的横条其实都表明了它本身的独特的意义:

Chrome开发者工具不彻底指南：（3、性能篇）

每次点击都回到了上面的图同样执行若干事件，因此咱们操做界面时发生的事情能够作一个大体的了解,咱们滑动滚轮把时间轴恢复到原始尺寸作个整体分析:

Chrome开发者工具不彻底指南：（3、性能篇）

能够看到，每一次点击事件都伴随着一些列的变化：html的从新渲染，界面从新布局，视图重绘。不少状况下，每一个事件的发生都会引发一系列的变化。在区域2种，咱们能够经过点击某一个横条，而后在区域4种更加详细地观察它的具体信息。咱们以执行函数x为例观察它的执行期的状态。

Chrome开发者工具不彻底指南：（3、性能篇）

随着在事件发生的，除了dom的渲染和绘制等事件的发生以外，相应地内存也会发生变化，而这种变化咱们能够从区域3种看到：

Chrome开发者工具不彻底指南：（3、性能篇）

在上文中已经向你们作过区域3的介绍，咱们能够看到js堆在视图中不断地再增加，这时由于由事件致使的界面绘制和dom从新渲染会致使内存的增长，因此每一次点击，致使了内存相应地增加。一样的，若是区域3种其余曲线的变化会引发蓝色线条的变化，这是由于其余（绿色表明的dom节点数、黄色表明的事件数）也会占有内存。所以，你能够经过蓝色曲线的变化形势来肯定其余个数的变化，固然最直观的方式就是观察括号中的数字变化。js内存的变化曲线是比较复杂的，里面参杂了不少因素。咱们所列出来的例子其实是很简单的。目前相信你对Timeline的使用有了必定的认识，下面咱们经过一些Google浏览器官方的实例来更好的了解它的做用（由于观看示例都必须FQ，因此卤煮把js代码copy出来，至于简单的html代码你能够本身写。若是能够FQ的同窗就无所谓了！）

（官方测试用例一）查看内存增加，代码以下：

?

 
         var 
          x = [];

 
         function 
          createSomeNodes() {

 
         var 
          div,

 
         i = 100,

 
         frag = document.createDocumentFragment();

 
         for 
          (;i > 0; i--) {

 
         div = document.createElement( 
         "div" 
         );

 
                  
         div.appendChild(document.createTextNode(i +  
         " - " 
         +  
         new 
          Date().toTimeString())); 
        

 
         frag.appendChild(div);

}

 
         document.getElementById( 
         "nodes" 
         ).appendChild(frag);

}

 
         function 
          grow() {

 
              
         x.push( 
         new 
          Array(1000000).join( 
         'x' 
         )); 
        

 
         createSomeNodes(); 
         //不停地在界面建立div元素

 
         setTimeout(grow,1000);

}

经过屡次执行grow函数，咱们在Timeline中看到了一张内存变化的图:

Chrome开发者工具不彻底指南：（3、性能篇）

经过上图能够看出js堆随着dom节点增长而增加，经过点击区域1中顶部的垃圾箱，能够手动回收一些内存。正常的内存分析图示锯齿形状（高低起伏，最终回归于初始阶段的水平位置）而不是像上图那样阶梯式增加，若是你看到蓝色线条没有回落的状况，而且DOM节点数没有返回到开始时的数目，你就能够怀疑有内存泄露了。

下面是一个用异常手段展现的正常例子，说明了内存被建立了又如何被回收。你能够看到曲线是锯齿型的上下起伏状态，在最后js内存回到了初始的状态。（官方示例二） js代码以下:

?

 
         var 
          intervalId =  
         null 
         , params; 
        

 
         function 
          createChunks() {

 
         var 
          div, foo, i, str;

 
         for 
          (i = 0; i < 20; i++) {

 
         div = document.createElement( 
         "div" 
         );

 
                  
         str =  
         new 
          Array(1000000).join( 
         'x' 
         ); 
        

 
         foo = {

 
         str: str,

 
         div: div

};

 
         div.foo = foo;

}

}

 
         function 
          start() {

 
         if 
          (intervalId) {

 
         return 
         ;

}

 
         intervalId = setInterval(createChunks, 1000);

}

 
         function 
          stop() {

 
         if 
          (intervalId) {

 
         clearInterval(intervalId);

}

 
         intervalId =  
         null 
         ;

}

执行start函数若干次，而后执行stop函数，能够生成一张内存剧烈变化的图:

Chrome开发者工具不彻底指南：（3、性能篇）

还有不少官方实例，你能够经过它们来观察各类状况下内存的变化曲线，在这里咱们不一一列出。在这里卤煮选择试图的形式是条状图，你能够在区域1中选择其余的显示方式，这个全靠我的的爱好了。总而言之，Timeline能够帮助咱们分析内存变化状态（Timeline直译就是时间轴的意思吧），经过对它的观察来肯定个人项目是否存在着内存泄露以及是什么地方引发的泄露。图表在展现上虽然很直观可是缺乏数字的精确，经过示图曲线的变化咱们能够了解浏览器上发生的事件，最主要的是了解内存变化的趋势。而若是你但愿进一步分析这些内存状态，那么接下来你就能够打开Profiles来干活了。这将是咱们这个系列的下一篇文章要介绍的。