简单来说它就是

时间:2019-10-10 18:17来源:计算机论坛
Chrome开拓者工具不完全指南(四、品质进级篇) 2015/07/05 · HTML5 ·Chrome 原来的文章出处:卖BBQ夫斯基    前言 Profiles 面板效能的成效着重是督查网页中各样格局施行时间和内部存款和

Chrome开拓者工具不完全指南(四、品质进级篇)

2015/07/05 · HTML5 · Chrome

原来的文章出处: 卖BBQ夫斯基   

前言

Profiles面板效能的成效着重是督查网页中各样格局施行时间和内部存款和储蓄器的变型,轻易的话它便是Timeline的数字化版本。它的效应选项卡不是过多(唯有多少个),操作起来相比前边的几块功用版本的话轻便,可是中间的数量确非常多,很杂,要弄懂它们供给耗费一些时日。特别是在内部存款和储蓄器快速照相中的各个庞杂的数码。在那篇博客中卤煮将继续给大家分享Chrome开采者工具的应用经验。固然你遭受不懂的地点恐怕有不法规的地方,能够在商量中回复卤煮,作品最后卤煮会最终把诀窍交出来。下边要介绍的是Profiles。首先张开Profiles面板。

图片 1

Profiles分界面分为左右三个区域,右边区域是放文件的区域,侧边是彰显数据的区域。在始发检查实验从前能够看来侧边区域有八个选拔,它们各自代表者差别的功能:

1.(Collect JavaScript CPU Profile)监察和控制函数实践期费用的小时
2.(Take Heap Snapshot)为近些日子界面拍贰个内存快速照相
3.(Record Heap Allocations)实时监督记录内部存款和储蓄器变化(对象分配追踪)

一、Collect JavaScript CPU Profile(函数搜聚器)

率先来关注首先个功效,(Collect JavaScript CPU Profile)监察和控制函数施行期花费的时光。讲道理不比举个例子子,为了更明亮地问询它的功力概略,大家能够编写四个测量检验列子来侦察它们的效果。这一个列子轻松一些,使得大家解析的数码更清晰一些。

XHTML

<!DOCTYPE html> <html> <head> <title></title> </head> <body> <button id="btn"> click me</button> <script type="text/javascript"> function a() { console.log('hello world'); } function b() { a(); } function c() { b(); } document.getElementById('btn').addEventListener('click', c, true); </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
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<button id="btn"> click me</button>
<script type="text/javascript">
function a() {
console.log('hello world');
}
 
function b() {
a();
}
 
function c() {
b();
}
 
document.getElementById('btn').addEventListener('click', c, true);
</script>
</body>
</html>

在侧面区域中选拔Collect JavaScript CPU Profile 选项,点击下方的Start按键(也足以点击左边的紫水晶色圆圈),那时候Chrome会开头记录网页的艺术实施,然后大家点击分界面包车型大巴开关来实践函数。最终再点击左侧区域的Stop开关(可能左边的甲子革命圆圈),那时监察和控制就过逝了。左侧Profiles会列出三个文书,单击能够看看如下分界面:

图片 2

生存了八个多少表格,它们的意思在上图中早就标识出来了。它记录的是函数推行的时间以致函数实行的顺序。通过侧边区域的花色采纳能够切换数据展现的办法。有正包括关系,逆富含关系,图表类型两种选项。大家能够选拔中间的图片类型:

图片 3

能够见见这些面板似曾相识,没有错,它跟从前的TimeLine面板很像,的确,即便很像,但功能差别,不然也就没供给重复做了。从上海体育场面可以看出点击开关施行的逐个函数奉行的年月,顺序,富含关系和CUP变化等。你能够在改换文书之后在左侧区域中保留该公文记录,后一次只供给在区域2这中式茶食击load开关便足以加载出来。也正是说你能够当地永恒地记录该段时间内的办法实行时间。第二个效果与利益大致就这么多,比较其余四个来讲轻巧。

二、Take Heap Snapshot(内部存款和储蓄器快速照相**

上面大家来介绍一下次之个职能的用法。第贰个职能是给当下网页拍一个内部存款和储蓄器快速照相.选用第2个拍戏作用,按下 Take Snapshot 开关,给当下的网页拍下一个内部存款和储蓄器快速照相,获得如下图。

图片 4

可以看出左侧区域生成个公文,文件名下方有数字,表示那几个张快速照相记录到的内存大小(此时为3.2M)。右侧区域是个列表,它分为五列,表头可以按照数值大小手动排序。在那张表格中列出的一部分列数字和标记,乃至表头的意义比较复杂,涉及到有的js和内部存款和储蓄器的学识,大家就先从那个表头起头掌握她们。从左到右的逐个它们分别表示:
Constructor(构造函数)表示所有通过该构造函数生成的靶子
Distance 对象达到GC根的最短距离
Objects Count 对象的实例数
Shallow size 对应构造函数生成的对象的shallow sizes(直接占用内部存款和储蓄器)总量
Retained size 体现了对应对象所占有的最大内部存款和储蓄器
CG根!是神马东西?在google的官方文书档案中的建议是CG根不必用到开采者去关爱。不过我们在此地能够回顾说Bellamy(Bellamy)下。大家都知道js对象足以相互援引,在某些对象申请了一块内部存款和储蓄器后,它很恐怕会被其他对象应用,而任何对象又被别的的指标应用,一层一层,但它们的指针都以指向同一块内部存款和储蓄器的,我们把那最先援用的那块内部存款和储蓄器就足以变成GC根。用代码表示是那般的:

JavaScript

var obj = {a:1}; obj.pro = { a : 100 }; obj.pro.pro = { b : 200 }; var two = obj.pro.pro; //这种景况下 {b:200} 就是被two援用到了,{b:200}对象援引的内存正是CG根

1
2
3
4
5
var obj = {a:1};
obj.pro = { a : 100 };
obj.pro.pro = { b : 200 };
var two = obj.pro.pro;
//这种情况下 {b:200} 就是被two引用到了,{b:200}对象引用的内存就是CG根

用一张官方的图能够如下表示:

图片 5

组合那张关系网的因素有二种:
Nodes:节点,对应三个目的,用制造该目的的构造方法来命名
Edges:连接线,对应着对象间的引用关系,用对象属性名来定名
从上图你也能够观望了第二列的表头Dishtance的意思是何许,没有错,它指的正是CG根和援用对象时期的离开。依据那条表明,图中的对象5到CG根的偏离就是2!那么怎么样是直接占用内存(Shallow size)和最大占用内部存款和储蓄器(Retained size)呢?直接占用内部存款和储蓄器指的是指标自己占用的内部存款和储蓄器,因为对象在内部存储器中会通过三种情势存在着,一种是被一个别的对象保留(大家得以说这些目的信赖别的对象)只怕被Dom对象那样的原生对象包涵保留。在此地一贯占用内部存款和储蓄器指的正是前一种。(平日来说,数组和字符串会保留越多的一向占用内部存款和储蓄器)。而最大内存(Retained size)就是该对象依赖的此外对象所并吞的内部存款和储蓄器。你要精通这个都以官方的分解,所以正是你感觉云里雾里也是常规的,官方说明肯定是官腔嘛。依据卤煮本人的接头是那样的:

JavaScript

function a() { var obj = [1,2,.......n]; return function() { //js功能域的原因,在此闭包运营的前后文中能够访谈到obj那个目的console.log(obj); } } //平常意况下,a函数推行完成obj占用的内部存款和储蓄器会被回收,可是此地a函数重临了七个函数表明式(见Tom大伯的博客函数表明式和函数表明),在那之中obj因为js的成效域的特殊性一向存在,所以大家得以说b引用了obj。 var b = a(); //每一次实践b函数的时候都能够访谈到obj,表明内部存款和储蓄器未被回收 所以对于obj来说间接占用内部存款和储蓄器[1,2,....n], 而b信任obj,所obj是b的最大内部存储器。 b()

1
2
3
4
5
6
7
8
9
10
11
function a() {
    var obj = [1,2,.......n];
    return function() {
        //js作用域的原因,在此闭包运行的上下文中可以访问到obj这个对象
        console.log(obj);
    }
}
//正常情况下,a函数执行完毕 obj占用的内存会被回收,但是此处a函数返回了一个函数表达式(见Tom大叔的博客函数表达式和函数声明),其中obj因为js的作用域的特殊性一直存在,所以我们可以说b引用了obj。
var b = a();
//每次执行b函数的时候都可以访问到obj,说明内存未被回收 所以对于obj来说直接占用内存[1,2,....n], 而b依赖obj,所obj是b的最大内存。
b()

在dom中也存在着援用关系:大家由此代码来看下这种引用关系:

JavaScript

<html> <body> <div id="refA"> <ul> <li><a></a></li> <li><a></a></li> <li><a id="#refB"></a></li> </ul> </div> <div></div> <div></div> </body> </html> <script> var refA = document.getElementById('refA'); var refB = document.getElementById('refB');//refB援用了refA。它们中间是dom树父节点和子节点的涉嫌。 </script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<html>
    <body>
        <div id="refA">
            <ul>
                <li><a></a></li>
                <li><a></a></li>
                <li><a id="#refB"></a></li>
            </ul>
        </div>
        <div></div>
        <div></div>
    </body>
</html>
 
<script>
    var refA = document.getElementById('refA');
    var refB = document.getElementById('refB');//refB引用了refA。它们之间是dom树父节点和子节点的关系。
</script>

前日,难题来了,借使小编明天在dom中移除div#refA会怎样呢?答案是dom内部存储器依旧留存,因为它被js援引。那么笔者把refA变量置为null呢?答案是内部存款和储蓄器依然存在了。因为refB对refA存在援用,所以唯有在把refB释放,不然dom节点内部存款和储蓄器会平昔存在浏览器中无法被回收掉。上海教室:

图片 6

于是您看看Constructor这一列中目的借使有革命背景就表示有异常的大恐怕被JavaScript引用到可是从未被回收。以上只是卤煮个人知道,假若不投缘,请你早晚要提示卤煮好即时更新,免得误人子弟!接着上文,Objects Count这一列是何许意思吧?Objects Count这一列的意思比较好掌握,从字面上大家就通晓了其意义。正是目的实例化的数量。用代码表示就是如此的:

JavaScript

var ConstructorFunction = function() {};//构造函数 var a = new ConstructorFunction();//第一个实例 var b = new ConstructorFunction();//第一个实例 ....... var n = new ConstructorFunction();//第n个实例

1
2
3
4
5
var ConstructorFunction = function() {};//构造函数
var a = new ConstructorFunction();//第一个实例
var b = new ConstructorFunction();//第二个实例
.......
var n = new ConstructorFunction();//第n个实例

能够看来构造函数在地点有n个实例,那么对应在Objects Count那列里面就能有数字n。在此间,ConstructorFunction是我们和好定义的构造函数。那么这几个构造函数在何地吧,聪明的你一定能够猜到就在首先列Constructor中。实际上你能够观看列表中的Constructor这一列,个中好些个都以系统品级的构造函数,有一对也是大家本身编排的:

  global property – 全局对象(像 ‘window’)和引用它的对象时期的中间对象。借使贰个对象由构造函数Person生成并被全局对象援引,那么援引路线就是如此的:[global] > (global property > Person。那跟日常的直白援引相互的对象不等同。大家用中间对象是有总体性方面包车型地铁因由,全局对象改变会很频仍,非全局变量的质量访谈优化对全局变量来讲并不适用。
  roots – constructor中roots的原委援用它所选中的靶子。它们也能够是由引擎自己作主要创作办的一部分引用。那几个引擎有用于援用对象的缓存,可是那么些引用不会堵住援用对象被回收,所以它们不是实在的强援用(FIXME)。
  closure – 一些函数闭包中的一组对象的引用
  arraystringnumberregexp – 一组属性援引了Array,String,Number或正则表明式的靶子类型
  compiled code – 轻易的话,全部东西都与compoled code至于。Script像一个函数,但骨子里对应了<script>的内容。SharedFunctionInfos (SFI)是函数和compiled code之间的指标。函数经常有内容,而SFIS未有(FIXME)。
HTMLDivElement, HTMLAnchorElement, DocumentFragment 等 – 你代码中对elements或document对象的引用。

点击张开它们查看详细项,@符号表示该对象ID。:

图片 7

八个快速照相能够有三个计算,在右边手区域的右上角大家得以看见点击下拉菜单可以获取七个个任务视图选项:

图片 8

他们分别表示:
  Summary(概要) – 通过构造函数名分类展现对象;
  Comparison(对照) – 展现八个快速照相间对象的反差;
  Containment(调整) – 探测堆内容;
  Statistic(图形表)-用图表的主意浏览内部存款和储蓄器使用概要

Comparison是指相比快速照相之间的差异,你能够率先拍叁个快照A,操作网页一段时间后拍下另外二个快速照相B,然后在B快照的左边距区域的左上角采纳该选项。然后就能够看六柱预测比图。下边彰显的是各个列,各类的转移。在对照视图下,五个快照之间的不等就博览会现出来了。当实行一个总类目后,增删了的靶子就展现出来了:

图片 9

尝试一下法定示例赞助您打探比较的机能。

您也足以品味着查看Statistic选择,它会以图表的艺术汇报内部存款和储蓄器轮廓。

图片 10

三、Record Heap Allocations.(对象追踪器)

好了,第3个效用也介绍完了,最终让我们来瞧瞧最终三个功用Record Heap Allocations.那一个效能是干啥的啊。它的效能是为为大家拍下一多种的快速照相(频率为50ms),为大家检查评定在启用它的时候种种对象的活着景况。形象一点说正是一旦拍戏内存快速照相的功力是录制那么它效果与利益相当于录制。当大家启用start按键的时候它便开首次拍卖照,直到结束。你会见到侧面区域上半片段有点灰色和水晶色的柱条。水绿的代表您监督近期内活跃过的靶子,但是被回收掉了。深灰蓝的表示还是未有没回收。你还可以滑动滚轮缩放时间轴。

图片 11

指标追踪器功能的平价在于您可以接二连三不停的跟踪对象,在得了时,你能够选取有个别时刻段内(举例说深蓝条未有变灰)查看里面活跃的对象。支持您平素内部存款和储蓄器泄露难题。

四、结束 

好了,大致把Profiles讲完了。那东西对大家搜求内部存储器走漏来讲如故蛮有功用的。对于工具以来,首假诺多用,听得多了自然能详细讲出来嘛。固然您感觉不过瘾,小编引入您去阅读法定文书档案,里面有N多的例子,N多的验证,特别详细。前提是你能跳到墙外去。当然也许有翻译文书档案(卤煮的孤本都给您了,推荐一下吧)。最终真便是要像一片小说里面写的均等“谢谢发明Computer的人,让大家那些剪刀加浆糊的学问土匪形成了复制加粘贴版的学术海盗。”下一期是ConsoleAudits。敬请关切。

2 赞 10 收藏 评论

图片 12

初稿出处: 韩子迟   

闭包拾遗

此前写了篇《闭包初窥》,谈了部分自家对闭包的最早认识,在前文基础上,补充何况更新些对于闭包的认识。

依然事先的不得了优异的例子,来补充些精彩的解说。

JavaScript

function outerFn() { var a = 0; function innerFn() { console.log(a++); } return innerFn; } var fn = outerFn(); fn(); // 0 fn(); // 1

1
2
3
4
5
6
7
8
9
10
11
function outerFn() {
  var a = 0;
  function innerFn() {
    console.log(a++);
  }
  return innerFn;
}
 
var fn = outerFn();
fn(); // 0
fn(); // 1

此地并从未在outerFn内部修改全局变量,而是从outerFn中回到了一个对innerFn的援引。通过调用outerFn能够得到那些援用,何况以此引用能够能够保留在变量中。 这种就算距离函数效率域的动静下还是能够透过引用调用内部函数的事实,意味着如若存在调用内部函数的或然,JavaScript就要求保留被引述的函数。并且JavaScript运维时必要追踪援用那一个里面函数的兼具变量,直到最后一个变量吐弃,JavaScript的杂质搜聚器本领释放相应的内部存款和储蓄器空间。

让咱们说的更淋漓尽致一些。所谓“闭包”,正是在结构函数体钦点义其余的函数作为目的对象的法子函数,而这些指标的法子函数反过来引用外层函数体中的一时变量。那使得只要指标对象在生存期内一向能保全其方式,就会直接保持原构造函数体那时采用的一时变量值。固然最开端的构造函数调用已经停止,有的时候变量的名目也都破灭了,但在对象对象的措施内却从来能援引到该变量的值,并且该值只好通这种格局来做客。纵然再次调用同样的构造函数,但只会生成新对象和情势,新的一时变量只是对应新的值,和上次此次调用的是个别独立的。

照旧前文的例子:

JavaScript

<ul> <li>0</li> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> <script> var lis = document.getElementsByTagName('li'); for(var i = 0; i < lis.length; i++) { ~function(num) { lis[i].onclick = function() { alert(num) }; }(i) } </script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<ul>
  <li>0</li>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
</ul>
<script>
  var lis = document.getElementsByTagName('li');
  for(var i = 0; i < lis.length; i++) {
    ~function(num) {
      lis[i].onclick = function() {
        alert(num)
      };
    }(i)
  }
</script>

何以不加立刻实行函数,alert的都会是5吧?

设若不加IIFE,当i的值为5的时候,判定标准不创制,for循环试行完结,但是因为每一个li的onclick方法那时候为内部函数,所以i被闭包援用,内部存款和储蓄器不能够被消亡,i的值会一直维系5,直到程序更换它依然具备的onclick函数销毁(主动把函数赋为null可能页面卸载)时才会被回收。那样每一回大家点击li的时候,onclick函数会查找i的值(成效域链是援用格局),一查等于5,然后就alert给我们了。加上IIFE后便是再创办了一层闭包,函数注脚放在括号内就改成了表明式,后边再增加括号正是调用了,这时候把i当参数字传送入,函数立刻执行,num保存每一趟i的值。

垃圾回收机制(GC)

吸收接纳来说说垃圾回收机制(Garbage Collecation)。

在上头的率先个例子中,变量始终保留在内部存款和储蓄器中,提起底与JavaScript的废品回收机制有关。JavaScript垃圾回收的体制很轻易:寻找不再利用的变量,然后释放掉其占有的内部存款和储蓄器,可是这几个历程不是实时的,因为其支付相当的大,所以垃圾回收器会根据定点的时间间隔周期性的试行。不再选拔的变量也正是生命周期甘休的变量,当然只恐怕是局地变量,全局变量的生命周期直至浏览器卸载页面才会截止。局地变量只在函数的进行进程中设有,而在那一个进程中会为部分变量在栈或堆上分配相应的长空,以存款和储蓄它们的值,然后在函数中运用这么些变量,直至函数停止,而闭包中出于内部函数的原委,外界函数并无法算是甘休。

还是上代码表明呢:

JavaScript

function fn1() { var obj = {name: 'hanzichi', age: 10}; } function fn2() { var obj = {name:'hanzichi', age: 10}; return obj; } var a = fn1(); var b = fn2();

1
2
3
4
5
6
7
8
9
10
11
function fn1() {
  var obj = {name: 'hanzichi', age: 10};
}
 
function fn2() {
  var obj = {name:'hanzichi', age: 10};
  return obj;
}
 
var a = fn1();
var b = fn2();

我们来看代码是什么样奉行的。首先定义了四个function,分外可以称作为fn1和fn2,当fn1被调用时,步入fn1的条件,会开采一块内部存款和储蓄器寄存对象{name: ‘hanzichi’, age: 10},而当调用停止后,出了fn1的条件,那么该块内部存款和储蓄器会被js引擎中的垃圾回收器自动释放;在fn2被调用的经过中,重返的对象被全局变量b所指向,所以该块内部存储器并不会被放走。

废品回收机制的品类

函数中的局地变量的生命周期:局地变量只在函数实践的历程中存在。而在那些进度中,会为局地变量在栈(或堆)内部存款和储蓄器上分配相应的空中,以便存储它们的值。然后在函数中应用这几个变量,直至函数试行达成。此时,局地变量就一向子虚乌有的画龙点睛了,由此得以自由它们的内部存款和储蓄器以供现在接纳。在这种情景下,很轻便看清变量是不是还恐怕有存在的必不可缺;但毫无全部景况下都那样轻松就可以得出结论。垃圾回收器必须盯住哪个变量有用,哪个变量没用,对于不再灵光的变量打上标志,以备现在取消其占据的内部存款和储蓄器。用于标记无用变量的国策大概会因完结而异,但现实到浏览器中的实现,则常常有七个政策。

  • 标记清除

js中最常用的废料回收措施正是标识清除。当变量踏向情形时,比如,在函数中声称三个变量,就将以此变量标识为“步向处境”。从逻辑上讲,永恒不可能放出走入蒙受的变量所占用的内部存款和储蓄器,因为倘使进行流踏向相应的境况,就大概会用到它们。而当变量离开情状时,则将其标识为“离开意况”。

废品回收器在运作的时候会给存款和储蓄在内部存款和储蓄器中的全部变量都加上暗号(当然,能够动用其余标识格局)。然后,它会去掉意况中的变量以致被遭遇中的变量引用的变量的暗记(闭包)。而在此之后再被加上记号的变量将被视为准备删除的变量,原因是条件中的变量已经无法访谈到这么些变量了。最终,垃圾回收器达成内部存款和储蓄器清除工作,销毁那个带标识的值并回收它们所据有的内部存款和储蓄器空间。

到二零零六年完工,IE、Firefox、Opera、Chrome、Safari的js完毕应用的都以标记清除的污源回收攻略或类似的政策,只不过垃圾搜集的大运间隔大有径庭。

  • 援引计数

援用计数的意义是追踪记录各样值被援引的次数。当注解了一个变量并将四个引用类型值赋给该变量时,则这么些值的援引次数就是1。如若同七个值又被赋给另三个变量,则该值的引用次数加1。相反,假设带有对这么些值引用的变量又赢得了其他贰个值,则这么些值的引用次数减1。当那一个值的援用次数产生0时,则表明未有艺术再拜见那一个值了,因此就能够将其占据的内部存款和储蓄器空间回收回来。那样,当垃圾回收器后一次再运转时,它就能够放出那二个引用次数为0的值所据有的内部存款和储蓄器。

Netscape Navigator3是最初采纳援引计数计策的浏览器,但火速它就蒙受三个严重的难点:循环引用。循环援引指的是目的A中饱含几个对准对象B的指针,而目的B中也饱含三个针对性对象A的援用。

JavaScript

function fn() { var a = {}; var b = {}; a.pro = b; b.pro = a; } fn();

1
2
3
4
5
6
7
8
function fn() {
  var a = {};
  var b = {};
  a.pro = b;
  b.pro = a;
}
 
fn();

上述代码a和b的援引次数都以2,fn()实行完结后,五个对象都早就离开境遇,在标志清除格局下是从未难点的,不过在引用计数战术下,因为a和b的引用次数不为0,所以不会被垃圾回收器回收内部存储器,假诺fn函数被大量调用,就能促成内部存储器败露

咱俩理解,IE中有一对对象而不是原生js对象。比如,其DOM和BOM中的对象正是运用C++以COM对象的款式落到实处的,而COM对象的废料回收机制接纳的就是引用计数计策。由此,尽管IE的js引擎选拔标识清除计策来实现,但js访问的COM对象依然是依靠援用计数战术的。换句话说,只要在IE中提到COM对象,就能设有循环援引的主题材料。

JavaScript

var element = document.getElementById("some_element"); var myObject = new Object(); myObject.e = element; element.o = myObject;

1
2
3
4
var element = document.getElementById("some_element");
var myObject = new Object();
myObject.e = element;
element.o = myObject;

那几个例子在贰个DOM元素(element)与叁个原生js对象(myObject)之间创制了循环引用。此中,变量myObject有三个名字为element的习性指向element对象;而变量element也可能有贰个属性名叫o回指myObject。由于存在那么些轮回援引,尽管例子中的DOM从页面中移除,它也恒久不会被回收。

为了幸免类似那样的巡回援引难点,最佳是在不行使它们的时候手工业断开原生js对象与DOM成分之间的连年:

JavaScript

myObject.element = null; element.o = null;

1
2
myObject.element = null;
element.o = null;

将变量设置为null意味着切断变量与它原先引用的值时期的连日。当垃圾回收器下一次运维时,就能够去除那些值并回收它们占领的内部存款和储蓄器。

1 赞 5 收藏 评论

编辑:计算机论坛 本文来源:简单来说它就是

关键词: