垃圾回收机制,性能进阶篇

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

2015/07/05 · HTML5 · Chrome

初稿出处: 卖烧烤夫斯基   

前言

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(内部存款和储蓄器快速照相**

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

图片 4

能够见到左侧区域生成个公文,文件名下方有数字,表示那么些张快速照相记录到的内部存款和储蓄器大小(此时为3.2M)。左侧区域是个列表,它分成五列,表头能够服从数值大小手动排序。在那张表格中列出的有的列数字和标志,以及表头的意思相比复杂,涉及到一些js和内部存款和储蓄器的文化,大家就先从那个表头发轫询问她们。从左到右的一一它们各自代表:
Constructor(构造函数)表示具有通过该构造函数生成的对象
Distance 对象达到GC根的最短距离
Objects Count 对象的实例数
Shallow size 对应构造函数生成的靶子的shallow sizes(直接占用内部存款和储蓄器)总的数量
Retained size 显示了对应对象所占用的最大内部存款和储蓄器
CG根!是神马东西?在google的法定文书档案中的建议是CG根不必用到开采者去关爱。不过大家在此地可以大约表达一(Wissu)下。大家都明白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函数重回了叁个函数表明式(见汤姆公公的博客函数表达式和函数证明),当中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();//第1个实例 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多的求证,特别详尽。前提是您能跳到墙外去。当然也可以有翻译文书档案(卤煮的法门都给你了,推荐一下啊)。最后真的是要像一片作品里面写的同样“感激发明计算机的人,让大家这一个剪刀加浆糊的学问土匪形成了复制加粘贴版的学术海盗。”下一期是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 收藏 评论

本文由365bet体育在线官网发布于前端技术,转载请注明出处:垃圾回收机制,性能进阶篇

TAG标签:
Ctrl+D 将本页面保存为书签,全面了解最新资讯,方便快捷。