菜单

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

2019年1月31日 - 金沙前端

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

2015/04/15 · CSS,
HTML5,
JavaScript ·
特性优化

本文由 伯乐在线 –
刘健超-J.c
翻译,sunbiaobiao
校稿。未经许可,禁止转发!
英文出处:www.deanhume.com。欢迎参加翻译组。

近些年,我参与了在London举办的Facebook移动开发者大会。在那天时期,有不少的攀谈,但真正让我关怀的是一场关于品质的,名为“让m.facebook.com更快”的沟通会,它的主旨是有关非死不可怎么样不断大力革新网页品质和从中得出的阅历。

Facebook付出团队是运用Chrome
Cannry
来测试网页CSS性能的。Google Chrome
Canary
抱有Chrome的风尚特性,并允许试用一些快要成为Chrome标准版本的,可行的风行特性。考虑到Chrome
Canary作为一个为开发者和尝鲜者专门规划的“预览版”,所以有时候会因Chrome开发公司的火速迭代而导致有些B
UG。即便如此,它照旧有一些很棒的开发者工具协理你测试网页性能

图片 1

在那篇小说里,我显示什么利用Chrome
Canary的开发者工具去稳定你的CSS中的一有的,那有的CSS可能会促成页面滚动缓慢和震慑页面的绘图时间。当浏览器加载和制图页面时,为了“绘制”并让内容展现在屏幕上,须求遍历所有可知元素。由于那信赖于布局和错综复杂的CSS,你可能会意识绘制时间会很长。那会促成网页看起来忽动忽停和响应较慢。那种缓慢滚动也叫做jank(jank是Android系统的一个专业术语,指的是屏幕上朗朗上口动态画面中断的卡顿现象)。在活动装备上滚动页面时,浏览器会努力地绘制复杂的CSS,那时那种情况尤其分明。

不畏页面的加载时间更加快,也照例值得去研商页面的绘图时间。差异装备对CSS属性有着不平等的反应,但好歹,能抓好品质总是一件很好的事。为了进行测试,首先得去Google
Chrome
网站下载Chrome
Canary。一旦设置到位,就可以打开你想测试的网页。HTML5
Rocks
网站里有一个很好的案例网站,大家运用它来证实高功耗CSS属性的操作,会追加页面的绘图时间。

图片 2

一旦你打开到那个网页,按下F12,会弹出Chrome的开发者工具。然后在开发者工具的底部右侧点击设置按钮,开启测试页面渲染质量的装置。

图片 3

点击后会展现一个同意你转移设置的控制板。

图片 4

因为大家要测试页面的渲染品质,所以选取“Enable continuous page
repainting
(页面持续重新绘制)“和 “Show FPS
meter(显示FPS仪表)”**。要是您关闭设置面板,查看你的网页,你应该会面到上边的图形在页面右上角。

图片 5

该表呈现以微秒为单位的近年来页面绘制所需时日,而右手突显了眼前图表的微小与最大值。其它,也展现了近年80帧的树状图。这一个图片的兵不血刃之处是它不断试图再次绘制页面,使得页面好像是第五回加载。那允许你精确定位因CSS影响的绘图难点,而不用每一趟重复加载页面。无论你的更动是还是不是暴发震慑,树状图都会频频监测。

一旦我们详细查看那一个页面的HTML和CSS,你会看到里面一个div添加了有的CSS效果。

图片 6

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

图片 7

哇!正如你从图片可观看,页面绘制时间有一个令人关心的浮动。通过简单地将border-radius属性移除,就可以表达那个改变能让页面的绘图时间显著收缩。当您更新或变更CSS属性时,这么些图片就立马下跌。在同一个元素上同时选用box-shadowborder-radius,会促成相当重的绘图负担,那是因为浏览器不可以为之做出优化。若是有一个元素需求频仍的再一次绘制,你应有在建立网页时时刻记住那点。

那是一个很好的,在Google IO
网站上的视频,它更浓密地阐释绘制时间,并介绍一些压缩网页“jank(卡顿)”的技术。

想更进一步学习绘制时间的优化,看看这个链接。

祝测试开心!

打赏扶助自己翻译越多好小说,谢谢!

打赏译者

哇!正如你从图片可观察,页面绘制时间有一个令人关怀的转变。通过简单地将border-radius属性移除,就可以表明那个改变能让页面的绘图时间肯定滑坡。当你更新或改变CSS质量时,那么些图片就登时下落。在同一个因素上同时使用box-shadowborder-radius,会造成极度重的绘图负担,那是因为浏览器不可能为之做出优化。倘使有一个元素需求反复的双重绘制,你应该在建立网页时时刻记住那一点。

网页录制详情

援救二种网页录制操作:①录制网页加载,②录制网页交互。为了有利于分析,录制的时日不宜太长、还要防止不必要的竞相操作、并禁用浏览器的缓存和插件。
当录制完结后,在Flame
Chart
(火焰图)中点击右侧三角可以展开详情,点击其中的风云或者空白处,能够在Details中间查看该事件或者总的概要新闻。那里面包罗的音信量很大,限于篇幅原因,下次有时机再作深切介绍,或者间接到谷歌上查看提姆eline
伊芙nt Reference那个参考文档。

网页录制详情

支撑三种网页录制操作:①录制网页加载,②录制网页交互。为了方便分析,录制的日子不当太长、还要防止不要求的相互操作、并禁用浏览器的缓存和插件。

当录制落成后,在Flame
Chart
(火焰图)中点击左边三角可以举行详情,点击其中的事件依旧空白处,能够在Details其间查看该事件依旧总的概要信息。那中间含有的音讯量很大,限于篇幅原因,下次有空子再作深刻介绍,或者间接到谷歌(Google)上查看Timeline
Event
Reference以此参考文档。

有关作者:刘健超-J.c

图片 8

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

图片 9

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

小编:伯乐在线专栏撰稿人 – CharlieChu
点击 →
了然怎么进入专栏撰稿人
如需转发,发送「转发」二字查看表明

运转时质量分析

上面大概介绍了Timeline面板上的各类职能菜单,那么什么样去行使该面板去分析和优化网页程序的运转品质呢,由于篇幅限制,就不在这边展开探讨,感兴趣的读者直接到谷歌开发者文档上查看,谷歌开发者文档有最尊贵最新的新闻。

打赏支持我翻译更加多好小说,谢谢!

任选一种支付办法

图片 10
图片 11

赞 2 收藏
评论

图片 12

【转载】
Chrome开发者工具详解(3):提姆eline面板

录制中进行JS分析

在录制之前点击Controls中的JS
Profile
复选框,可以在岁月轴中抓获JavaScript的堆栈音信(会爆发一定的习性消耗),并且在Flame
Chart
(火焰图)中会显示所有被调用的JavaScript函数音讯。

图片 13

图片 14

询问指定事件

你可以由此在DevTools上按Cmd+F(Mac)
调出查询框,来查看指定时间区域限定内的指定项目标风浪,点击Cmd+G(Mac)
或者Cmd+Shift+G(Mac)
可以按事件暴发的种种来查询。

图片 15

图中查询到了4个灰色标志着的Parse HTML
事件,点击Cmd+G
关键会在那4个事件移动。

绘制解析

在录制此前点击Controls中的Paint复选框,可以获得绘制事件的越多细节信息(注意那会生出过多的属性消耗)。即使要深远摸底网页渲染方面的音信,能够点击DevTools右上角的菜谱,在More
tools
其中选中Rendering settings,那一个中含有了如下设置项:

图片 16

把上边的有所安装项勾选上,网页的显得效果如下:

图片 17

祝测试欢悦!

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

参考文档

图片 18

运作时质量分析

下边差不离介绍了Timeline面板上的各种职能菜单,那么什么样去行使该面板去分析和优化网页程序的运转品质呢,由于篇幅限制,就不在那边展开研商,感兴趣的读者直接到谷歌(Google)开发者文档上查看,谷歌开发者文档有最高贵最新的音信。
参考文档
Analyze Runtime Performance

Diagnose Forced Synchronous Layouts

概述

下图是从谷歌官方网站中介绍提姆eline面板的图贴到那里,该面板首要不外乎4大块窗格(Pane):

  1. Controls 录制开关和操纵录制进程中要求记录哪些音信。
  2. Overview 网页品质的大意音讯。
  3. Flame Chart
    CPU堆栈轨迹的可视化图表(火焰图)。在图纸里面有1到3条虚竖线。
  4. Details
    当选取一个点名的轩然大波后,会显得那个事件的越来越多音信;当没有选择事件时,会浮现指定的时刻帧音信。

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

图片 19

其中第2块Overview体现了网页质量相关的大意音信,能够透过鼠标或者区域边界上的粉黑色滑块来拖出一个点名区域限制,Flame
Chart
会随着有些放大显示指定区域内的详情信息。

可以经过键盘上的W,S来加大和紧缩指定区域,通过A,D来向左或向右移动指定区域。

从谷歌(Google)把图贴到那里,这一个窗格包括了多少个图表:

  1. FPS 每秒帧数(Frames Per
    Second)。灰色柱状条越高,则每秒帧数越高。在FPS图表上方的革命块是符号一个长帧。
  2. CPU
    标记CPU资源的采取意况,那里的面积图标记着花费CPU资源的各个事件。
  3. NET
    种种颜色的柱状条分别彰显一种资源。柱状条越长,代表获取那一个资源的时日越长。

图片 20

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

NET图表柱状条二种颜色的意义:较亮的部分代表等候时间(当资源被呼吁时,直到首个字节被下载的光阴);较暗的一些代表传输时间(在首先个和最后一个字节被下载之间的时辰)。

相关文章

发表评论

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

网站地图xml地图