前面贰特品质优化和测试工具总括,解析页面绘制时间

Web质量优化类别(2):深入分析页面绘制时间

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

本文由 伯乐在线 –
刘健超-J.c
翻译,sunbiaobiao
校稿。未经许可,幸免转发!
克罗地亚语出处:www.deanhume.com。款待出席翻译组。

新近,作者在场了在London进行的推特(Twitter)移动开垦者大会。在此天期间,有好些个的交谈,但的确让自家关爱的是一场有关质量的,名叫“让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 校稿。未经许可,禁绝转发!
立陶宛共和国(Republic of Lithuania)语出处:www.deanhume.com。接待加入翻译小组。

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

翻译自:

打赏协助本身翻译越来越多好文章,多谢!

任选一种支付办法

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

赞 2 收藏
评论

近来,笔者参预了在London举行的推特(Twitter)(TWTGL450.US)移动开垦者大会。在此天时期,有多数的交谈,但的确让自己关注的是一场有关品质的,名称为“让m.facebook.com更快”的交流会,它的核心是有关推特怎么样不断大力立异网页质量和从当中得出的经验。

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

嗨,各位,又到了礼拜日计算时间!得益于大量的 Grunt 和 Gulp
插件,我们得以轻易实现网站数量的可视化,就算深切理解那些工具还相比困苦,但分类一下的将它们列出来,也是很有帮助的。

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

皇家赌场手机版 10

前端,在路上… 前面贰特品质优化和测试工具总括,解析页面绘制时间。
个人主页 ·
笔者的稿子 ·
19 ·
    

皇家赌场手机版 11

Facebook付出社团是应用Chrome
Cannry
来测量试验网页CSS性能的。Google Chrome
Canary
具有Chrome的新星天性,并同意试用一些快要成为Chrome规范版本的,可行的新式特性。牵记到Chrome
Canary作为一个为开采者和尝鲜者特地陈设的“预览版”,所以一时会因Chrome开辟公司的急忙迭代而招致有些B
UG。即使如此,它依然有一点点很棒的开采者工具扶助您测量检验网页性能

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

CDN
可以帮您把网址的财富分发到世界外市,有利于增加网址的响应速度,当然,那对于那一个特殊地区的顾客是收效甚微的。

皇家赌场手机版 12

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

CloudFlare

CloudFlare 的精锐之处在于它可以变成您的 DNS 服务器(CDN
只是它抱有服务的三个组成部分),那样对您的网址发起的享有必要都会通过它。

CloudFlare 的 CDN
在过去十八年的宏图和升华南,并从未始终的寒酸和封建。大家的专利技巧中丰裕利用了新式的才能升高,富含并不抑遏硬件、web
服务器和网络路由。换言之,大家革新的建设了后辈的 CDN。新的 CDN
配置轻便、价格低廉,其性质也决然比你利用过的任何守旧 CDN 都要好好。

在此篇小说里,小编出示什么利用Chrome
Canary的开辟者工具去稳固你的CSS中的一有的,那有些CSS或许会促成页面滚动缓慢和潜移暗化页面的绘图时间。当浏览器加载和制图页面时,为了“绘制”并让内容展现在显示屏上,要求遍历全部可以预知元素。由于那信赖于布局和复杂的CSS,你只怕会开采绘制时间会很短。那会产生网页看起来忽动忽停和响应不快。这种缓慢滚动也叫做jank(jank是Android系统的多少个专门的学问术语,指的是显示器上朗朗上口动态画面中断的卡顿现象)。在移动设备上滚动页面时,浏览器会全力地绘制复杂的CSS,那时这种意况愈加简明。

Timeline面板

提姆eline面板是总体面板里面最复杂的二个面板,涉及的东西相当多。能够使用这么些面板来记录和剖判网页运维进度中的全体移动行为新闻。
你能够足够利用那么些面板来剖析你的网页的次第质量难题。

皇家赌场手机版 13

概述
下图是从谷歌官网中介绍Timeline面板的图贴到那边,该面板首要归纳4大块窗格(Pane):
Controls 录像按钮和操纵摄像进程中须要记录哪些新闻。

Overview 网页品质的概要音信。

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

Details
当选拔一个点名的风云后,会显得这几个事件的越来越多音信;当未有选取事件时,会来得钦定的岁月帧信息。

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

皇家赌场手机版 14

其中第2块Overview呈现了网页品质相关的上校音讯,能够通过鼠标恐怕区域界线上的浅橙滑块来拖出多个钦赐区域限量,Flame
Chart
会随之有个别放大显示钦定区域内的详细的情况音讯。
可以由此键盘上的W
,S
来松开和紧缩钦点区域,通过A
,D
来向左或向右移动内定区域。

从Google把图贴到这里,那一个窗格包罗了八个图表:
FPS 每秒帧数(Frames Per
Second)。紫色柱状条越高,则每秒帧数越高。在FPS图表上方的革命块是标识二个长帧。

CPU 标识CPU财富的施用处境,这里的面积Logo志着花费CPU能源的各样事件。

NET
各样颜色的柱状条分别展现一种能源。柱状条越长,代表获取这些财富的光阴越长。

皇家赌场手机版 15

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

NET图表柱状条二种颜色的意义:较亮的局地代表等候时间(当能源被呼吁时,直到第三个字节被下载的年月);较暗的局地代表传输时间(在率先个和尾声三个字节被下载之间的光阴)。

MaxCDN

CSS-Tricks 当前就在运用 马克斯CDN 托管全数的静态财富。它能够无缝地合两为一WordPres 和 W3
的全体缓存财富,所以大家不须要做什么样非常管理,就可以将财富移入
CDN,并能保险链接的准确性。

皇家赌场手机版 16对于贰个博客来说,思虑到里面包车型地铁大文件重大是
JavaScript、CSS 和图纸,并不是录像等品种,那带宽占用的可真多。

咱俩的 CDN
服务均等是二个网址加速器和实时间调整制大旨。创造它,就是为了让网址的顾客和平运动维都能从下一代
CDN 中赢得最大收入。

即便页面包车型大巴加载时间十三分快,也照旧值得去切磋页面包车型地铁绘图时间。差异道具对CSS属性有着分裂等的影响,但不管怎样,能提升质量总是一件很好的事。为了扩充测验,首先得去Google
Chrome
网址下载Chrome
Canary。一旦设置到位,就足以展开你想测量检验的网页。HTML5
Rocks
网址里有贰个很好的案例网址,我们使用它来申明高功耗CSS属性的操作,会增添页面包车型地铁绘图时间。

网页录制详细的情况

帮忙两种网页录像操作:①录像网页加载,②录制网页交互。为了便利深入分析,摄像的时刻不宜太长、还要防止不供给的相互操作、并禁止使用浏览器的缓存和插件。
当摄像实现后,在Flame
Chart
(火焰图)中式糕点击侧边三角可以拓宽详细情形,点击此中的平地风波依旧空白处,能够在Details当中查看该事件或然总的概要音信。那之中包括的音信量一点都不小,限于篇幅原因,后一次有机遇再作深切介绍,或然直接到Google上查看Timeline
伊芙nt Reference这些参照他事他说加以考察文书档案。

CloudFront

亚马逊互连网服务版本的 CDN。

亚马逊 CloudFront
是一个剧情分发互连网服务。它能够无缝融入入其余的亚马逊(Amazon)网络服务产品,为开辟者和厂家分发内容到最后客商手中提供了一种简易的不二等秘书籍,整个进度都兼备低顺延、高转变速度的特点,也未曾最小使用量的强制必要。

皇家赌场手机版 17

录像中展开JS深入分析

在摄像在此以前点击Controls中的JS
Profile
复选框,能够在时间轴中抓获JavaScript的仓库音信(会产生一定的习性消耗),并且在Flame
Chart
(火焰图)中会显示全体被调用的JavaScript函数音信。

皇家赌场手机版 18

CDNperf

上述的 CDNs
并不能够托管你轻易的财富,它们往往只是托管最频仍用到的文件。即便对于线上产品以来将资源和服务器托管到个人的
CDN 上并不是最棒的方法,但这种格局对于分发财富来讲依然是火速和轻巧的。

CDNperf 能够帮你找寻最快和最可信赖任的 JavaScript
CDNS,让您的网址更加快更有朝气。

皇家赌场手机版 19cdnperf

上面包车型客车这个质量测验工具,使用了量化的办法测量试验了网址中诸如首字节加载时间(time
to first
byte)只怕渲染时间等表现。有个别工具还有可能会检查特检财富是不是被缓存,多个CSS 或 JS 文件是还是不是值得合併。

只要你展开到那几个网页,按下F12,会弹出Chrome的开采者工具。然后在开荒者工具的最底层侧面点击设置开关,开启测量试验页面渲染品质的装置。

摄像中抓获截屏

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

皇家赌场手机版 20

WebPagetest

WebPagetest
是性质测量检验的白金规范,它提供了多地点的量化目的用于品质测验,例如有三个大旨的评分,用于商酌当前页面优化的水准;有一个截图,呈现页面加载后的视觉效果;还可能有四个浏览器加载能源的瀑布流…

基于客户浏览器真实的连天速度,在满世界范围内张开网页速度测验,并提供详细的优化提出。

皇家赌场手机版 21webpagetest

通过使用 API wrapper,也可以将 WebPagetest 的连带服务丰盛到 NPM
模块和命令行工具中。

  • webpagetest-mapper:将 WebPageTest 的测量试验数据调换为可读的文书档案格式。
  • WPT Bulk Tester:使用 Google Docs 测量检验多个 UXC90Ls(假诺您全体 APIkey,也得以利用 webpagetest.org
    来做那事,大概此外公开可访谈的实例)。

皇家赌场手机版 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样式效果,或然的媒体类型采用有print
、screen

把地点的装有安装项勾选上,网页的来得效果如下:

皇家赌场手机版 24

Yslow

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

点击后会展现三个允许你改变设置的调控板。

查询钦定事件

你能够透过在DevTools上按Cmd+F(Mac)
调出查询框,来查阅指定期期区域范围内的内定项目标事件,点击Cmd+G(Mac)
或者Cmd+Shift+G(Mac)
能够按事件爆发的相继来询问。

皇家赌场手机版 25

图中询问到了4个石黄标记着的Parse HTML
事件,点击Cmd+G
主旨会在此4个事件移动。

Google PageSpeed

PageSpeed 根据网页最棒实施剖判和优化测验的网页。

皇家赌场手机版 26google
pagespeed

PageSpeed 也会有三个 CLI(Command Line Interface)工具:PSI(PageSpeed
Insights with reporting)

在创设过程中,能够选取 PSI
测验移动端和桌面端的性质,最后获得可读性突出的测量试验结果。

皇家赌场手机版 27google
pagespeed

皇家赌场手机版 28

运作时品质深入分析

上边大概介绍了Timeline面板上的一一职能菜单,那么怎样去行使该面板去解析和优化网页程序的周转质量呢,由于篇幅限制,就不在此边打开研讨,感兴趣的读者直接到Google开垦者文书档案上查看,Google开拓者文书档案有最上流最新的信息。
参照文书档案
Analyze Runtime Performance

Diagnose Forced Synchronous Layouts

本人的网址都付出到哪个地方去了?

评估网站在世界内地为各类移动端客商支付的保险开销。

皇家赌场手机版 29what
does my site cost?

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

Pingdom 网址速度测量检验

输入 U大切诺基L 地址,就可以测验页面加载速度,剖判并寻找质量瓶颈。

皇家赌场手机版 30pingdom

皇家赌场手机版 31

SpeedCurve

SpeedCurve
不仅能令你追踪竞争对手的习性表现,也能够追踪本身的脾气展现。使用
SpeedCurve
时,你能够查看有些因素在分化站点的速度呈现。对于移动客商来讲,他们希望网站在小叔子大上加载起来要快于计算机,假若认为到加载迟缓,往往会神速关上网页,所以,网址的响应速度对她们很关键。

皇家赌场手机版 32speedcurve

该表呈现以纳秒为单位的最近页面绘制所需时日,而右边手展现了眼下图表的小小与最大值。别的,也呈现了近些日子80帧的树状图。那些图片的强硬之处是它不断试图再次绘制页面,使得页面好疑似第一回加载。那允许你正分明位因CSS影响的绘图问题,而不用每回重复加载页面。无论你的更动是不是产生震慑,树状图都会穷追猛打监测。

Calibre

皇家赌场手机版,Calibre 能够帮你追踪页面包车型大巴加载时间,以至页面大小。难题页面(Janky
page)?是的,Calibre 会直接告知你怎么样页面有题目。

皇家赌场手机版 33image

假如大家详细查看那一个页面包车型大巴HTML和CSS,你拜会到个中三个div增多了一部分CSS效果。

GT Metrix

GT Metrix 结合了 Google PageSpeed 和
YSlow,扶持开拓者创制飞快、高效和周密优化的网页浏览体验。

皇家赌场手机版 34image

皇家赌场手机版 35

perf.js

在开采进程中,将质量的时序情形显示在页面上。

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

perf bar

一种轻松的秘籍,用于连忙搜集和查看网页质量,提供预置的量化规范,也支持自定义的量化规范。

皇家赌场手机版 36

grunt-perfbudget

用来评估质量的 Grunt task。 grunt-perfbudget 使用 WebPagetest
的公有或个体实例在一定的 UOdysseyL
举行测量试验。它会将测量试验结果和你预期的性质期望做相比,假使低于预期,那么这一个task
就顺遂完结了,若是高出了你预期的属性期望,那么就能够报告失利,何况会拉拉扯扯你解析超过预想的案由。

哇!正如您从图纸可观察,页面绘制时间有一个令人关心的转移。通过简单地将border-radius属性移除,即可表达那么些改动能让页面包车型客车绘图时间肯定滑坡。当你更新或更动CSS属性时,那么些图形就任何时候下落。在同三个成分上还要利用box-shadowborder-radius,会导致相当重的绘图担任,那是因为浏览器无法为之做出优化。假诺有一个成分供给再三的再一次绘制,你应该在创造网页时时刻记住那一点。

Sitespeed

Sitespeed.io
是三个基于最好实行以至部分加载时序等量化标准的开源工具,有利于开拓者深入分析网页的加载速度和渲染质量。它会从开采者的站点搜聚多少个页面包车型客车数据,依据最棒实行等准绳来分析那一个网页,并将结果以
HTML 的款式出口,大概以数值的款式发送到 Graphite。

那是四个很好的,在Google IO
网站上的摄像,它更加深入地演讲绘制时间,并介绍一些减去网页“jank(卡顿)”的技能。

speedgun

该网站允许你利用 Speedgun.js
采撷任性公开站点的习性数据。它会运作六次,并出示贰个和好的示图,扶助开辟者了然当前页面的加载进程。

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

gulp size

来得档案的次序大小。

皇家赌场手机版 37image

祝测验欢娱!

Chrome 开辟者工具

在 Chrome 的开采者工具中,对于评估质量有多个要命实用的标签:奥迪(Audi)ts 和
Network。

奥迪(Audi)t
面板用于深入分析加载的页面。它能够提供优化提议,收缩页面加载时间,加快页面包车型客车响应速度。

皇家赌场手机版 38image

Network
面板以动态的章程实时地展示了财富的伸手和下载。尽管分析和固定这么些要求会比纯粹的加载页面多花一些时刻,但这一个消耗对于辅导页面包车型大巴天性优化是那些关键的。

皇家赌场手机版 39image

火狐开荒者浏览器

该浏览器是为开拓者而创制的,专一于劳动开垦者的专业流。这是平昔第二次,将创设、测量试验和扩张等服务聚焦于一体。

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

Page performance

以此扩充插件应用于 Chrome
浏览器,能够开速深入分析当前页面包车型大巴质量。若是浏览器展开了多少个标签,那么该插件会自动剖判当前页面包车型地铁习性表现。

皇家赌场手机版 40image

PerfAudit

我们核准页面包车型地铁加载和渲染质量。对于令人反感的响应缓慢和主题素材页面,咱们有本分的重任提供高效、牢固和准确的页面。

Perfmonkey

PerfMonkey 让跟踪页面包车型地铁渲染品质变得无比轻易。

ImageOptim

ImageOptim
是四个免费的运用,它在削减图片体量、提升加载速度的同不时间,还不会捐躯图片质量。它优化了滑坡参数、移除了没用的头音讯和非须求的颜色配置音信。

皇家赌场手机版 41image

它也得以被购并到 Grunt 和 居尔p 中。

SVGO

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

若果你须要的是相互分界面包车型客车操作,并非 CLI,那么能够下载这一个 应用程式。

SVGOMG

SVGOMG 是 SVGO’s Missing GUI 的缩写,意在揭穿 SVG
文件的重要难题,而不具备 SVGO 的完全可配备项。

皇家赌场手机版 42image

手动优化 SVGs

看似于别的的图形文件,SVG 也相应在上线前被优化。尽管有成都百货上千周边 雷Mond的工具得以帮你做这种优化,但最棒的艺术照旧深深领悟其细节并做一些手动的优化。

Triamge

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

皇家赌场手机版 43image

CSS Triggers

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

皇家赌场手机版 44image

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

CSS Stats

该网页应用以可视化的花样显得了开垦者项目中关于 CSS 的总结音讯。

皇家赌场手机版 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。只怕你只供给引进几行代码,就足以放任引进七个库完结某个意义。假如您的库只是针对性于高端浏览器,那么大概直接调用浏览器的放置函数就足以兑现相关职能了。

皇家赌场手机版 46image

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

Leave a Comment.