yzc366亚洲城:Web性能优化系列,Web页面的性能优化

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

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

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

近年来,我出席了在London进行的Facebook移动开发者大会。在这天时期,有成百上千的攀谈,但确确实实让自身关爱的是一场关于品质的,名为“让m.facebook.com更快yzc366亚洲城:Web性能优化系列,Web页面的性能优化。”的沟通会,它的大旨是关于Facebook怎么样不断大力改善网页品质和从中汲取的经验。

Facebook支出集团是应用Chrome
Cannry
来测试网页CSS性能的。Google Chrome
Canary
不无Chrome的风靡特性,并同意试用一些即将成为Chrome标准版本的,可行的最新特性。考虑到Chrome
Canary作为一个为开发者和尝鲜者专门设计的“预览版”,所以有时候会因Chrome开发协会的敏捷迭代而导致部分B
UG。固然如此,它如故有一对很棒的开发者工具帮忙您测试网页性能

yzc366亚洲城 1

在那篇文章里,我出示怎样选用Chrome
Canary的开发者工具去稳定你的CSS中的一有些,那有些CSS可能会促成页面滚动缓慢和潜移默化页面的绘图时间。当浏览器加载和制图页面时,为了“绘制”并让内容突显在显示器上,必要遍历所有可见元素。由于那重视于布局和复杂的CSS,你可能会意识绘制时间会很长。那会造成网页看起来忽动忽停和响应较慢。那种缓慢滚动也称为jank(jank是Android系统的一个专业术语,指的是屏幕上朗朗上口动态画面中断的卡顿现象)。在运动装备上滚动页面时,浏览器会竭力地绘制复杂的CSS,那时那种景色尤为显眼。

纵使页面的加载时间极度快,也照例值得去研究页面的绘图时间。不一致装备对CSS属性有着差别等的反馈,但好歹,能增强品质总是一件很好的事。为了拓展测试,首先得去Google
Chrome
网站下载Chrome
Canary。一旦设置到位,就足以打开你想测试的网页。HTML5
Rocks
网站里有一个很好的案例网站,大家运用它来阐明高功耗CSS属性的操作,会增加页面的绘图时间。

yzc366亚洲城 2

如若你打开到这些网页,按下F12,会弹出Chrome的开发者工具。然后在开发者工具的底部右边点击设置按钮,开启测试页面渲染品质的装置。

yzc366亚洲城 3

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

yzc366亚洲城 4

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

yzc366亚洲城 5

该表显示以微秒为单位的当前页面绘制所需时日,而右侧呈现了当下图表的微小与最大值。别的,也体现了多年来80帧的树状图。那么些图片的雄强之处是它不断试图再一次绘制页面,使得页面好像是率先次加载。那允许你精确定位因CSS影响的绘图难题,而不用每回重复加载页面。无论你的改动是或不是暴发潜移默化,树状图都会随处监测。

万一我们详细查看这么些页面的HTML和CSS,你会看到里面一个div添加了一部分CSS效果。

yzc366亚洲城 6

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

yzc366亚洲城 7

哇!正如您从图纸可见到,页面绘制时间有一个令人关怀的转变。通过不难地将border-radius属性移除,就可以作证那一个改变能让页面的绘图时间肯定滑坡。当你更新或改变CSS特性时,那几个图片就立马下落。在同一个要素上同时利用box-shadowborder-radius,会导致格外重的绘图负担,那是因为浏览器无法为之做出优化。即使有一个要素须求频仍的重新绘制,你应有在确立网页时时刻记住那点。

那是一个很好的,在Google IO
网站上的视频,它更尖锐地阐释绘制时间,并介绍部分削减网页“jank(卡顿)”的技艺。

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

祝测试高兴!

打赏支持自己翻译越多好作品,谢谢!

打赏译者

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

Web页面的特性

本文由 伯乐在线 – 鸭梨山大 翻译,sunbiaobiao 校稿。未经许可,禁止转载!
英文出处:gokulkrishh.github.io。欢迎参加翻译小组。

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

任选一种支付形式

yzc366亚洲城 8
yzc366亚洲城 9

赞 2 收藏
评论

近日,我参预了在London进行的非死不可移动开发者大会。在那天时期,有诸多的交谈,但的确让自家关心备至的是一场有关品质的,名为“让m.facebook.com更快”的沟通会,它的要旨是有关非死不可怎么着不断大力创新网页品质和从中得出的经历。

大家天天都会浏览很多的Web页面,使用过多基于Web的运用。那么些站点看起来既不平等,用途也都各有不一样,有在线摄像,Social
Media,新闻,邮件客户端,在线存储,甚至图形编辑,地理音信种类等等。即使有着各样各种的例外,可是同样的是,他们悄悄的行事原理都是一样的:

如若你的网站在1000ms内加载成功,那么会有平均一个用户停留下来。二〇一四年,平均网页的深浅是1.9MB。看下图驾驭越多统计音信。

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

yzc366亚洲城 10

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

yzc366亚洲城 11

Facebook支出公司是应用Chrome
Cannry
来测试网页CSS性能的。Google Chrome
Canary
持有Chrome的新颖特性,并同意试用一些即将成为Chrome标准版本的,可行的摩登特性。考虑到Chrome
Canary作为一个为开发者和尝鲜者专门设计的“预览版”,所以有时会因Chrome开发协会的敏捷迭代而造成一些B
UG。即使如此,它如故有局地很棒的开发者工具扶助您测试网页性能

用户输入网址

yzc366亚洲城 12

yzc366亚洲城 13

浏览器加载HTML/CSS/JS,图片资源等

网站的大旨内容须要在1000ms内显示出来。借使战败了,用户将永生永世不会再拜访你的网站。通过下落页面加载的年月,很多盛名公司的入账和下载量有满世界瞩目的提拔。比如

在那篇小说里,我出示什么利用Chrome
Canary的开发者工具去稳定你的CSS中的一有的,那有些CSS可能会促成页面滚动缓慢和潜移默化页面的绘图时间。当浏览器加载和制图页面时,为了“绘制”并让内容显示在屏幕上,必要遍历所有可知元素。由于那看重于布局和复杂的CSS,你可能会意识绘制时间会很长。那会造成网页看起来忽动忽停和响应较慢。那种缓慢滚动也称为jank(jank是Android系统的一个专业术语,指的是显示屏上朗朗上口动态画面中断的卡顿现象)。在运动装备上滚动页面时,浏览器会全力以赴地绘制复杂的CSS,那时那种景色尤为显然。

浏览器将结果绘制成图形

  • Walmart 每下跌100ms的加载时间,
    他们的低收入就提升1%.
  • Yahoo 每下落400ms的加载时间,他们的访问量就提高9%。
  • Mozilla 将他们的页面速度进步了2.2秒,每年多得到了1.6亿firefox的下载量。

纵使页面的加载时间分外快,也照例值得去研商页面的绘图时间。差异装备对CSS属性有着不等同的反响,但不管怎么着,能增高质量总是一件很好的事。为了举办测试,首先得去Google
Chrome
网站下载Chrome
Canary。一旦设置到位,就足以打开你想测试的网页。HTML5
Rocks
网站里有一个很好的案例网站,大家应用它来注脚高功耗CSS属性的操作,会增添页面的绘图时间。

用户通过鼠标,键盘等与页面交互

网站优化的步调

  1. 设定品质预算。
  2. 测试当前的习性。
  3. 找出导致质量难点的位置。
  4. 最终,duang,使用优化特技。

上面有二种格局可以升高你的页面品质,让大家来看望

yzc366亚洲城 14

yzc366亚洲城 15

进度目标

速度目的是指页面的可视部分被呈现在浏览器中的平均速度。表示为飞秒的方式,并且取决于viewport的尺寸。请看下图(用视频帧的款式表现页面加载时间,以秒为单位)。

进度目的越低越好。

yzc366亚洲城 16

进度目标可以由此Webpagetest 来测试(由Google维护)

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

那一个序列繁多的页面,在用户体验方面也有很大差异:有的响应很快,用户很简单就足以成功自己想要做的事体;有的则日渐吞吞,让匆忙的用户在挫折之后甩手离去。毫无疑问,品质是影响用户体验的一个老大主要的要素,而影响属性的元素丰硕足够多,从用户输入网址,到用户最后见到结果,须要有广大的参预方共同努力。这几个涉企方中任何一个环节的品质都会潜移默化到用户体验。

长话短说

Webpage test 有不少特征,比如在区其余地方用区其余浏览器跑三个测试。
还能统计其余的数量比如加载时间,dom元素的数目,首字节光阴等等…

例如:查看amazon在webpagetest上的测试结果 。

可以看看这几个视频,了解由 Patrick
Meenan 
授课的有关webpagetest的越来越多音信(须求FQ)。

yzc366亚洲城 17

宽带网速

渲染阻塞

一旦你明白浏览器怎样运转,那么您应当知道HTML, CSS,
JS是怎么被浏览器解析的以及其中哪个阻塞了页面的渲染。即使您不清楚,请看下图。

yzc366亚洲城 18

点击how a browser
works打听越来越多浏览器工作原理(作者为Tali
Garsiel 和Paul
Irish).

点击后会显示一个同意你改变设置的控制板。

DNS服务器的响应速度

浏览器渲染的手续

  1. 率先浏览器解析HTML标记去社团DOM树(DOM = Document Object Model
    文档对象模型)
  2. 下一场解析CSS去社团CSSOM树( CSSOM = CSS Object Model CSS对象模型)
  3. 在将DOM和CSSOM树结合成渲染树以前,JS文件被解析和施行。

当今你精晓浏览器怎么着开展辨析了,让咱们看看是哪部分梗阻了渲染树的浮动。

yzc366亚洲城 19

服务器的拍卖能力

1. 封堵渲染的CSS

有人觉得CSS阻塞了渲染。在构造CSSOM时,所有的CSS都会被下载,无论它们是否在现阶段页面中被应用。

为了化解这几个渲染阻塞,跟着下边的四个步骤做

  1. 将重点CSS内放置页面中,即将最重视的(首次加载时可知的部分页面所使用到的)style写入head中的 <style></style>里。
  2. 移除没用到的CSS。

那就是说我是怎么样找出没用到的CSS的吧。

  1. 使用Pagespeed
    Insight 去取得像未利用的CSS,阻塞渲染的CSS和JS文件等等的总括数据。例如:Flipkart的Pagespeed
    Insight总计结果。
  2. 使用Gulp任务,如gulp-uncss可能使用Grunt
    职务,如grunt-uncss。如若您不知晓他们是怎样,请阅读我从前的文章。

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

数据库质量

##专业小贴士

  1. 使用CSS
    Stats确保页面中全然没有未被用到的元素,唯一的体制和字体等等。
  2. Pagespeed Insight Chrome
    插件.
  3. Tag Counter Chrome
    插件.

yzc366亚洲城 20

路由转载

2. 渲染阻塞的JavaScript

若果在解析HTML标记时,浏览器碰着了JavaScript,解析会为止。唯有在该脚本实施达成后,HTML渲染才会持续拓展。所以那阻塞了页面的渲染。

为了缓解它

在<script></script>标签中应用 async或defer特性。

  1. <script
    async>将会在HTML解析时下载该文件并在下载已毕后及时执行。
  2. <script defer>
    将会在HTML解析式下载该文件并在HTML解析已毕后举办。

例如: async and defer都在Google Analytics中使用

点击查阅async 和defer的浏览器支持。

该表展现以飞秒为单位的当下页面绘制所需时间,而右手突显了脚下图表的微乎其微与最大值。别的,也出示了近日80帧的树状图。那一个图形的强硬之处是它不止试图重新绘制页面,使得页面好像是第五次加载。那允许你精确定位因CSS影响的绘图难题,而不用每回重复加载页面。无论你的变更是或不是暴发震慑,树状图都会不断监测。

浏览器处理能力

内存泄漏

内存泄漏和页面臃肿 是前者开发者所要面对的题材之一。让大家来看看哪些察觉并解决内存泄漏。

在JavaScript中追寻内存泄漏

应用Chrome Task
Manager(职务管理器)去检测app所选择的内存以及js内存(总体内存+实时内存)。假使你的内存平素随着你的历次操作而压实,那么你能够可疑有内存泄漏了。

下面是Chrome Task Manager的截图。

yzc366亚洲城 21

假定大家详细查看那么些页面的HTML和CSS,你会看到里面一个div添加了一些CSS效果。

早在二零零六年,雅虎就公告了升级站点品质的指南,谷歌也揭破了接近的指南。而且有众多工具得以和浏览器联合工作,对你的Web页面的加载速度举办评估:分析页面中资源的数码,传输是不是使用了裁减,JS、CSS是还是不是开展了凝练,有没有创设的行使缓存等等。

Chrome DevTools分析

利用 Heap Profiler 去查看内存泄漏。打开Chrome devTools 然后点击profiles
标签,接着选中 take heap snapshot。假诺您不断解Chrome
DevTools,请阅读事先的小说.

yzc366亚洲城 22

Heap Profiler有八个快照视图(snapshot view)

  1. Summary 视图 –
    突显对象的完全数据以及它们的实例总数,浅部(Shallow)大小(对象自我的内存大小)以及保留(Retained)大小(自动GC发生后所放出的内存大小+不可能实施到的靶子的内存大小)。
  2. Comparison 视图-
    用于比较一个操作的前后的多少个或多个快照,可以检测内存泄漏。
  3. Containment 视图- 显示了您的app对象架构的完好视图 + DOMWindow
    对象(全局对象下的), GC 根部, 本地对象 (来自浏览器)。
  4. Dominators 视图-
    展示了 dominators 树的堆图。

点击了然越来越多 Heap
profiler。

yzc366亚洲城 23

一旦你必要将以此进程与CI集成在联名,来对使用的性质进行督查,我二零一八年写过一篇相关的博客。

DOM泄漏

对DOM元素的引用会招致DOM泄漏并且阻碍自动垃圾回收(GC)的开展。

来看一个例证

1
2
3
4
5
<div>
    <div id="container">
        <h1 id="heading">I am just a heading nothing much</h1>
    </div>
</div>
1
2
3
4
5
6
7
8
var parentEle = document.getElementById('container'); //get parent ele reference 得到父元素的引用
 
var headingEle = document.getElementById('heading'); //get child ele reference 得到子元素的引用
 
parentEle.remove(); //removes parent element from DOM 从DOM中移除父元素
 
//but its child ref still exist, So parentEle won't collect GC'd and causes DOM Leak
//但是它的子元素引用仍然存在,所以parentEle不会被GC回收,因此导致了DOM泄漏。

将它的引用设置为null即可修复DOM泄漏。

1
headingEle = null; //Now parentEle will be GC'd

上面就是前者开发者常碰到的难点。昨天就讲到那。若是你喜爱我的篇章,请分享或者在上边评论。谢谢!!

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

正文打算从另一个角度来品尝加速页面的渲染:浏览器是何许做事的,要将一个页面渲染成用户可以观察的图纸,浏览器都亟待做什么样,哪些进程相比耗时,以及哪些幸免那些经过(或者至少以更急迅的不二法门)。

yzc366亚洲城 24

页面是何等被渲染的

哇!正如您从图片可见到,页面绘制时间有一个让人关心的浮动。通过简单地将border-radius属性移除,就可以注解那些改变能让页面的绘图时间明确减弱。当您更新或转移CSS属性时,那一个图形就立即下降。在同一个元素上同时使用box-shadowborder-radius,会导致非凡重的绘图负担,那是因为浏览器不可以为之做出优化。假设有一个因素须要频仍的双重绘制,你应当在确立网页时时刻记住那一点。

说到品质优化,规则一就是:

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

If you can’t measure it, you can’t improve it. – Peter Drucker

想更进一步读书绘制时间的优化,看看这几个链接。

基于浏览器的行事规律,大家得以分别对各类阶段进行度量。

祝测试喜悦!

yzc366亚洲城 25

图片源于:http://dietjs.com/tutorials/host\#backend

像素渲染流水线

下载HTML文档

解析HTML文档,生成DOM

下载文档中引用的CSS、JS

解析CSS样式表,生成CSSOM

发表评论

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

网站地图xml地图