浅析页面绘制时间,Chrome开采者工具详解

by admin on 2019年10月22日

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

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

本文由 伯乐在线 –
刘健超-J.c
翻译,sunbiaobiao
校稿。未经许可,幸免转发!
德文出处:www.deanhume.com。应接出席翻译组必发88,浅析页面绘制时间,Chrome开采者工具详解。。

目前,作者在场了在London进行的推文(Tweet)移动开垦者大会。在此天时期,有多数的攀谈,但的确让小编关心的是一场关于品质的,名称叫“让m.facebook.com更快”的调换会,它的大旨是关于Facebook(TWTRAV4.US)怎么着不断努力创新网页质量和从当中摄取的阅历。

Facebook开拓公司是行使Chrome
Cannry
来测量试验网页CSS性能的。Google Chrome
Canary
享有Chrome的风行本性,并同意试用一些就要成为Chrome标准版本的,可行的新星性情。考虑到Chrome
Canary作为贰个为开拓者和尝鲜者特地设计的“预览版”,所以一时会因Chrome开拓协会的便捷迭代而致使一些B
UG。尽管如此,它照旧有局地很棒的开垦者工具匡助你测量试验网页性能

必发88 1

在这里篇小说里,作者显得怎样接纳Chrome
Canary的开采者工具去牢固你的CSS中的日新月异部分,那有些CSS大概会招致页面滚动缓慢和熏陶页面的绘图时间。当浏览器加载和制图页面时,为了“绘制”并让内容浮现在荧屏上,须求遍历全体可以预知成分。由于那信赖于布局和复杂的CSS,你或许会意识绘制时间会相当长。那会促成网页看起来忽动忽停和响应非常的慢。这种缓慢滚动也叫做jank(jank是Android系统的贰个专门的学业术语,指的是显示器上朗朗上口动态画面中断的卡顿现象)。在移动道具上滚动页面时,浏览器会全心全意地绘制复杂的CSS,那时这种境况愈加同理可得。

不怕页面的加载时间相当慢,也照旧值得去研商页面包车型地铁绘图时间。不一样装备对CSS属性有着差别的反响,但好歹,能增高性能总是生机勃勃件很好的事。为了进行测量试验,首先得去Google
Chrome
网址下载Chrome
Canary。风姿浪漫旦设置实现,就足以张开你想测量试验的网页。HTML5
Rocks
网址里有二个很好的案例网址,大家应用它来申明高耗电CSS属性的操作,会增添页面包车型大巴绘图时间。

必发88 2

要是你张开到那些网页,按下F12,会弹出Chrome的开垦者工具。然后在开辟者工具的尾部左边点击设置开关,开启测量检验页面渲染品质的设置。

必发88 3

浅析页面绘制时间,Chrome开采者工具详解。点击后会展现多个同意你更动设置的调节板。

必发88 4

因为我们要测量试验页面包车型大巴渲染品质,所以选用“Enable continuous page
repainting
(页面持续重新绘制)“和 “Show FPS
meter(显示FPS仪表)”**。若是您关闭设置面板,查看你的网页,你应该拜见到上面包车型地铁图片在页面右上角。

必发88 5

该表彰显以纳秒为单位的日前页面绘制所需时间,而侧边展现了当下图表的眇小与最大值。别的,也展现了前段时间80帧的树状图。这一个图形的雄强之处是它不独有试图重新绘制页面,使得页面好疑似首先次加载。那允许你准明确位因CSS影响的绘图难题,而不用每一遍重复加载页面。无论你的退换是或不是发生影响,树状图都会没完没了监测。

若果大家详细查看那个页面包车型地铁HTML和CSS,你会看出里边三个div增加了一些CSS效果。

必发88 6

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

必发88 7

哇!正如您从图片可见到,页面绘制时间有三个令人关怀的扭转。通过简单地将border-radius属性移除,就能够证实这几个改造能让页面包车型地铁绘图时间显明滑坡。当您更新或退换CSS天性时,那一个图片就即刻下跌。在同多个要素上同有时直接纳box-shadowborder-radius,会形成比较重的绘图担负,这是因为浏览器不可能为之做出优化。若是有一个元素须要一再的双重绘制,你应有在建构网页时时刻记住那点。

那是二个很好的,在Google IO
网站上的录像,它越来越深切地演说绘制时间,并介绍一些精减网页“jank(卡顿)”的手艺。

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

祝测量检验欢乐!

打赏扶持笔者翻译越来越多好小说,谢谢!

打赏译者

本文由 伯乐在线 – J.c 翻译,sunbiaobiao 校稿。未经许可,禁绝转发!
斯拉维尼亚语出处:www.deanhume.com。应接参预翻译小组。

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

翻译自:

打赏辅助笔者翻译越多好小说,多谢!

任选生机勃勃种支付办法

必发88 8
必发88 9

赞 2 收藏
评论

方今,作者在场了在London举行的照片墙移动开采者大会。在此天时期,有众多的攀谈,但实在让自家关心的是一场关于质量的,名称为“让m.facebook.com更快”的沟通会,它的核心是关于推特(TWTR.US)(脸书)如何不断大力改良网页质量和从当中吸取的阅历。

小编:伯乐在线专栏作者 – CharlieChu
点击 →
通晓怎么步入专栏撰稿人
如需转载,发送「转发」二字查看表达

喂,各位,又到了周天总括时间!得益于大批量的 Grunt 和 居尔p
插件,大家得以轻便完成网址数量的可视化,固然浓郁明白这个工具还比较不方便,但比物连类的将它们列出来,也是很有帮带的。

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

必发88 10

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

必发88 11

Facebook支付组织是选用Chrome
Cannry
来测量试验网页CSS性能的。Google Chrome
Canary
享有Chrome的流行天性,并同意试用一些将在成为Chrome规范版本的,可行的风行特性。思量到Chrome
Canary作为七个为开辟者和尝鲜者专门安插的“预览版”,所以偶尔会因Chrome开荒团队的立即迭代而形成一些B
UG。固然如此,它如故有部分很棒的开采者工具帮助你测量试验网页性能

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

CDN
能够帮您把网址的财富分发到世界各州,有扶持加强网站的响应速度,当然,那对于那些特殊地区的客商是收效甚微的。

必发88 12

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

CloudFlare

CloudFlare 的强盛之处在于它能够产生您的 DNS 服务器(CDN
只是它具有服务的一个组成都部队分),那样对您的网址发起的有着央浼都会透过它。

CloudFlare 的 CDN
在过去十三年的规划和升华西,并从未始终的寒酸和保守。大家的专利技艺中充裕利用了新式的技艺进步,蕴含并不仰制硬件、web
服务器和互联网路由。换言之,大家立异的建设了后辈的 CDN。新的 CDN
配置轻易、价格低廉,其属性也势必比你利用过的别的古板 CDN 都要出彩。

在这里篇文章里,笔者体现如何行使Chrome
Canary的开拓者工具去牢固你的CSS中的一片段,这有个别CSS可能会招致页面滚动缓慢和熏陶页面包车型客车绘图时间。当浏览器加载和制图页面时,为了“绘制”并让内容体未来荧屏上,供给遍历全数可以知道元素。由于那信赖于布局和叶影参差的CSS,你或许会发掘绘制时间会相当长。这会变成网页看起来忽动忽停和响应相当慢。这种缓慢滚动也称为jank(jank是Android系统的一个专门的职业术语,指的是显示屏上轻重缓急动态画面中断的卡顿现象)。在活动装备上滚动页面时,浏览器会努力地绘制复杂的CSS,那时这种景色尤为明白。

Timeline面板

Timeline面板是百分百面板里面最复杂的多少个面板,涉及的事物非常多。能够行使这一个面板来记录和分析网页运营进程中的全体移动表现消息。
你能够充足利用那个面板来剖判你的网页的前后相继质量难题。

必发88 13

概述
下图是从Google官网中介绍Timeline面板的图贴到那边,该面板首要包含4大块窗格(Pane):
Controls 录像按钮和调整录制进度中需求记录哪些消息。

Overview 网页品质的概要消息。

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

Details
当选用叁个钦命的平地风波后,会展现那一个事件的越多音讯;当没有接纳事件时,会显得钦赐的时刻帧音信。

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

必发88 14

其中第2块Overview来得了网页质量相关的概略音讯,能够由此鼠标恐怕区域边界上的威尼斯绿滑块来拖出二个点名区域限制,Flame
Chart
会跟着有个别放大彰显钦点区域内的实际情况音讯。
能够透过键盘上的W
,S
来放大和缩短钦命区域,通过A
,D
来向左或向右移动钦赐区域。

从谷歌把图贴到这里,那几个窗格包括了八个图表:
FPS 每秒帧数(Frames Per
Second)。煤黑柱状条越高,则每秒帧数越高。在FPS图表上方的新民主主义革命块是符号一个长帧。

CPU 标识CPU能源的选用意况,这里的面积图标志着开销CPU财富的每一种事件。

NET
各类颜色的柱状条分别展现大器晚成种财富。柱状条越长,代表获取那么些能源的年月越长。

必发88 15

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

NET图形柱状条二种颜色的意思:较亮的一些代表等候时间(当能源被呼吁时,直到第四个字节被下载的时间);较暗的新惹祸物正在如火如荼对代表传输时间(在第一个和最后叁个字节被下载之间的大运)。

MaxCDN

CSS-Tricks 当前就在接纳 马克斯CDN 托管全体的静态能源。它能够无缝地融入WordPres 和 W3
的有着缓存能源,所以大家没有须要做哪些极度管理,就可以将能源移入
CDN,并能保障链接的准头。

必发88 16对此二个博客来讲,思考到内部的大文件根本是
JavaScript、CSS 和图表,并非录制等连串,那带宽占用的可真多。

我们的 CDN
服务同样是贰个网站加快器和实时间调整制中央。创造它,正是为着让网站的顾客和运转都能从下一代
CDN 中获得最大受益。

不怕页面包车型客车加载时间不慢,也照样值得去商量页面包车型客车绘图时间。不一样器具对CSS属性有着分裂样的反响,但不管怎么着,能增高质量总是龙腾虎跃件很好的事。为了实行测验,首先得去Google
Chrome
网址下载Chrome
Canary。龙马精神旦设置落成,就足以张开你想测量试验的网页。HTML5
Rocks
网址里有一个很好的案例网址,大家应用它来注解高耗能CSS属性的操作,会增添页面包车型大巴绘图时间。

网页摄像实际情况

支撑三种网页摄像操作:①录像网页加载,②录制网页交互。为了有助于深入分析,录像的时光不当太长、还要制止不要求的互动操作、并禁止使用浏览器的缓存和插件。
当录制完结后,在Flame
Chart
(火焰图)中式点心击左侧三角可以拓展详细情形,点击当中的风浪或许空白处,能够在Details其间查看该事件照旧总的概要消息。那在那之中含有的消息量极大,限于篇幅原因,下一次有空子再作深切介绍,或许直接到Google上查看Timeline
伊夫nt Reference这一个参考文书档案。

CloudFront

亚马逊(亚马逊)网络服务版本的 CDN。

亚马逊(亚马逊(Amazon)) CloudFront
是贰个剧情分发网络服务。它能够无缝融入入其余的亚马逊(亚马逊(Amazon))网络服务产品,为开垦者和商家分发内容到最后顾客手中提供了生意盎然种简易的格局,整个经过都具有低顺延、高调换速度的风味,也不曾最小使用量的劫持供给。

必发88 17

摄像中张开JS深入分析

在视频在此以前点击Controls中的JS
Profile
复选框,能够在时光轴中抓获JavaScript的酒馆消息(会发生一定的性情消耗),并且在Flame
Chart
(火焰图)中会显示全体被调用的JavaScript函数音信。

必发88 18

CDNperf

上述的 CDNs
并不能够托管你轻便的财富,它们往往只是托管最频仍用到的公文。即使对于线上产品以来将财富和服务器托管到个人的
CDN 上并非最佳的点子,但这种方法对于分发能源来说依然是便捷和简易的。

CDNperf 能够帮你寻觅最快和最可靠的 JavaScript
CDNS,让您的网址越来越快更有朝气。

必发88 19cdnperf

上面包车型地铁这么些品质测量试验工具,使用了量化的主意测量检验了网址中诸如首字节加载时间(time
to first
byte)也许渲染时间等表现。有个别工具还有大概会检查特检资源是还是不是被缓存,多个CSS 或 JS 文件是不是值得合併。

假若你张开到这一个网页,按下F12,会弹出Chrome的开采者工具。然后在开垦者工具的底部侧边点击设置按键,开启测量检验页面渲染质量的装置。

摄像中抓获截屏

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

必发88 20

WebPagetest

WebPagetest
是性质测量检验的纯金标准,它提供了多地方的量化指标用于品质测验,比方有一个为主的评分,用于商酌当前页面优化的水准;有三个截图,突显页面加载后的视觉效果;还恐怕有一个浏览器加载能源的瀑布流…

依照客商浏览器真实的总是速度,在整个世界范围内开展网页速度测量检验,并提供详细的优化提议。

必发88 21webpagetest

经过利用 API wrapper,也能够将 WebPagetest 的连带服务丰裕到 NPM
模块和命令行工具中。

  • webpagetest-mapper:将 WebPageTest 的测验数据转变为可读的文书档案格式。
  • WPT Bulk Tester:使用 Google Docs 测量试验多少个 U哈弗Ls(假如您具有 APIkey,也能够接纳 webpagetest.org
    来做那事,只怕别的公开可访谈的实例)。

必发88 22

绘图分析

在录像早前点击Controls中的Paint复选框,能够获取绘制事件的越来越多细节音讯(注意那会生出过多的属性消耗)。假若要深深领悟网页渲染方面包车型客车消息,能够点击DevTools右上角的美食做法,在More
tools
中间接选举中Rendering settings,这里面包涵了之类设置项:

必发88 23

Paint Flashing 高亮展现网页中要求被重绘的部分。

Layer Borders 显示Layer边界。

FPS Meter 每风流倜傥秒的帧细节,帧速率的布满消息和GPU的内部存款和储蓄器使用情形。

Scrolling Performance Issues
深入分析鼠标滚动时的性指责题,博览会示使显示器滚动变慢的区域。

Emulate CSS Media
仿真CSS媒体类型,查看分裂的设施上CSS样式效果,只怕的媒体类型选用有print
、screen

把地点的具备安装项勾选上,网页的呈现效果如下:

必发88 24

Yslow

Yslow 基于 Yahoo
的高质量网页教条,剖析网页的性情并交给响应缓慢的来由。

点击后会呈现二个同意你转移设置的调控板。

询问钦定事件

您可以因此在DevTools上按Cmd+F(Mac)
调出查询框,来查看指按时间区域限制内的钦命项目标事件,点击Cmd+G(Mac)
或者Cmd+Shift+G(Mac)
能够按事件发生的逐个来查询。

必发88 25

图中查询到了4个黑古铜色标记着的Parse HTML
事件,点击Cmd+G
节骨眼会在这里4个事件移动。

Google PageSpeed

PageSpeed 依照网页最好实行分析和优化测验的网页。

必发88 26google
pagespeed

PageSpeed 也可以有二个 CLI(Command Line Interface)工具:PSI(PageSpeed
Insights with reporting)

在营造进度中,能够运用 PSI
测量试验移动端和桌面端的性质,最后获得可读性卓越的测量检验结果。

必发88 27google
pagespeed

必发88 28

运营时品质深入分析

地方差不离介绍了Timeline面板上的种种职能菜单,那么哪些去行使该面板去分析和优化网页程序的运营品质呢,由于篇幅限制,就不在此边张开探究,感兴趣的读者直接到谷歌开荒者文书档案上查看,谷歌(Google)开荒者文书档案有最华贵最新的音讯。
仿效文书档案
Analyze Runtime Performance

Diagnose Forced Synchronous Layouts

本身的网站都付出到哪个地方去了?

评估网站在世界外市为每一个移动端客户支付的保险资金。

必发88 29what
does my site cost?

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

Pingdom 网址速度测验

输入 U智跑L 地址,就可以测量试验页面加载速度,分析并寻觅质量瓶颈。

必发88 30pingdom

必发88 31

SpeedCurve

SpeedCurve
既可以够令你追踪竞争对手的习性展现,也能够追踪自身的天性表现。使用
SpeedCurve
时,你能够查阅某些因素在不一致站点的进程突显。对于移动客商来讲,他们希望网站在哥哥大上加载起来要快于Computer,假若以为到加载迟缓,往往会飞快关上网页,所以,网址的响应速度对她们比较重点。

必发88 32speedcurve

该表展现以纳秒为单位的此时此刻页面绘制所需时日,而左侧展现了如今图表的细微与最大值。其余,也出示了近年80帧的树状图。那么些图形的有力之处是它不断试图再一次绘制页面,使得页面好疑似首先次加载。那允许你正分明位因CSS影响的绘图难题,而不用每便重复加载页面。无论你的更动是否发生影响,树状图都会不断监测。

Calibre

Calibre 能够帮你跟踪页面包车型客车加载时间,甚至页面大小。难题页面(Janky
page)?是的,Calibre 会间接告知您怎么页面有标题。

必发88 33image

假诺大家详细查看那些页面包车型地铁HTML和CSS,你会看见里面一个div增多了有的CSS效果。

GT Metrix

GT Metrix 结合了 谷歌(Google) PageSpeed 和
YSlow,帮衬开辟者成立飞快、高效和健全优化的网页浏览体验。

必发88 34image

必发88 35

perf.js

在付出进度中,将品质的时序景况展现在页面上。

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

perf bar

后生可畏种简易的议程,用于快速搜集和查阅网页质量,提供预置的量化规范,也支撑自定义的量化规范。

必发88 36

grunt-perfbudget

用于评估品质的 Grunt task。 grunt-perfbudget 使用 WebPagetest
的国有或个人实例在特定的 UMuranoL
举办测量试验。它会将测量检验结果和您预期的性质期望做比较,假使低于预期,那么那些task
就顺遂完结了,假诺赶上了你预期的特性期望,那么就能告诉退步,况且会帮助您深入分析超过预想的案由。

哇!正如您从图片可观望,页面绘制时间有一个令人关怀的生成。通过轻松地将border-radius属性移除,就能够印证那一个改换能让页面包车型地铁绘图时间肯定滑坡。当你更新或改变CSS质量时,这一个图形就应声下落。在同多少个要素上还要利用box-shadowborder-radius,会招致相当的重的绘图负责,那是因为浏览器不可能为之做出优化。假设有二个要素要求频频的再次绘制,你应有在确立网页时时刻记住那一点。

Sitespeed

Sitespeed.io
是贰个基于最棒实行以致一些加载时序等量化规范的开源工具,有利于开垦者深入分析网页的加载速度和渲染品质。它会从开拓者的站点搜聚三个页面包车型地铁数目,遵照最好实行等准则来解析这么些网页,并将结果以
HTML 的款式出口,也许以数值的款式发送到 Graphite。

那是多个很好的,在Google IO
网站上的录像,它越来越深入地阐释绘制时间,并介绍部分精减网页“jank(卡顿)”的才能。

speedgun

该网址允许你选择 Speedgun.js
收罗肆意公开站点的质量数据。它会运营八回,并突显叁个和睦的示图,帮忙开荒者明白当前页面包车型大巴加载进程。

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

gulp size

来得档期的顺序大小。

必发88 37image

祝测验兴奋!

Chrome 开垦者工具

在 Chrome 的开辟者工具中,对于评估品质有四个特别实用的竹签:奥迪(Audi)ts 和
Network。

奥迪t
面板用于分析加载的页面。它可以提供优化提议,减弱页面加载时间,加速页面包车型的士响应速度。

必发88 38image

Network
面板以动态的方法实时地浮现了能源的乞求和下载。尽管剖释和固化这一个供给会比纯粹的加载页面多花一些时间,但那个消耗对于辅导页面包车型的士性质优化是充足重要的。

必发88 39image

火狐开垦者浏览器

该浏览器是为开辟者而创建的,静心于劳动开辟者的专门的工作流。那是根本第4回,将营造、测量试验和扩充等服务集中于黄金年代体。

更多消息请查看 MDN 上的 Network Monitor。

Page performance

那些增加插件应用于 Chrome
浏览器,能够开速深入分析当前页面包车型客车属性。假诺浏览器张开了四个标签,那么该插件会自行分析当前页面包车型客车性质表现。

必发88 40image

PerfAudit

咱俩审查批准页面的加载和渲染品质。对于让人嫌恶的响应缓慢和难点页面,大家有本分的重任提供便捷、牢固和正确的页面。

Perfmonkey

PerfMonkey 让追踪页面包车型地铁渲染质量变得特别简单。

ImageOptim

ImageOptim
是三个免费的利用,它在削减图片容积、进步加载速度的还要,还不会就义图片质量。它优化了减弱参数、移除了不算的头消息和非须求的颜料配置音信。

必发88 41image

它也得以被购并到 Grunt 和 Gulp 中。

SVGO

SVG Optimizer 是三个依据 Nodejs 的 SVG 矢量图形优化学工业具。

比如你须求的是并行界面包车型地铁操作,实际不是 CLI,那么可以下载这些 应用软件。

SVGOMG

SVGOMG 是 SVGO’s Missing GUI 的缩写,意在揭穿 SVG
文件的要紧难点,而不有所 SVGO 的完全可安顿项。

必发88 42image

手动优化 SVGs

好像于别的的图形文件,SVG 也相应在上线前被优化。尽管有众多临近 雷Mond的工具得以帮您做这种优化,但最佳的办法依然深入通晓其细节并做一些手动的优化。

Triamge

Triamge 是三个扩平台的 GUI 和 CLI
工具,用于优化网址的图纸文件。它构成使用 optipng、pngcrush、advpng 和
jpegoptim,并基于文件类型做优化(最新版本中,已经支撑 PNG 和 JPG)。

必发88 43image

CSS Triggers

该网址用于展示怎么样 CSS 属性可以影响浏览器的布局、渲染和任何组成操作。

必发88 44image

越来越多关于 CSS-triggers 的消息,能够点击这里查看。

CSS Stats

该网页应用以可视化的情势呈现了开垦者项目中关于 CSS 的总括音信。

必发88 45image

CSS Shrink

CSS 压缩工具。由于 CSS
是页面渲染的主干文件,所以必需保证轻便,便于飞速响应和渲染。

uncss

UnCSS 是三个用于移除脚本中没用 CSS
的工具。它能够查处多少个公文,也足以查处由 JavaScript 注入的 CSS。

它也可以被合併到 Grunt 和 Gulp 中。

Critical path

领取和烧结 HTML 中驷不比舌的 CSS。

HTMLMinifier

HTMLMinifier 是四个惊人可配备、经过完美的测量试验、基于 JavaScript 的 HTML
压缩工具,何况放置了代码考察类的工具。

gulp-htmlmin

用以压缩 HTML 的 gulp 插件。

grunt-contrib-htmlmin

用来压缩 HTML 的 grunt 插件。

uglifyjs

JavaScript 分析器、混淆、压缩和美化学工业具集。

它也能够被购并到 Grunt 和 Gulp 中。

您恐怕并无需某些 jQuery 插件

jQuery
及其直属工具都以十分杰出的种类,使用它们往往使支付工作轻巧而又快捷。

生气勃勃方面,假如你正在开荒多少个库,那么您供给思虑一下是或不是确实需求信任于
jQuery。只怕你只要求引进几行代码,就足以放任引进二个库完毕某个作用。倘若你的库只是本着于高等浏览器,那么大概一向调用浏览器的放置函数就能够实现相关职能了。

必发88 46image

  • Usertiming API
  • Jank Free
  • Scrolling performance
  • Mobile web performance auditing
  • Gone in 60 frames per second
  • Udacity course on rendering performance

发表评论

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

网站地图xml地图