金沙糖果派对网站app 15

Web质量优化体系(2):分析页面绘制时间

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

本文由 伯乐在线 –
刘健超-J.c
翻译,sunbiaobiao
校稿。未经许可,禁止转发!
罗马尼亚(România)语出处:www.deanhume.com。接待出席翻译组。

新近,我在场了在伦敦实行的Facebook移动开垦者大会。在此天时期,有为数不菲的交谈,但确确实实让本人关注的是一场有关品质的,名叫“让m.facebook.com更快”的交换会,它的大旨是有关照片墙如何不断努力改过网页质量和从当中得出的阅历。

Facebook支出公司是应用Chrome
Cannry
来测量试验网页CSS性能的。Google Chrome
Canary
全数Chrome的流行特性,并允许试用一些将要成为Chrome标准版本的,可行的风靡个性。挂念到Chrome
Canary作为三个为开垦者和尝鲜者特意设计的“预览版”,所以不时候会因Chrome开拓组织的短平快迭代而导致部分B
UG。即便如此,它仍然有局地很棒的开拓者工具扶助您测量试验网页性能

金沙糖果派对网站app 1

在这里篇作品里,小编显得什么行使Chrome
Canary的开荒者工具去稳固你的CSS中的一片段,那有的CSS可能会促成页面滚动缓慢和震慑页面包车型大巴绘图时间。当浏览器加载和制图页面时,为了“绘制”并让内容显示在显示屏上,须要遍历全部可以预知成分。由于那信赖于布局和复杂的CSS,你只怕会意识绘制时间会很短。那会变成网页看起来忽动忽停和响应很慢。这种缓慢滚动也称为jank(jank是Android系统的三个专门的学问术语,指的是显示屏上抑扬顿挫动态画面中断的卡顿现象)。在移动设备上滚动页面时,浏览器会用尽全力地绘制复杂的CSS,这个时候这种境况愈加明显。

固然页面包车型大巴加载时间一点也比一点也不慢,也照样值得去商量页面包车型客车绘图时间。不相同道具对CSS属性有着不肖似的反馈,但不管如何,能拉长性能总是大器晚成件很好的事。为了实行测量试验,首先得去Google
Chrome
网址下载Chrome
Canary。生机勃勃旦设置到位,就足以张开你想测验的网页。HTML5
Rocks
网址里有三个很好的案例网址,大家运用它来表明高耗电CSS属性的操作,会增添页面包车型客车绘图时间。

金沙糖果派对网站app 2

只要你打开到这几个网页,按下F12,会弹出Chrome的开采者工具。然后在开拓者工具的底部左侧点击设置开关,开启测量试验页面渲染品质的装置。

金沙糖果派对网站app 3

点击后会显示三个允许你改正设置的调控板。

金沙糖果派对网站app 4

因为大家要测量检验页面的渲染质量,所以选取“Enable continuous page
repainting
(页面持续重新绘制)“和 “Show FPS
meter(显示FPS仪表)”**。假设你关闭设置面板,查看你的网页,你应当会看见上面包车型地铁图片在页面右上角。

金沙糖果派对网站app 5

该表展现以微秒为单位的当下页面绘制所需时日,而右侧突显了脚下图表的小小与最大值。别的,也出示了近日80帧的树状图。这些图片的强盛之处是它不断试图再度绘制页面,使得页面好疑似率先次加载。那允许你正显著位因CSS影响的绘图难题,而不用每一次重复加载页面。无论你的更正是或不是产生潜濡默化,树状图都会持续监测。

要是大家详细查看这些页面包车型客车HTML和CSS,你会看出里面一个div增加了有个别CSS效果。

金沙糖果派对网站app 6

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

金沙糖果派对网站app 7

哇!正如你从图片可阅览,页面绘制时间有一个令人关怀的改换。通过轻便地将border-radius属性移除,就能够印证这几个修改能让页面包车型客车绘图时间确定减少。当你更新或校订CSS属性时,那些图形就应声下跌。在同贰个成分上还要利用box-shadowborder-radius,会招致相当的重的绘图肩负,这是因为浏览器不可能为之做出优化。要是有八个成分供给一再的再度绘制,你应该在建设构造网页时时刻记住那点。

那是一个很好的,在Google IO
网站上的录制,它更浓重地演说绘制时间,并介绍一些裁减网页“jank(卡顿)”的技艺。

想更进一竿深造绘制时间的优化,看看那几个链接。

祝测量检验欢快!

打赏援助我翻译越来越多好小说,多谢!

打赏译者

本文由 伯乐在线 – J.c 翻译,sunbiaobiao 校稿。未经许可,幸免转发!
英语出处:www.deanhume.com。迎接参与翻译小组。

【转载】
Chrome开荒者工具详解(3):Timeline面板

原来的文章链接 http://web.jobbole.com/92871/

打赏帮忙小编翻译越来越多好小说,多谢!

任选生龙活虎种支付办法

金沙糖果派对网站app 8
金沙糖果派对网站app 9

赞 2 收藏
评论

日前,小编插手了在London举行的推文(Tweet)移动开荒者大会。在此天时期,有为数不少的交谈,但确确实实让笔者精细入微的是一场有关质量的,名称叫“让m.facebook.com更快”的沟通会,它的主题是关于推特怎么着不断努力修正网页质量和从当中摄取的阅历。

我:伯乐在线专栏小编 – CharlieChu
点击 →
驾驭怎么样步向专栏小编
如需转发,发送「转发」二字查看表达

浏览器 101:像素是怎么来的

在深深斟酌在此之前,大家要先搞掌握二个很关键的难题:浏览器是怎么把代码转变成为客户可知的像素点呢?

第贰次加载时,浏览器会下载并剖判 HTML,将 HTML 元素调换为一个 DOM
节点的「内容树」(content tree)。除了那几个之外,样式相通会被解析生成「渲染树」
(render
tree)。为了提高质量,渲染引擎会分开实现那么些工作,以至会现身渲染树比
DOM 树更快生成出来。

有关小编:刘健超-J.c

金沙糖果派对网站app 10

前端,在路上…
个人主页 ·
小编的篇章 ·
19 ·
    

金沙糖果派对网站app 11

Facebook付出组织是应用Chrome
Cannry
来测量试验网页CSS性能的。Google Chrome
Canary
装有Chrome的摩登性格,并同意试用一些快要成为Chrome规范版本的,可行的时尚特性。思量到Chrome
Canary作为贰个为开垦者和尝鲜者特地布署的“预览版”,所以有的时候会因Chrome开拓团队的长足迭代而招致有些B
UG。就算如此,它照旧有生龙活虎对很棒的开垦者工具帮忙你测量试验网页性能

Chrome
开采者工具详解(1):Elements、Console、Sources面板

布局

渲染树生成后,浏览器会从页面左上角开班迭代神草兵简政出各种元素尺寸和地点,最后生成布局。那么些历程只怕是到位的,但也大概鉴于成分的排列导致再三地绘制。成分间的岗位关系都密不可分有关。为了优化要求的任务,浏览器会追踪元素的成形情形,并将这几个元素以至它们的子节点标志为
‘dirty’(脏成分)。不过元素间耦合紧凑,其余布局上的改动代价都是首要的,应该尽量制止

金沙糖果派对网站app 1

Chrome 开拓者工具详解(2):Network
面板

绘制

调换布局后,浏览器将页面绘制到显示器上。这一个环节和「布局」步骤相仿,浏览器会追踪脏成分,将它们统生机勃勃到三个重特大的矩形区域中。每意气风发帧内只会发出二遍重绘,用于绘制那么些被传染区域。重绘也会损耗大批量属性,能免则免

在这里篇文章里,小编出示什么行使Chrome
Canary的开拓者工具去牢固你的CSS中的一片段,那有些CSS或者会促成页面滚动缓慢和潜濡默化页面包车型地铁绘图时间。当浏览器加载和制图页面时,为了“绘制”并让内容展现在显示屏上,须要遍历全体可以看到成分。由于那注重于布局和错综相连的CSS,你也许会发现绘制时间会非常短。这会变成网页看起来忽动忽停和响应异常慢。这种缓慢滚动也称为jank(jank是Android系统的三个专门的工作术语,指的是显示屏上轻重缓急动态画面中断的卡顿现象)。在活动器械上滚动页面时,浏览器会尽心尽力地绘制复杂的CSS,那时候这种景观尤为明显。

Timeline面板

Timeline面板是全方位面板里面最复杂的二个面板,涉及的事物超多。能够行使那个面板来记录和解析网页运转进度中的全部移动行为消息。
你能够充裕利用这一个面板来分析你的网页的前后相继品质难点。

金沙糖果派对网站app 13

概述
下图是从谷歌(Google)官方网站中介绍Timeline面板的图贴到那边,该面板主要归纳4大块窗格(Pane):
Controls 录像按键和调整录像进程中须求记录哪些音信。

Overview 网页质量的概要音信。

金沙糖果派对网站app,Flame Chart
CPU货仓轨迹的可视化图表(火焰图)。在图片里面有1到3条虚竖线。

Details
当接收四个点名的事件后,会展现这些事件的越多消息;当未有选择事件时,会来得内定的年华帧音讯。

Flame
Chart
当中的虚竖线含义:蓝色标记DOMContentLoaded事件;绿色标志第一遍的绘图时间点;红色代表load事件。

金沙糖果派对网站app 14

其中第2块Overview来得了网页质量相关的大体新闻,可以因此鼠标也许区域边界上的浅黄滑块来拖出三个点名区域节制,Flame
Chart
会跟着有些放大彰显钦命区域内的详细的情况新闻。
能够透过键盘上的W
,S
来放大和裁减钦点区域,通过A
,D
来向左或向右移动钦赐区域。

从谷歌(Google)把图贴到这里,这些窗格满含了四个图表:
FPS 每秒帧数(Frames Per
Second)。灰湖绿柱状条越高,则每秒帧数越高。在FPS图表上方的新民主主义革命块是标识一个长帧。

CPU 标志CPU能源的采纳状态,这里的面积Logo志着花费CPU能源的种种事件。

NET
各类颜色的柱状条分别突显大器晚成种财富。柱状条越长,代表获取这几个资源的时刻越长。

金沙糖果派对网站app 15

CPU面积图中各颜色的含义:蓝色代表HTML文件;黄色代表脚本文件;紫色代表样式文件;绿色代表媒体文件;灰色代表任何杂项文件。

NET图形柱状条三种颜色的意义:较亮的生机勃勃对代表等候时间(当财富被倡议时,直到第多少个字节被下载的光阴);较暗的风姿浪漫部分代表传输时间(在率先个和尾声二个字节被下载之间的时间)。

复合

提起底一步,将富有绘制好的因素举办复合。暗许景况下,全数因素将会被绘制到同二个层中;假如将成分分别到分化的复合层中,更新元素对品质友好,不在同黄金年代层的因素不轻易受到震慑。CPU
绘制层,GPU
生成层。基础绘图操作在硬件加快合成人中学做到效用高。层的离别允许非破坏性的退换,正如你所估算的,GPU
复合层上的改观代价最小质量消耗最少

不怕页面包车型大巴加载时间比较快,也一直以来值得去切磋页面包车型大巴绘图时间。分裂器具对CSS属性有着不一样等的反馈,但不管怎么着,能增进质量总是生龙活虎件很好的事。为了进行测量试验,首先得去Google
Chrome
网站下载Chrome
Canary。豆蔻梢头旦设置到位,就足以打开你想测量试验的网页。HTML5
Rocks
网址里有三个很好的案例网址,我们运用它来表明高功耗CSS属性的操作,会扩大页面包车型客车绘图时间。

网页摄像详细情况

支撑三种网页摄像操作:①录制网页加载,②录制网页交互。为了有助于深入分析,摄像的年华不当太长、还要幸免不必要的互动操作、并禁止使用浏览器的缓存和插件。
当摄像达成后,在Flame
Chart
(火焰图)中点击左侧三角能够拓宽详细的情况,点击个中的事件大概空白处,能够在Details中间查看该事件还是总的概要新闻。那之中包蕴的消息量比较大,限于篇幅原因,后一次有空子再作深刻介绍,可能直接到谷歌上查看Timeline
伊夫nt Reference那么些参照他事他说加以调查文书档案。

激励创造技巧

貌似情状下,改正复合层是相对消耗品质非常少的三个操作,所以尽可能通过转移opacity和transform的值触发复合层绘制。看起来好像…大家能做出的遵从会非常轻便,但实在是那样呢?要美貌开采本身的创造力哦。

admin

相关文章

发表评论

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