新萄京Web前端

 新萄京Web前端     |      2019-12-13

Chrome开发者工具不完全指南:(三、性能篇)

2015/06/29 · HTML5 · 2 评论 · Chrome

原文出处: 卖烧烤夫斯基   

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

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

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

图片 1

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

图片 2

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

1、开始运行Timeline检测网页。点亮圆点,Timline开始监听工作,在此熄灭圆点,Timeline展示出监听阶段网站的执行状态。

2、清除所有的监听信息。将Timeline复原。

3、查找和过滤监控信息。点击会弹出一个小框框,里面可以搜索或者显示隐藏你要找的信息。

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

5、View:监控信息的展示方式,目前有两种,柱状图和条状图,在展示的事例中,卤煮默认选择条状图。

6、在侦听过程中希望抓取的信息,js堆栈、内存、绘图等。。。。

区域2是区域1的完全版,虽然他们都是展示的信息视图,在在区域2种,图示会变得更加详细,更加精准。一般我们查看监控视图都在区域2种进行。

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

图片 3

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

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

XHTML

<!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> div{ height: 20px; widows: 20px; font-size: 26px; font-weight: bold; } </style> </head> <body> <div id="div1"> HELLO WORLD0 </div> <div id="div2"> HELLO WORLD2 </div> <div id="div3"> HELLO WORLD3 </div> <div id="div4"> HELLO WORLD4 </div> <div id="div5"> HELLO WORLD5 </div> <div id="div6"> HELLO WORLD6 </div> <div id="div7"> HELLO WORLD7 </div> <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> </body> </html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        div{
            height: 20px;
            widows: 20px;
            font-size: 26px;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div id="div1">
        HELLO WORLD0
    </div>
    <div id="div2">
        HELLO WORLD2
    </div>
    <div id="div3">
        HELLO WORLD3
    </div>
    <div id="div4">
        HELLO WORLD4
    </div>
    <div id="div5">
        HELLO WORLD5
    </div>
    <div id="div6">
        HELLO WORLD6
    </div>
    <div id="div7">
        HELLO WORLD7
    </div>
    <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>
</body>
</html>

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

图片 4

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

图片 5

在操作界面时,我们点击了一次button,它耗费了大约1ms的时间完成了从响应事件到重绘节目的一些列动作,上图就是在789.6ms-790.6ms中完成的这次click事件所发生的浏览器行为,其他的事件行为你同样可以通过滑动滑轮缩小区域来观察他们的情况。在区域2种,每一种颜色的横条其实都代表了它自己的独特的意义:

图片 6

每次点击都回到了上面的图一样执行若干事件,所以我们操作界面时发生的事情可以做一个大致的了解,我们滑动滚轮把时间轴恢复到原始尺寸做个总体分析:

图片 7

可以看到,每一次点击事件都伴随着一些列的变化:html的重新渲染,界面重新布局,视图重绘。很多情况下,每个事件的发生都会引起一系列的变化。在区域2种,我们可以通过点击某一个横条,然后在区域4种更加详细地观察它的具体信息。我们以执行函数x为例观察它的执行期的状态。

图片 8

随着在事件发生的,除了dom的渲染和绘制等事件的发生之外,相应地内存也会发生变化,而这种变化我们可以从区域3种看到:

图片 9

在上文中已经向大家做过区域3的介绍,我们可以看到js堆在视图中不断地再增长,这时因为由事件导致的界面绘制和dom重新渲染会导致内存的增加,所以每一次点击,导致了内存相应地增长。同样的,如果区域3种其他曲线的变化会引起蓝色线条的变化,这是因为其他(绿色代表的dom节点数、黄色代表的事件数)也会占有内存。因此,你可以通过蓝色曲线的变化形势来确定其他个数的变化,当然最直观的方式就是观察括号中的数字变化。js内存的变化曲线是比较复杂的,里面参杂了很多因素。我们所列出来的例子实际上是很简单的。目前相信你对Timeline的使用有了一定的认识,下面我们通过一些Google浏览器官方的实例来更好的了解它的作用(因为观看示例都必须FQ,所以卤煮把js代码copy出来,至于简单的html代码你可以自己写。如果可以FQ的同学就无所谓了!)

(官方测试用例一) 查看内存增长,代码如下:

JavaScript

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); }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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中看到了一张内存变化的图:

图片 10

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

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

JavaScript

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; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
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函数,可以生成一张内存剧烈变化的图:

图片 11

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

1 赞 9 收藏 2 评论

图片 12

 

一. 在 html 中直接绑定

  在 HTML 中绑定事件叫做内联绑定事件,HTML 的元素中有如 onclick 这样的 on*** 属性,它可以给这个 DOM 元素绑定一个类型的事件,主要是这样的:

  <div onclick="***">博客园</div>

  这里的 *** 有两种形式:

1. 用字符串表示一段函数

  <div onclick="var a = 1; console.log(a); ">博客园</div>

2. 用函数名表示

  <div onclick="foo(this)">博客园</div>

  这里需要添加 script 去定义函数:

  <script>
    function foo(_this) {
      console.log(_this);
      console.log(this);
    }
  </script>

  然而这内联的方式绑定时间不利于分离,所以一般我们不推荐这种做法,所以也就不再多阐述了

 

二. 在 JavaScript 中绑定

1. onclick

  来看例子:

  <div id="btn">博客园</div>

  document.getElementById('btn').onclick = function (e) {
    console.log(this.id);
    console.log(e);
  };

  观察 console.log:

  btn
  MouseEvent {isTrusted: true, screenX: 65, screenY: 87, clientX: 65, clientY: 13…}

  首先,我们获取到了 dom 元素,然后给它的 onclick 属性赋值了一个函数;点击 dom 我们发现那个函数执行了,同时发现函数中的 this 是指向当前的这个 dom 元素;细细一想,其实这和前面用的在 html 中内联绑定函数是一样的,我们同样是给 dom 的 onclick 属性赋值一个函数,然后函数中的 this 指向当前元素,只是这个过程这里我们是在 js 中做的;而还有一点区别就是前面的是赋值一段 js 字符串,这里是赋值一个函数,所以可以接受一个参数:event,这个参数是点击的事件对象。

  用赋值绑定函数的一个缺点就是它只能绑定一次:

  例如:

  document.getElementById('btn').onclick = function (e) {
    console.log(this.id);
  };
  document.getElementById('btn').onclick = function (e) {
    console.log(this.id);
  };

  可以看到这里只打印了一次 btn。

2. addEventListener

  这个才是我们需要重点介绍的一个函数

1.)语法:

  target.addEventListener(type, listener[, useCapture]);

  target : 表示要监听事件的目标对象,可以是一个文档上的元素 Document 本身,Window 或者 XMLHttpRequest;

  type : 表示事件类型的字符串,比如: click、change、touchstart …;

  listener : 当指定的事件类型发生时被通知到的一个对象。该参数必是实现 EventListener 接口的一个对象或函数。

  useCapture : 设置事件的捕获或者冒泡 (后文阐述) ,true: 捕获,false: 冒泡,默认为 false。

  上个例子:

  <div id="btn">博客园</div>

  var btn = document.getElementById('btn');

  btn.addEventListener(‘click’, foo1);

  function foo1(event) {
    console.log(this.id);
    console.log(event);
  }

  观察 console.log:

  btn
  MouseEvent {isTrusted: true, screenX: 37, screenY: 88, clientX: 37, clientY: 14…}

  监听函数中的 this 指向当前的 dom 元素,函数接受一个 event 参数。

2.)绑定多个函数

  addEventListener 可以给同一个 dom 元素绑定多个函数:

  <div id="btn">博客园</div>

  var btn = document.getElementById('btn');

  btn.addEventListener('click', foo1);
  btn.addEventListener('click', foo2);

  function foo1(event) {
    console.log(666);
  }

  function foo2(event) {
    console.log(888);
  }

  可以看到 console.log:

  666
  888

  我们可以看到两个函数都执行了,并且执行顺序按照绑定的顺序执行。

  改变一下,如果我们的 useCapture 参数不同呢?
  看下面 3 组对比:

例子:1

  var btn = document.getElementById('btn');

  btn.addEventListener('click', foo1, true);
  btn.addEventListener('click', foo2, true);

  function foo1(event) {
    console.log(666);
  }

  function foo2(event) {
    console.log(888);
  }

例子:2

  var btn = document.getElementById('btn');

  btn.addEventListener('click', foo1, true);
  btn.addEventListener('click', foo2, false);

  function foo1(event) {
    console.log(666);
  }

  function foo2(event) {
    console.log(888);
  }

例子:3

  var btn = document.getElementById('btn');

  btn.addEventListener('click', foo1, false);
  btn.addEventListener('click', foo2, true);

  function foo1(event) {
    console.log(666);
  }
  function foo2(event){

  console.log(888)

  }

  console.log打印出来的值并没有改变,所以执行顺序只和绑定顺序有关和 useCapture 无关。

  结论:
    我们可以给一个 dom 元素绑定多个函数,并且它的执行顺序按照绑定的顺序执行。

3.)同一个元素绑定同一个函数

  我们给一个 dom 元素绑定同一个函数两次试试:

  <div id="btn">博客园</div>

  var btn = document.getElementById('btn');

  btn.addEventListener('btn', foo1);
  btn.addEventListener('btn', foo1);

  unction foo1(event) {
    console.log(666);
  }

  观察 console.log:

  666 

  可以看到函数只执行了一次;

换一种方式:

  var btn = document.getElementById('btn');

  btn.addEventListener('btn', foo1, true);
  btn.addEventListener('btn', foo1, false);

  function foo1(event) {
    console.log(666);
  }

  观察 console.log:

  666
  666 

  可以看到函数执行了两次。

  结论:
    我们可以给一个 dom 元素绑定同一个函数,最多只能绑定 useCapture 类型不同的两次。

3. attachEvent

  addEventListener 只支持到 IE 9,所以为了兼容性考虑,在兼容 IE 8 以及以下浏览器可以用 attachEvent 函数,和 addEventListener 函数表现一样。在IE浏览器中我们可以使用attachEvent.形如:object.attachEvent(event,function);这里需要注意的是event的格式都是on+事件名,如:btn事件->onclick

  例子:

  var btn = document.getElementById("btn");

  btn.attachEvent("onclick",test1);

    function test1(){

  console.log("666");

  }

 

三. 事件的解绑

  与事件绑定相对应的就是事件解绑了。

1. 通过 dom 的 on** 属性设置的事件

  对于 Bind in HTML 和 dom.onclick 绑定的事件都可以用 dom.onclick = null 来解绑事件。