美高梅游戏官网娱乐_美高梅手机登录网站

美高梅游戏官网娱乐是公司推出的企业级即时在线娱乐平台,美高梅手机登录网站业界专业、信誉最好的博彩网站,美高梅游戏官网娱乐拥有最高优惠活动和返水,拥有丰富的管理经验和专业的技术队.。

来自 web前端 2019-10-22 15:12 的文章
当前位置: 美高梅游戏官网娱乐 > web前端 > 正文

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

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

2015/04/15 · 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。蒸蒸日上旦设置到位,就足以展开你想测量检验的网页。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。接待参加翻译小组。

打赏补助小编翻译更加多好小说,多谢!

任选意气风发种支付办法

美高梅手机登录网站 8 美高梅手机登录网站 9

赞 2 收藏 评论

新近,小编出席了在London举行的推文(Tweet)移动开荒者大会。在这里天时期,有过多的攀谈,但的确让自家关心的是一场关于品质的,名叫“让m.facebook.com更快”的调换会,它的大旨是关于推文(Tweet)怎么样不断大力改正网页质量和从当中吸取的经验。

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

美高梅手机登录网站 10

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

美高梅手机登录网站 11

Facebook开拓协会是运用Chrome Cannry来测量检验网页CSS性能的。Google Chrome Canary富有Chrome的新星个性,并同意试用一些将要成为Chrome标准版本的,可行的新式本性。思虑到Chrome Canary作为二个为开拓者和尝鲜者特地安排的“预览版”,所以不常会因Chrome开拓团队的敏捷迭代而致使一些B UG。即便如此,它依然有少年老成对很棒的开辟者工具扶持你测验网页性能

美高梅手机登录网站 12

在此篇小说里,笔者显示怎么样运用Chrome Canary的开采者工具去牢固你的CSS中的活龙活现实形势部,那有些CSS大概会招致页面滚动缓慢和耳濡目染页面包车型客车绘图时间。当浏览器加载和制图页面时,为了“绘制”并让内容呈现在显示器上,须要遍历全体可以看到成分。由于那信任于布局和错综相连的CSS,你恐怕会发觉绘制时间会相当长。那会变成网页看起来忽动忽停和响应异常的慢。这种缓慢滚动也叫做jank(jank是Android系统的二个专门的学问术语,指的是荧屏上轻重缓急动态画面中断的卡顿现象)。在活动设备上滚动页面时,浏览器会极力地绘制复杂的CSS,那时这种气象尤为精通。

不畏页面包车型大巴加载时间十一分快,也照旧值得去研商页面包车型地铁绘图时间。不一样器具对CSS属性有着分化等的影响,但不管怎么样,能提升质量总是大器晚成件很好的事。为了扩充测量检验,首先得去Google Chrome网址下载Chrome Canary。方兴未艾旦设置到位,就能够展开你想测量试验的网页。HTML5 Rocks网址里有贰个很好的案例网址,大家应用它来证实高功耗CSS属性的操作,会扩展页面包车型的士绘图时间。

美高梅手机登录网站 13

要是您张开到这些网页,按下F12,会弹出Chrome的开荒者工具。然后在开拓者工具的底层左边点击设置按键,开启测量检验页面渲染品质的装置。

美高梅手机登录网站 14

点击后会呈现贰个允许你转移设置的调整板。

美高梅手机登录网站 15

因为大家要测量试验页面包车型客车渲染质量,所以选拔“Enable continuous page repainting(页面持续重新绘制)“和 “Show FPS meter(显示FPS仪表)”**。倘使您关闭设置面板,查看你的网页,你应当会见到下边包车型大巴图纸在页面右上角。

美高梅手机登录网站 16

该表呈现以阿秒为单位的近期页面绘制所需时间,而左手显示了眼下图表的纤维与最大值。别的,也呈现了多年来80帧的树状图。那一个图片的强盛之处是它不仅仅试图再一次绘制页面,使得页面好疑似率先次加载。那允许你准鲜明位因CSS影响的绘图难题,而不用每一遍重复加载页面。无论你的转移是不是爆发耳濡目染,树状图都会再三监测。

若果大家详细查看这一个页面包车型大巴HTML和CSS,你会见到里面贰个div增加了有的CSS效果。

美高梅手机登录网站 17

那几个div有border-radius(圆角)和投影属性。当移除box-shadow属性,再旁观FPS meter在绘制时间的更换。

美高梅手机登录网站 18

哇!正如你从图片可观望,页面绘制时间有叁个令人关怀的转移。通过轻松地将border-radius属性移除,就能够作证这几个改动能让页面包车型客车绘图时间明显减弱。当你更新或改换Web性能优化系列(2):剖析页面绘制时间。CSS品质时,那些图形就随时下落。在同一个因素上还要选取box-shadowborder-radius,会产生相当的重的绘图肩负,那是因为浏览器不可能为之做出优化。假诺有一个因素供给再三的重新绘制,你应当在创制网页时时刻记住这一点。

那是三个很好的,在Google IO 网站上的录制,它更深透地论述绘制时间,并介绍部分减去网页“jank(卡顿)”的技能。

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

祝测验欢欣!

本文由美高梅游戏官网娱乐发布于web前端,转载请注明出处:Web性能优化系列(2):剖析页面绘制时间

关键词: