剖析页面绘制时间,Web品质优化种类

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

2015/04/15 · 剖析页面绘制时间,Web品质优化种类。CSS,
HTML5,
JavaScript ·
特性优化

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

近来,我参加了在London进行的脸书移动开发者大会。在那天期间,有那一个的攀谈,但真正让自身关心的是一场有关质量的,名为“让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。一旦设置落成,就可以打开你想测试的网页。剖析页面绘制时间,Web品质优化种类。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(卡顿)”的技艺。

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

祝测试欢畅!

打赏协理自己翻译越来越多好小说,谢谢!

打赏译者

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

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

Chrome开发者工具详解(3)-提姆eline面板

注:
这一篇首要助教面板提姆eline,参考了谷歌的相干文档,首要用以公司里面技术分享。

注:
这一篇首要教学面板提姆eline,参考了谷歌的相关文档,紧要用来集团内部技术分享。

打赏协理自己翻译更加多好小说,谢谢!

任选一种支付办法

皇家赌场手机版 8
皇家赌场手机版 9

赞 2 收藏
评论

新近,我在场了在London举行的Facebook移动开发者大会。在那天时期,有那一个的交谈,但真正让自己关爱的是一场有关品质的,名为“让m.facebook.com更快”的沟通会,它的大旨是有关非死不可怎样不断大力改进网页质量和从中得出的阅历。

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

Timeline面板

提姆eline面板是全方位面板里面最复杂的一个面板,涉及的东西相比多。可以动用那么些面板来记录和剖析网页运行进程中的所有移动作为音信。
你可以丰盛利用这几个面板来分析你的网页的程序性能难点。

皇家赌场手机版 10

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

皇家赌场手机版 11

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

皇家赌场手机版 12

Facebook付出公司是运用Chrome
Cannry
来测试网页CSS性能的。Google Chrome
Canary
所有Chrome的新颖特性,并允许试用一些即将成为Chrome标准版本的,可行的摩登特性。考虑到Chrome
Canary作为一个为开发者和尝鲜者专门规划的“预览版”,所以有时候会因Chrome开发公司的很快迭代而导致部分B
UG。固然如此,它照旧有一部分很棒的开发者工具匡助您测试网页性能

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

概述

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

  1. Controls 录制开关和操纵录制进程中需求记录哪些新闻。
  2. Overview 网页质量的大意音讯。
  3. Flame Chart
    CPU堆栈轨迹的可视化图表(火焰图)。在图纸里面有1到3条虚竖线。
  4. Details
    当选用一个指定的事件后,会来得那么些事件的越来越多消息;当没有选择事件时,会展示指定的时刻帧音信。

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

皇家赌场手机版 13

其中第2块Overview突显了网页质量相关的元帅新闻,可以通过鼠标或者区域界线上的红色滑块来拖出一个指定区域限量,Flame
Chart
会随之有些放大显示指定区域内的详情音信。

能够因而键盘上的W,S来松开和紧缩指定区域,通过A,D来向左或向右移动指定区域。

从谷歌(Google)把图贴到那里,那么些窗格包涵了三个图表:

  1. FPS 每秒帧数(Frames Per
    Second)。肉色柱状条越高,则每秒帧数越高。在FPS图表上方的新民主主义革命块是标志一个长帧。
  2. CPU
    标记CPU资源的选取情况,这里的面积图标记着开销CPU资源的种种事件。
  3. NET
    各样颜色的柱状条分别展现一种资源。柱状条越长,代表获取那些资源的年华越长。

皇家赌场手机版 14

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

NET图片柱状条三种颜色的含义:较亮的一对代表等候时间(当资源被呼吁时,直到第三个字节被下载的年月);较暗的片段代表传输时间(在率先个和尾声一个字节被下载之间的时日)。

皇家赌场手机版 15

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

网页录制详情

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

当录制落成后,在Flame
Chart
(火焰图)中点击右边三角能够开展详情,点击其中的轩然大波或者空白处,可以在Details里面查看该事件或者总的概要新闻。那中间含有的信息量很大,限于篇幅原因,下次有时机再作深入介绍,或者直接到谷歌(Google)上查看Timeline
Event
Reference本条参考文档。

在那篇小说里,我浮现什么行使Chrome
Canary的开发者工具去稳定你的CSS中的一部分,那有的CSS可能会促成页面滚动缓慢和震慑页面的绘图时间。当浏览器加载和制图页面时,为了“绘制”并让内容浮现在屏幕上,须求遍历所有可知元素。由于那敬重于布局和错综复杂的CSS,你可能会发觉绘制时间会很长。那会导致网页看起来忽动忽停和响应较慢。这种缓慢滚动也称为jank(jank是Android系统的一个专业术语,指的是屏幕上朗朗上口动态画面中断的卡顿现象)。在运动设备上滚动页面时,浏览器会竭尽全力地绘制复杂的CSS,这时那种气象更为扎眼。

Timeline面板

提姆eline面板是漫天面板里面最复杂的一个面板,涉及的东西比较多。可以运用那一个面板来记录和剖析网页运行进度中的所有活动作为音信。
你可以充裕利用那一个面板来分析你的网页的主次质量难点。

皇家赌场手机版 16

概述
下图是从谷歌(Google)官方网站中介绍提姆eline面板的图贴到那里,该面板首要概括4大块窗格(Pane):
Controls 录制开关和控制录制进度中必要记录哪些消息。

Overview 网页品质的大意音讯。

Flame Chart
CPU堆栈轨迹的可视化图表(火焰图)。在图片里面有1到3条虚竖线。

Details
当选择一个指定的轩然大波后,会来得那一个事件的更加多音信;当没有选用事件时,会体现指定的岁月帧音讯。

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

皇家赌场手机版 17

其中第2块Overview体现了网页品质相关的中校音讯,可以因此鼠标或者区域界线上的青色滑块来拖出一个指定区域限量,Flame
Chart
会随着有些放大彰显指定区域内的详情音讯。
能够透过键盘上的W
,S
来推广和裁减指定区域,通过A
,D
来向左或向右移动指定区域。

从谷歌(Google)把图贴到那里,这么些窗格包涵了七个图表:
FPS 每秒帧数(Frames Per
Second)。藏蓝色柱状条越高,则每秒帧数越高。在FPS图表上方的黄色块是标志一个长帧。

CPU 标记CPU资源的使用景况,那里的面积图标记着费用CPU资源的各种事件。

NET
各样颜色的柱状条分别彰显一种资源。柱状条越长,代表获取那几个资源的小时越长。

皇家赌场手机版 18

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

NET图表柱状条二种颜色的意义:较亮的一部分代表等待时间(当资源被呼吁时,直到第四个字节被下载的时日);较暗的一些代表传输时间(在第二个和末段一个字节被下载之间的时刻)。

录制中开展JS分析

在录制此前点击Controls中的JS
Profile
复选框,可以在岁月轴中抓获JavaScript的仓库音讯(会时有暴发一定的性质消耗),并且在Flame
Chart
(火焰图)中会呈现所有被调用的JavaScript函数音讯。

皇家赌场手机版 19

尽管页面的加载时间至极快,也照样值得去探讨页面的绘图时间。分化装备对CSS属性有着不平等的感应,但无论怎样,能增加品质总是一件很好的事。为了进行测试,首先得去Google
Chrome
网站下载Chrome
Canary。一旦设置到位,就可以打开你想测试的网页。HTML5
Rocks
网站里有一个很好的案例网站,大家运用它来表达高功耗CSS属性的操作,会增多页面的绘图时间。

网页录制详情

支撑二种网页录制操作:①录制网页加载,②录制网页交互。为了便利分析,录制的光阴不宜太长、还要防止不要求的互动操作、并禁用浏览器的缓存和插件。
当录制已毕后,在Flame
Chart
(火焰图)中点击左边三角可以开展详情,点击其中的事件或者空白处,可以在Details其间查看该事件仍旧总的概要新闻。那其间包蕴的音讯量很大,限于篇幅原因,下次有机会再作长远介绍,或者直接到谷歌上查看提姆eline
伊夫nt Reference这么些参考文档。

录制中捕获截屏

在录制之前点击Controls中的Screenshots复选框,可以在录制进度中捕获截屏,鼠标在Overview上从左向右移动则足以看到录制的动画片。

皇家赌场手机版 20

皇家赌场手机版 21

录制中举行JS分析

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

皇家赌场手机版 22

制图解析

在录制从前点击Controls中的Paint复选框,可以收获绘制事件的愈多细节新闻(注意那会爆发许多的性质消耗)。即使要深远摸底网页渲染方面的音讯,可以点击DevTools右上角的食谱,在More
tools
中间选中Rendering settings,这其中含有了之类设置项:

皇家赌场手机版 23

  • Paint Flashing 高亮突显网页中须要被重绘的部分。
  • Layer Borders 显示Layer边界。
  • FPS Meter 每一秒的帧细节,帧速率的分布音讯和GPU的内存使用状态。
  • Scrolling Performance Issues
    分析鼠标滚动时的习性难题,会呈现使显示屏滚动变慢的区域。
  • Emulate CSS Media
    仿真CSS媒体类型,查看差别的装备上CSS样式效果,可能的媒体类型选拔有printscreen

把地点的兼具安装项勾选上,网页的突显效果如下:

皇家赌场手机版 24

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

录制中捕获截屏

在录制从前点击Controls中的Screenshots复选框,可以在录制进程中抓获截屏,鼠标在Overview上从左向右移动则能够见见录制的卡通。

皇家赌场手机版 25

查询指定事件

你可以因而在DevTools上按Cmd+F(Mac)调出查询框,来查阅指定时间区域限制内的指定项目标事件,点击Cmd+G(Mac)或者Cmd+Shift+G(Mac)可以按事件暴发的各类来查询。

皇家赌场手机版 26

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

皇家赌场手机版 27

制图解析

在录制此前点击Controls中的Paint复选框,能够获得绘制事件的越来越多细节音信(注意那会发出很多的特性消耗)。假诺要长远摸底网页渲染方面的音信,可以点击DevTools右上角的菜单,在More
tools
里头选中Rendering settings,那之中包括了如下设置项:

皇家赌场手机版 28

Paint Flashing 高亮展现网页中须要被重绘的局地。

Layer Borders 显示Layer边界。

FPS Meter 每一秒的帧细节,帧速率的遍布音讯和GPU的内存使用状态。

Scrolling Performance Issues
分析鼠标滚动时的属性难点,会来得使屏幕滚动变慢的区域。

Emulate CSS Media
仿真CSS媒体类型,查看差别的设备上CSS样式效果,可能的传媒类型选用有print
、screen

把上边的装有安装项勾选上,网页的体现效果如下:

皇家赌场手机版 29

运转时品质分析

上面差不离介绍了Timeline面板上的次第职能菜单,那么哪些去选用该面板去分析和优化网页程序的运转品质呢,由于篇幅限制,就不在这边展开研商,感兴趣的读者直接到谷歌开发者文档上查看,谷歌开发者文档有最权威最新的音讯。

点击后会突显一个允许你改变设置的控制板。

询问指定事件

你可以经过在DevTools上按Cmd+F(Mac)
调出查询框,来查阅指定时间区域范围内的指定项目标风波,点击Cmd+G(Mac)
或者Cmd+Shift+G(Mac)
可以按事件暴发的次第来查询。

皇家赌场手机版 30

图中询问到了4个革命标记着的Parse HTML
事件,点击Cmd+G
节骨眼会在那4个事件移动。

参考文档

  • Analyze Runtime
    Performance
  • Diagnose Forced Synchronous
    Layouts

皇家赌场手机版 31

运作时品质分析

地点几乎介绍了Timeline面板上的依次职能菜单,那么怎么着去选取该面板去分析和优化网页程序的周转品质呢,由于篇幅限制,就不在那边展开啄磨,感兴趣的读者直接到谷歌开发者文档上查看,谷歌开发者文档有最上流最新的新闻。
参照文档
皇家赌场手机版,Analyze Runtime Performance

Diagnose Forced Synchronous Layouts

个人博客

自身的村办博客

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

皇家赌场手机版 32

该表展现以微秒为单位的当下页面绘制所需时日,而右手展现了脚下图表的细小与最大值。别的,也体现了近日80帧的树状图。那些图片的强劲之处是它不断试图重新绘制页面,使得页面好像是率先次加载。那允许你精确定位因CSS影响的绘图难题,而不用每一次重复加载页面。无论你的改观是还是不是暴发影响,树状图都会持续监测。

如果大家详细查看那个页面的HTML和CSS,你会面到其中一个div添加了有些CSS效果。

皇家赌场手机版 33

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

皇家赌场手机版 34

哇!正如您从图纸可观察,页面绘制时间有一个令人关怀的生成。通过不难地将border-radius属性移除,就足以作证那几个改变能让页面的绘图时间显明滑坡。当您更新或改动CSS性能时,这么些图片就及时下降。在同一个要素上同时利用box-shadowborder-radius,会促成相当重的绘图负担,那是因为浏览器不可能为之做出优化。即使有一个要素须求反复的重复绘制,你应该在建立网页时时刻记住那点。

那是一个很好的,在Google IO
网站上的摄像,它更透彻地解说绘制时间,并介绍部分减弱网页“jank(卡顿)”的技术。

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

祝测试欢快!

Leave a Comment.