【澳门新萄京8522】Chrome开发者工具详解(三)：Timeline面板

【澳门新萄京8522】Chrome开发者工具详解(三)：Timeline面板

关于作者：刘健超-J.c

澳门新萄京8522 1

前端，在路上…
个人主页 ·
笔者的小说 ·
19 ·
    

澳门新萄京8522 2

Facebook付出团队是应用Chrome
Cannry来测试网页CSS性能的。Google Chrome
Canary全部Chrome的前卫个性，并允许试用一些快要成为Chrome标准版本的，可行的风行性情。思量到Chrome
Canary作为一个为开发者和尝鲜者专门规划的“预览版”，所以有时候会因Chrome开发公司的敏捷迭代而导致部分B
UG。固然如此，它如故有一些很棒的开发者工具支持你测试网页性能。

询问钦点事件

您能够因而在DevTools上按Cmd+F(Mac)
调出查询框，来查阅内定时间区域范围内的钦定项指标风浪，点击Cmd+G(Mac)
或者Cmd+Shift+G(Mac)
能够按事件产生的顺序来询问。

澳门新萄京8522 3

图中询问到了四个鲜黄标志着的Parse HTML
事件，点击Cmd+G
关键会在那陆个事件移动。

优化的前景

浏览器在质量优化方面持续投入了更多的生气。通过新属性
contain
能够声美素佳儿个要素的子树独立于页面包车型客车别的因素（近年来唯有 Chrome 和 Opera
援助该属性）。那就万分告诉了浏览器「这几个元素是平安的，它不会影响到其余因素」。contain
的属性值根据变化的界定规定，能够是
strict、content、size、layout、style 或者
paint。那确定保证了子树被更新的时候，不会导致父元素的重排。特别是在引进第3方控件的时候：

.box { contain: style; // 限制样式范围在要素和它的子元素中 }

1
2
3
.box {
   contain: style; // 限制样式范围在元素和它的子元素中
}

Web品质优化种类（二）：剖析页面绘制时间

2015/04/15 · CSS,
HTML5,
JavaScript ·
质量优化

本文由 伯乐在线 –
刘健超-J.c
翻译，sunbiaobiao
校稿。未经许可，禁止转发！
英文出处：www.deanhume.com。欢迎到场翻译组。

最近，作者参加了在伦敦举行的脸谱移动开发者大会。在那天时期，有好多的攀谈，但着实让本身关注的是一场关于品质的，名称叫“让m.facebook.com更快”的交流会，它的大旨是关于Twitter怎样不断努力改正网页质量和从中汲取的经历。

Facebook支出集团是选取Chrome
Cannry来测试网页CSS性能的。Google Chrome
Canary具有Chrome的摩登性子，并允许试用1些即将成为Chrome标准版本的，可行的流行性格。思量到Chrome
Canary作为二个为开发者和尝鲜者专门设计的“预览版”，所以有时候会因Chrome开发组织的高速迭代而造成都部队分B
UG。固然如此，它依然有1对很棒的开发者工具协助您测试网页性能。

澳门新萄京8522 4

在那篇小说里，作者显得什么利用Chrome
Canary的开发者工具去稳定你的CSS中的1有的，这某个CSS恐怕会促成页面滚动缓慢和潜移默化页面包车型地铁绘图时间。当浏览器加载和制图页面时，为了“绘制”并让内容显示在显示屏上，须要遍历全部可知成分。由于那注重于布局和复杂的CSS，你或许会意识绘制时间会很短。那会造成网页看起来忽动忽停和响应较慢。这种缓慢滚动也称为jank(jank是Android系统的贰个专业术语，指的是显示屏上朗朗上口动态画面中断的卡顿现象)。在移动设备上滚动页面时，浏览器会全力地绘制复杂的CSS，那时那种情况越来越明显。

就算页面包车型大巴加载时间异常快，也一如既往值得去研商页面包车型大巴绘图时间。分化装备对CSS属性有着不雷同的反馈，但不管如何，能增进性能总是1件很好的事。为了举行测试，首先得去Google
Chrome网址下载Chrome
Canary。壹旦设置到位，就足以打开你想测试的网页。HTML5
Rocks网址里有3个很好的案例网站，我们选拔它来评释高耗能CSS属性的操作，会增多页面的绘图时间。

澳门新萄京8522 5

假诺您打开到那一个网页，按下F12，会弹出Chrome的开发者工具。然后在开发者工具的平底左边点击设置按钮，开启测试页面渲染品质的安装。

澳门新萄京8522 6

点击后会展现1个允许你转移设置的控制板。

澳门新萄京8522 7

因为咱们要测试页面包车型大巴渲染品质，所以选拔“Enable continuous page
repainting（页面持续重新绘制）“和 “Show FPS
meter（显示FPS仪表）”**。假如你关闭设置面板，查看你的网页，你应有会看到上边包车型客车图形在页面右上角。

澳门新萄京8522 8

该表彰显以飞秒为单位的如今页面绘制所需时间，而右手显示了方今图表的纤维与最大值。此外，也突显了多年来80帧的树状图。那一个图片的精锐之处是它不止试图再一次绘制页面，使得页面好像是率先次加载。那允许你精明确位因CSS影响的绘图问题，而不用每一趟重复加载页面。无论你的转移是或不是爆发潜移默化，树状图都会不停监测。

设若大家详细查看这些页面包车型客车HTML和CSS，你会看出里边二个div添加了有个别CSS效果。

澳门新萄京8522 9

以此div有border-radius(圆角)和投影属性。当移除box-shadow属性，再观望FPS
meter在绘制时间的扭转。

澳门新萄京8522 10

哇！正如你从图片可看到，页面绘制时间有贰个令人关怀的变化。通过简单地将border-radius属性移除，就能够证实那一个改变能让页面包车型地铁绘图时间肯定滑坡。当你更新或改变CSS质量时，这几个图片就立即下落。在同3个因素上同时利用box-shadow和border-radius，会导致格外重的绘图负担，那是因为浏览器不可能为之做出优化。假使有3个因素供给频仍的重复绘制，你应当在制造网页时时刻记住那一点。

那是1个很好的，在Google IO
网站上的摄像，它更加深切地演说绘制时间，并介绍部分回落网页“jank(卡顿)”的技艺。

想更进一步深造绘制时间的优化，看看那么些链接。

祝测试欢跃！

打赏支持本身翻译越来越多好作品，多谢！

打赏译者

那是三个很好的，在Google IO
网站上的摄像，它更深远地阐释绘制时间，并介绍部分缩减网页“jank(卡顿)”的技艺。

Chrome 开发者工具详解(二)：Network
面板

浏览器 十壹：像素是怎么来的

在深切探讨在此之前，大家要先搞通晓二个很要紧的标题：浏览器是怎么把代码转化成为用户可知的像素点呢？

第二次加载时，浏览器会下载并分析 HTML，将 HTML 成分转变为1个 DOM
节点的「内容树」(content tree)。除却，样式一样会被分析生成「渲染树」
(render
tree)。为了升高质量，渲染引擎会分开完结那一个工作，甚至会出现渲染树比 DOM
树更加快生成出来。

澳门新萄京8522 11

打赏帮衬本身翻译越多好小说，多谢！

任选壹种支付格局

澳门新萄京8522 12
澳门新萄京8522 13

赞 2 收藏
评论

祝测试欢快！

运维时质量分析

上边大概介绍了Timeline面板上的种种职能菜单，那么什么样去行使该面板去分析和优化网页程序的运营品质呢，由于篇幅限制，就不在那边展开切磋，感兴趣的读者直接到谷歌（Google）开发者文书档案上查看，谷歌开发者文书档案有最上流最新的音信。
参考文书档案
Analyze Runtime Performance

Diagnose Forced Synchronous Layouts

注脚式动画

CSS
动画是申明式的（告诉浏览器要做哪些），浏览器要求驾驭动画的发端状态和平息景况，那样它才晓得怎么优化。CSS
动画不是在主线程中履行，不会妨碍主线程中的任务履行。总的来说，CSS
动画对质量更温馨。关键帧的卡通片组成提供了一定丰盛的视觉效果，比如上面是2个成分的极端旋转动画：

@keyframes spin { from {transform: rotate(0deg);} to {transform:
rotate(360deg);} } .box { animation-name: spin; animation-duration: 3ms;
animation-iteration-count: infinite; animation-timing-function: linear;
}

1
2
3
4
5
6
7
8
9
10
@keyframes spin {
    from {transform: rotate(0deg);}
    to {transform: rotate(360deg);}
}
.box {
   animation-name: spin;
   animation-duration: 3ms;
   animation-iteration-count: infinite;
   animation-timing-function: linear;
}

但 CSS 动画贫乏 JS 的表明能力，将双方结合起来效果越来越好：比如用 JS
监听用户输入，依照动作切换类名。类名对应着分化的动画片效果。上边包车型地铁代码达成的是当成分被点击时切换类名：

const box = document.getElementById(“box”) box.addEventListener(“click”,
function(){ box.classList.toggle(“class-name”); });

1
2
3
4
const box = document.getElementById("box")
box.addEventListener("click", function(){
    box.classList.toggle("class-name");
});

值得壹提的是，借使您在操作「出血」（注：设计中在画布肆边留出的必定区域称为「出血」）时，新的
Web Animation API 会利用 CSS
的属性。通过这一个API，开发者能轻轻松松地在性质友好的根基上拍卖动画的联合署名和岁月难题。

澳门新萄京8522 9

摄像中举行JS分析

在摄像在此之前点击Controls中的JS
Profile复选框，可以在时间轴中捕获JavaScript的堆栈音讯(会时有爆发一定的质量消耗)，并且在Flame
Chart(火焰图)中会突显全部被调用的JavaScript函数消息。

澳门新萄京8522 15

测试和迭代

动画片质量优化最不难易行的方案就是减掉每壹帧的工作量。最实用缓解质量压力的秘诀正是，尽量只更新在复合层中的成分，重新渲染复合层元素不不难影响到页面上其余因素。质量优化往往意味着反复地质衡量试和注明，以及跳出惯性思维找到奇技淫巧达成高性能动画
— 无论怎么，最后收益的会是用户和开发者。

2

在那篇作品里，笔者出示怎么着行使Chrome
Canary的开发者工具去稳定你的CSS中的一片段，那有的CSS恐怕会造成页面滚动缓慢和震慑页面包车型大巴绘图时间。当浏览器加载和制图页面时，为了“绘制”并让内容呈现在显示屏上，需求遍历全数可知成分。由于那信赖于布局和复杂性的CSS，你恐怕会发现绘制时间会很短。那会导致网页看起来忽动忽停和响应较慢。那种缓慢滚动也称为jank(jank是Android系统的3个专业术语，指的是显示器上朗朗上口动态画面中断的卡顿现象)。在活动设备上滚动页面时，浏览器会极力地绘制复杂的CSS，这时那种气象更为简明。

我：伯乐在线专栏小编 – CharlieChu
点击 →
精通哪些进入专栏撰稿人
如需转载，发送「转发」2字查看表明

手动优化

再有3个好音讯 —
开发者可以接纳想要控制的属性，创造复合层，并将成分拖到该层。通过手动优化，确认保障成分总能被绘制好，这也是通报浏览器准备绘制该因素的最不难易行方法。须要独立层的气象包含：成分的动静将发出局地变动（比如卡通）、改变了很花费品质的体制（比如
position:fixed 和
overflow:scroll）。大概你也见过了倒霉的性质导致了页面闪烁、震动…或其余不比预期的成效，例如移动端常见的一定在视口顶部的底部，会在页面滚动的时候闪烁。将那样的因素独立到自身的复合层，便是常见的解决那类难点的主意。

近期，笔者在场了在London实行的照片墙移动开发者大会。在那天时期，有好多的交谈，但真正让自己关注的是一场有关质量的，名叫“让m.facebook.com更快”的交换会，它的主旨是有关推特(Twitter)怎么样不断大力改善网页品质和从中得出的经验。

摄像中捕获截屏

在录制在此以前点击Controls中的Screenshots复选框，能够在录像进程中捕获截屏，鼠标在Overview上从左向右移动则足以看看摄像的卡通。

澳门新萄京8522 16

变换

「变换」为要素提供了分外的只怕性：地方可以转移 (translateX,
translateY, 或 translate3d)、大小也得以因此缩放 (scale)
改变、还是能够旋转、斜切甚至 3D
变换。就是在少数场景下，开发者要求换1种思想情势，通过应用变换减少重排和重绘。
比如给多个元素添加 active 类名后它会向左移动 十px，能够因此转移 left
属性：

.box { position: relative; left: 0; } .active{ left: -10px; }

1
2
3
4
5
6
7
.box {
  position: relative;
  left: 0;
}
.active{
    left: -10px;
}

也能够用能够完成同等效果但质量越来越好的 translate：

.active { transform: translateX(-10px); }

1
2
3
.active {
    transform: translateX(-10px);
}

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图