前者性能优化和测试工具总计,什么是主要

值得珍藏!Web开发的各样性能工具

2015/06/22 · HTML5 ·
性能

原文出处: Robin
Rendle   译文出处:南北   

嘿,各位,又到了周末总计时间!得益于多量的 Grunt 和 Gulp
插件,大家可以轻松完成网站数量的可视化,就算深切了解这么些工具还相比困难,但分门别类的将它们列出来,也是很有扶持的。

翻译自:https://css-tricks.com/performance-tools/

什么是第一 CSS

2017/10/05 · CSS ·
CSS

初稿出处: Dean
Hume   译文出处:众成翻译   

网络速度很慢,不过有局地概括的国策可以使网站变快。其中之一就是将关键的css内联插入到网页的“标签,
可是,若是你的网站包罗数百页,甚至更不好的是包括数百种区其余沙盘,那么您该怎么办呢?
你不可以手动做那件事。 Dean
休姆(Hume)解释了一个简练的法子来成功它。假使您是经验丰盛的网页开发人士,您或许会意识那篇小说不言而喻,并且众所周知,但对此你的客户和低级开发人士来说,那是一个很好的接纳。—
Ed.

提供高效,流畅的网络体验是今天构建网站的机要片段。
半数以上意况下,大家付出网站,而不去领略浏览器实际在做什么样。
浏览器是何许从大家创立的HTML,CSS和JavaScript渲染大家的网页?
大家什么行使那几个文化来增速我们网页的渲染

原稿出处: Dean
Hume   译文出处:众成翻译   

情节分发网络(CDN)

CDN
可以帮你把网站的资源分发到世界各地,有助于增强网站的响应速度,当然,那对于那些特殊地区的用户是收效甚微的。

嗨,各位,又到了周末计算时间!得益于多量的 Grunt 和 Gulp
插件,大家可以轻松已毕网站数据的可视化,固然深远了解那几个工具还相比较劳顿,但分门别类的将它们列出来,也是很有扶助的。

在 SmashingMag阅读更加多:

  • 句斟字酌粉碎杂志的变现:案例研讨
  • PostCSS介绍
  • 预加载,有如何利益?
  • 前端性能检查表

借使自己想急迅拉长网站的性质, Google的 PageSpeed
Insights
工具是自己的首选。 当尝试检测网页并找到须要立异的区域时,那至极实惠。
您只需输入要测试的页面的URL,该工具就会提供一名目繁多性能指出。

假如你曾经通过PageSpeed
Insights工具运行自己的网站,您或许会际遇以下提出。

亚洲必赢官网 1

CSS and JavaScript 会阻塞页面的渲染。
(查阅大图)

自己必须承认,我第二回见到那一个时有点思疑。 该建议的始末如下:

“要是以下资源未下载完毕,您的页面上的别样内容都不会被渲染。
尝试延期或异步加载阻塞资源,或直接在HTML中内联嵌入那些资源的首要部分。“

幸运的是,解决这么些问题比看起来更简单!
答案在于CSS和JavaScript在您的网页中的加载格局。

网络速度很慢,可是有部分简单的政策能够使网站变快。其中之一就是将关键的css内联插入到网页的“标签,
可是,若是你的网站包蕴数百页,甚至更糟糕的是含有数百种区其他模版,那么您该怎么办啊?
你不可以手动做那件事。 Dean
休谟解释了一个简易的措施来形成它。若是您是经验丰盛的网页开发人员,您或许会发觉那篇文章不言而喻,并且众所周知,但对此你的客户和低级开发人员来说,那是一个很好的挑选。—
Ed.

CloudFlare

CloudFlare 的无敌之处在于它可以改为你的 DNS 服务器(CDN
只是它兼具服务的一个组成部分),那样对您的网站发起的享有请求都会通过它。

CloudFlare 的 CDN
在过去十五年的安插和升华中,并从未始终的寒酸和保守。大家的专利技术中丰硕利用了新式的技术进步,包含并不压制硬件、web
服务器和网络路由。换言之,大家创新的建设了新一代的 CDN。新的 CDN
配置简单、价格低廉,其性质也迟早比你利用过的其它传统 CDN 都要好好。

内容分发网络(CDN)

CDN
可以帮您把网站的资源分发到世界各地,有助于增长网站的响应速度,当然,那对于那一个特殊地区的用户是收效甚微的。

怎么着是非同一般CSS?

对CSS文件的乞请能够肯定扩充网页显示所需的光阴。
原因是默许景况下,浏览器将顺延页面展现,直到它完成加载、解析和实施所有在“页面”中援引的CSS文件。
那样做是因为它须求统计页面的布局。

噩运的是,那意味着倘若我们有一个极度大的CSS文件,并且需要一段时间才能到位下载,我们的用户将在浏览器初始呈现页面之前等待整个文件被下载下来。
幸运的是,有一个出色绝伦的技巧,使大家可以优化我们的CSS的传输并减轻阻塞。这种技能被称为优化重大渲染路径。
关键渲染路径表示浏览器显示页面的所有必须步骤。
大家想要找到细微的堵截CSS集合 ,或者关键 CSS,以使页面呈现给用户。
要害资源是可能阻塞页面首屏突显的具有资源。
那背后的想法是,网站应当在前多少个TCP数据包响应中为用户获得第二个显示器的内容(或“首屏”内容)。
想要简要询问哪些在网页上行事,请查看下边的图形。

亚洲必赢官网 2

第一 CSS是向用户显示第一屏的内容所需CSS的至少集合。
(翻开大图)

在上头的示范中,网页的主要部分只是用户在首次加载页面时得以看来的始末
那意味我们只须求加载最少量的CSS来渲染页面顶部的内容。
对于CSS的其他部分,大家不必要担心,因为大家可以异步加载它。

咱俩怎么规定重点CSS?
确定页面的基本点CSS是相当复杂的,要求你浏览网页的DOM。
接下来,大家必要确定当前利用于视图中每个元素的样式列表。
手动执行此操作将是一个累赘的长河,不过有些很棒的工具得以自行执行那个进程。

在本文中,我将向您出示如何使用首要的CSS提升你的网页显示速度,并介绍一个得以支持您自动施行此进程的工具。

提供高效,流畅的网络体验是现行构建网站的要紧部分。
半数以上处境下,我们开发网站,而不去领略浏览器实际在做哪些。
浏览器是何许从我们成立的HTML,CSS和JavaScript渲染我们的网页?
大家怎么着拔取这个文化来增速咱们网页的渲染

MaxCDN

CSS-Tricks 当前就在采纳 马克斯CDN 托管所有的静态资源。它可以无缝地融合
WordPres 和 W3
的富有缓存资源,所以我们无需做哪些更加处理,即可将资源移入
CDN,并能保险链接的准头。

亚洲必赢官网 3

对此一个博客来说,考虑到其中的大文件重大是 JavaScript、CSS
和图纸,而不是视频等项目,那贷款占用的可真多。

我们的 CDN
服务一样是一个网站加速器和实时控制中央。成立它,就是为着让网站的用户和运维都能从下一代
CDN 中赢得最大受益。

CloudFlare

CloudFlare 的兵不血刃之处在于它可以改为你的 DNS 服务器(CDN
只是它具备服务的一个组成部分),那样对你的网站发起的享有请求都会经过它。

CloudFlare 的 CDN
在过去十五年的统筹和升华中,并没有平昔的保守和保守。我们的专利技术中丰裕利用了新型的技巧发展,包涵并不限于硬件、web
服务器和网络路由。换言之,我们革新的建设了下一代的 CDN。新的 CDN
配置简单、价格低廉,其特性也必然比你使用过的其余传统 CDN 都要完美。

关键CSS实践

使用紧要CSS,我们须要变更我们处理CSS的艺术 – 那象征将其分成两个公文。
对于第三个文件,大家仅领到渲染上述情节所需的矮小CSS集,然后将其内联在网页中。
对于第三个公文或非关键的CSS,大家异步加载它,以免阻塞网页。

一初阶如同不怎么意想不到,不过透过将紧要的CSS集成到HTML中,大家可以排除关键路径中的额外的呼吁。
这使大家可以在三遍呼吁中提供至关首要的CSS,以尽早向用户显示页面。

上面的代码给出了一个焦点的例子。

JavaScript

<!doctype html> <head> <style> /* 内联CSS */
</style> “<script> loadCSS(‘non-critical.css’);
</script>“ </head> <body> …body goes here
</body> </html>

1
2
3
4
5
6
7
8
9
&lt;!doctype html&gt;
&lt;head&gt;
  &lt;style&gt; /* 内联CSS */ &lt;/style&gt;
  “&lt;script&gt; loadCSS(‘non-critical.css’); &lt;/script&gt;“
&lt;/head&gt;
&lt;body&gt;
  …body goes here
&lt;/body&gt;
&lt;/html&gt;

如上,我们将第一CSS内联在style 标签中。然后,使用 loadCSS();
异步加载非关键的CSS。 那很关键,因为大家在显示首屏后加载繁重的(非关键)
CSS。

起首,那就如一场恶梦。 为何要手动在每个页面内嵌CSS片段?
不过有一个好音信,那个进程可以自动化,在那一个例子中,我将运行一个名为Critical
的工具。 Addy Osmani
成立,它是一个同意你自动提取和内联关键路径CSS到HTML中的的Node.js包。
我将把这么些工具和 Grunt 一起介绍,
Grunt是一个JavaScript 职责执行器, 自动处理CSS。 若是您后边没听过Grunt,
这些网站有一部分要命 详见文档,
以及配置项目标各个解释。我前面博客介绍过这些工具.

在 SmashingMag阅读越多:

  • 句酌字斟粉碎杂志的表现:案例研商
  • PostCSS介绍
  • 预加载,有何样好处?
  • 前者性能检查表

万一自身想连忙增进网站的属性, 谷歌的 PageSpeed
Insights
工具是自我的首选。 当尝试检测网页并找到需求更正的区域时,那非常有效。
您只需输入要测试的页面的URL,该工具就会提供一文山会海性能提出。

若是您已经通过PageSpeed
Insights工具运行自己的网站,您可能会赶上以下指出。

亚洲必赢官网 4

CSS and JavaScript 会阻塞页面的渲染。
(查看大图)

自己不可以不认可,我首先次探望这么些时有点困惑。 该提议的情节如下:

“假使以下资源未下载完毕,您的页面上的其他内容都不会被渲染。
尝试延迟或异步加载阻塞资源,或直接在HTML中内联嵌入那一个资源的机要部分。“

侥幸的是,解决那一个问题比看起来更简便易行!
答案在于CSS和JavaScript在你的网页中的加载情势。

前者性能优化和测试工具总计,什么是主要。CloudFront

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

亚马逊 CloudFront
是一个情节分发网络服务。它可以无缝融合入其余的亚马逊(亚马逊)网络服务产品,为开发者和商家分发内容到最后用户手中提供了一种简易的艺术,整个进程都有着低顺延、高转换速度的表征,也从不最小使用量的强制需要。

MaxCDN

CSS-Tricks 当前就在采取 马克斯(Max)CDN 托管所有的静态资源。它能够无缝地融为一体
WordPres 和 W3
的保有缓存资源,所以大家无需做哪些更加处理,即可将资源移入
CDN,并能保险链接的准确性。

亚洲必赢官网 5

对于一个博客来说,考虑到里面的大文件重大是 JavaScript、CSS
和图纸,而不是视频等品种,那带宽占用的可真多。

咱俩的 CDN
服务一样是一个网站加快器和实时控制中央。创制它,就是为了让网站的用户和运维都能从下一代
CDN 中得到最大获益。

开始

俺们先从Node.js控制台开端,并导航到您的网站的门道。
通过在你的控制斯科普里输入以下命令来设置Grunt命令行界面:

npm install -g grunt-cli 

1
2
npm install -g grunt-cli


这将把grunt指令放在你的连串路径中,允许从其余目录运行它。
接下来,使用以下命令安装Grunt职分局行程序:

npm install grunt –save-dev 

1
2
npm install grunt –save-dev


下一场安装 grunt-critical
插件.

npm install grunt-critical –save-dev 

1
2
npm install grunt-critical –save-dev


接下去,您需求成立项目义务布置的Gruntfile。 看起来有点像下边的代码。

module.exports = function (grunt) { grunt.initConfig({ critical: { dist:
{ options: { base: ‘./’ }, // The source file src: ‘page.html’, // The
destination file dest: ‘result.html’ } } }); // Load the plugins
grunt.loadNpmTasks(‘grunt-critical’); // Default tasks.
grunt.registerTask(‘default’, [‘critical’]); }; 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
module.exports = function (grunt) {
grunt.initConfig({
  critical: {
    dist: {
      options: {
        base: ‘./’
      },
      // The source file
      src: ‘page.html’,
      // The destination file
      dest: ‘result.html’
      }
    }
  });
  // Load the plugins
  grunt.loadNpmTasks(‘grunt-critical’);
  // Default tasks.
  grunt.registerTask(‘default’, [‘critical’]);
};


在地点的代码中,我布置了 Critical 插件来查阅自己的page.html文本。
然后它会基于给定的页面处理CSS来测算关键的CSS。
接下来,它将内联关键的CSS并相应地创新HTML页面。

通过在控制长沙输入grunt来运作插件。

亚洲必赢官网 6

采纳Grunt自动检测网络性能。(查看大图)

只要您导航到该公文夹,则应该会专注到一个名为result.html的公文,其中富含内联的第一CSS,而余下的CSS异步加载。
您的网页现在就可以利用了!

在暗地里, 插件自动使用 PhantomJS,
一个无头WebKit浏览器,捕获所需的严重性CSS。
那代表它亦可静默地加载您的网页并测试最佳关键CSS。
这一个功效还有限支撑了插件在不一样屏幕尺寸上的面面俱到。
例如,您可以提供区其余显示屏尺寸,插件将相应地捕获并内联您的要害CSS

critical: { dist: { options: { base: ‘./’, dimensions: [{ width: 1300,
height: 900 }, { width: 500, height: 900 }] }, files: [ {src:
[‘index.html’], dest: ‘dist/index.html’} ] } } 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
critical: {
  dist: {
    options: {
      base: ‘./’,
      dimensions: [{
        width: 1300,
        height: 900
      },
      {
        width: 500,
        height: 900
      }]
    },
    files: [
      {src: [‘index.html’], dest: ‘dist/index.html’}
    ]
  }
}


地方的代码将从多个维度处理给定的文件,并内联相应的首要性CSS。
那代表你可以根据八个显示器宽度运行您的网站,并确保您的用户依旧具备同等的经验。
大家明白,使用3G和4G的运动连接可能是不平稳的 –
那就是干吗那种技术对于移动用户来说那样紧要。

怎么是非同儿戏CSS?

对CSS文件的央浼可以鲜明增多网页呈现所需的时光。
原因是默许景况下,浏览器将推迟页面展现,直到它成功加载、解析和推行所有在“页面”中引用的CSS文件。
那样做是因为它必要总括页面的布局。

不幸的是,那象征一旦大家有一个百般大的CSS文件,并且需求一段时间才能做到下载,大家的用户将在浏览器开首呈现页面此前等待整个文件被下载下来。
幸运的是,有一个高超的技巧,使大家可以优化大家的CSS的传输并减轻阻塞。那种技术被称为优化重大渲染路径。
关键渲染路径表示浏览器突显页面的保有必须步骤。
咱们想要找到小小的的堵塞CSS集合 ,或者关键 CSS,以使页面彰显给用户。
重中之重资源是可能过不去页面首屏突显的兼具资源。
那背后的想法是,网站应当在前多少个TCP数据包响应中为用户得到第二个屏幕的始末(或“首屏”内容)。
想要简要打听哪些在网页上工作,请查看上面的图形。

亚洲必赢官网 7

重在 CSS是向用户彰显第一屏的情节所需CSS的足足集合。
(查看大图)

在地点的演示中,网页的显要部分只是用户在第一次加载页面时方可看来的始末
那象征大家只须求加载最少量的CSS来渲染页面顶部的内容。
对于CSS的其他部分,大家不要求操心,因为我们可以异步加载它。

咱们怎么确定第一CSS?
确定页面的主要CSS是一对一复杂的,需要您浏览网页的DOM。
接下来,大家要求规定当前选择于视图中每个元素的样式列表。
手动执行此操作将是一个麻烦的进度,可是有的很棒的工具得以活动执行这么些历程。

在本文中,我将向您浮现什么利用主要的CSS进步你的网页突显速度,并介绍一个足以辅助你自动履行此进度的工具。

CDNperf

上述的 CDNs
并不可能托管你轻易的资源,它们往往只是托管最频仍用到的文本。纵然对于线上产品以来将资源和服务器托管到个人的
CDN 上并不是最好的格局,但那种格局对于分发资源来说如故是快捷和不难的。

CDNperf 可以帮你找出最快和最可信的 JavaScript
CDNS,让您的网站更快更有朝气。

亚洲必赢官网 8

CloudFront

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

亚马逊(Amazon) CloudFront
是一个情节分发网络服务。它可以无缝融合入其余的亚马逊(亚马逊(Amazon))网络服务产品,为开发者和商号分发内容到最后用户手中提供了一种不难的主意,整个经过都具备低顺延、高转换速度的特征,也未曾最小使用量的勒迫须要。

在生产环境中动用Critical

选用Critical那样的工具是机关提取和内联关键CSS的好措施,而无需变更开发网站的法门,不过怎么适应真实风貌?
要将新更新的公文置于目标文件,您只需遵从普通的艺术展开安插 –
无需在生育条件中改变。
您只需记住,每便构建或改动CSS文件时,都亟待周转Grunt。

俺们在本文中运行的代码示例涵盖了单个文件的选拔,不过当你须求处理多少个文件重大CSS竟然整个文件夹时会发生什么?
您的Gruntfile可以革新以拍卖五个文本,类似于上面的演示。

critical: { dist: { options: { base: ‘./’, dimensions: [{ width: 1300,
height: 900 }, { width: 500, height: 900 }] }, files: [ {src:
[‘index.html’], dest: ‘dist/index.html’}, {src: [‘blog.html’], dest:
‘dist/blog.html’} {src: [‘about.html’], dest: ‘dist/about.html’} {src:
[‘contact.html’], dest: ‘dist/contact.html’} ] } } 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
critical: {
  dist: {
    options: {
      base: ‘./’,
      dimensions: [{
        width: 1300,
        height: 900
       },
       {
        width: 500,
        height: 900
      }]
    },
    files: [
      {src: [‘index.html’], dest: ‘dist/index.html’},
      {src: [‘blog.html’], dest: ‘dist/blog.html’}
      {src: [‘about.html’], dest: ‘dist/about.html’}
      {src: [‘contact.html’], dest: ‘dist/contact.html’}
    ]
  }
}


你还是能利用以下代码对给定文件夹中的每个HTML文件进行职责:

critical: { dist: { options: { base: ‘./’, dimensions: [{ width: 1300,
height: 900 }, { width: 500, height: 900 }], src: ‘*.html’, dest:
‘dist/’ } } } 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
critical: {
  dist: {
    options: {
      base: ‘./’,
      dimensions: [{
        width: 1300,
        height: 900
      },
      {
        width: 500,
        height: 900
      }],
      src: ‘*.html’,
      dest:  ‘dist/’
    }
  }
}


位置的代码示例可以让你深远摸底如何在您的网站上贯彻。

关键CSS实践

采取主要CSS,大家要求改变大家处理CSS的主意 – 那意味着将其分为七个文本。
对于第四个公文,我们仅领到渲染上述情节所需的细小CSS集,然后将其内联在网页中。
对于第一个文件或非关键的CSS,大家异步加载它,以免阻塞网页。

一开始如同不怎么出其不意,可是透过将主要的CSS集成到HTML中,大家得以去掉关键路径中的额外的伸手。
那使我们可以在两遍呼吁中提供首要的CSS,以尽早向用户浮现页面。

上面的代码给出了一个骨干的例证。

JavaScript

<!doctype html> <head> <style> /* 内联CSS */
</style> “<script> loadCSS(‘non-critical.css’);
</script>“ </head> <body> …body goes here
</body> </html>

1
2
3
4
5
6
7
8
9
&lt;!doctype html&gt;
&lt;head&gt;
  &lt;style&gt; /* 内联CSS */ &lt;/style&gt;
  “&lt;script&gt; loadCSS(‘non-critical.css’); &lt;/script&gt;“
&lt;/head&gt;
&lt;body&gt;
  …body goes here
&lt;/body&gt;
&lt;/html&gt;

如上,大家将重点CSS内联在style 标签中。然后,使用 loadCSS();
异步加载非关键的CSS。 那很要紧,因为大家在体现首屏后加载繁重的(非关键)
CSS。

初叶,那就像是一场恶梦。 为何要手动在每个页面内嵌CSS片段?
不过有一个好音讯,那么些进程可以自动化,在这几个例子中,我将运行一个名为Critical
的工具。 Addy Osmani
创立,它是一个同意你自动提取和内联关键路径CSS到HTML中的的Node.js包。
我将把那么些工具和 Grunt 一起介绍,
Grunt是一个JavaScript 职分执行器, 自动处理CSS。 即使你前边没听过Grunt,
这几个网站有局地万分 详见文档,
以及陈设项目标各样解释。我事先博客介绍过这一个工具.

性能测试

下边的那个性能测试工具,使用了量化的艺术测试了网站中诸如首字节加载时间(time
to first
byte)或者渲染时间等表现。有些工具还会检查更加检查资源是或不是被缓存,八个CSS 或 JS 文件是还是不是值得合并。

CDNperf

上述的 CDNs
并不可以托管你随便的资源,它们往往只是托管最频仍用到的公文。纵然对于线上产品的话将资源和服务器托管到村办的
CDN 上并不是最好的格局,但这种措施对于分发资源来说依旧是急速和概括的。

CDNperf 可以帮你找出最快和最可信的 JavaScript
CDNS,让您的网站更快更有朝气。

亚洲必赢官网 9

cdnperf

测试

一如既往,测试任何新的转移是尤其主要的。
借使你想要测试更改,有一对很棒的工具得以在线免费使用。进到 Google’s
PageSpeed
Insights
并透过该工具运行您的URL。
您应该小心到,您的网页现在不再具有其余阻塞资源,并且您的习性立异提出已经变绿
。而你可能也如数家珍了另一个巨大的工具。WebPagetest

亚洲必赢官网 10

行使WebPagetest是测试你的网页及时突显的好办法。
(查阅大图)

它是一个免费的工具,可以让您从天下各类地点展开网站速度测试。
除了对你的网页的内容举行添加的分析性审查,如若你采用“Visual
Comparison”, 该工具将比较多少个网页。
这是相比较立异您的要害CSS从前和事后的结果并回看差距的好措施。

动用主要CSS的想法是,大家的网页会尽快显现,从而尽快向用户映现内容。
测量那几个的最好措施是使用 speed
index.
WebPagetest采取的测量方法是衡量页面内容的视觉填充速度。SpeedIndex测量可视页面加载的视觉进程,并盘算内容绘制速度的一体化得分。
比较
SpeedIndex测量通过内联关键CSS从前和之后的改观。
您将对您的渲染时间的改变大吃一惊。

开始

我们先从Node.js控制台初阶,并导航到您的网站的路子。
通过在你的控制沈阳输入以下命令来设置Grunt命令行界面:

npm install -g grunt-cli 

1
2
npm install -g grunt-cli


这将把grunt命令放在你的系列路径中,允许从其余目录运行它。
接下来,使用以下命令安装Grunt任务运行程序:

npm install grunt –save-dev 

1
2
npm install grunt –save-dev


然后安装 grunt-critical
插件.

npm install grunt-critical –save-dev 

1
2
npm install grunt-critical –save-dev


接下去,您必要成立项目任务计划的Gruntfile。 看起来有点像上边的代码。

module.exports = function (grunt) { grunt.initConfig({ critical: { dist:
{ options: { base: ‘./’ }, // The source file src: ‘page.html’, // The
destination file dest: ‘result.html’ } } }); // Load the plugins
grunt.loadNpmTasks(‘grunt-critical’); // Default tasks.
grunt.registerTask(‘default’, [‘critical’]); }; 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
module.exports = function (grunt) {
grunt.initConfig({
  critical: {
    dist: {
      options: {
        base: ‘./’
      },
      // The source file
      src: ‘page.html’,
      // The destination file
      dest: ‘result.html’
      }
    }
  });
  // Load the plugins
  grunt.loadNpmTasks(‘grunt-critical’);
  // Default tasks.
  grunt.registerTask(‘default’, [‘critical’]);
};


在上头的代码中,我布署了 Critical 插件来查阅自己的page.html文件。
然后它会基于给定的页面处理CSS来测算关键的CSS。
接下来,它将内联关键的CSS并相应地立异HTML页面。

因而在控制布里斯托输入grunt来运行插件。

亚洲必赢官网 11

应用Grunt自动检测网络性能。(翻看大图)

假如您导航到该公文夹,则应该会小心到一个名为result.html的文件,其中涵盖内联的重大CSS,而余下的CSS异步加载。
您的网页现在就可以利用了!

在背后, 插件自动使用 PhantomJS,
一个无头WebKit浏览器,捕获所需的重中之重CSS。
那象征它亦可静默地加载您的网页并测试最佳关键CSS。
那个职能还打包票了插件在分歧显示屏尺寸上的油滑。
例如,您能够提供分裂的显示屏尺寸,插件将相应地捕获并内联您的要害CSS

critical: { dist: { options: { base: ‘./’, dimensions: [{ width: 1300,
height: 900 }, { width: 500, height: 900 }] }, files: [ {src:
[‘index.html’], dest: ‘dist/index.html’} ] } } 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
critical: {
  dist: {
    options: {
      base: ‘./’,
      dimensions: [{
        width: 1300,
        height: 900
      },
      {
        width: 500,
        height: 900
      }]
    },
    files: [
      {src: [‘index.html’], dest: ‘dist/index.html’}
    ]
  }
}


地点的代码将从两个维度处理给定的文本,并内联相应的紧要性CSS。
那表示你可以根据七个屏幕宽度运行您的网站,并确保您的用户依然保有同样的心得。
我们精通,使用3G和4G的移位连接可能是不安静的 –
那就是为啥这种技术对于移动用户来说那样重大。

WebPagetest

WebPagetest
是性质测试的黄金标准,它提供了多地方的量化目的用于性能测试,比如有一个中央的评分,用于评论当前页面优化的水平;有一个截图,呈现页面加载后的视觉效果;还有一个浏览器加载资源的瀑布流…

基于用户浏览器真实的连年速度,在全世界范围内开展网页速度测试,并提供详细的优化指出。

亚洲必赢官网 12

透过动用 API
wrapper,也可以将
WebPagetest 的相干服务丰裕到 NPM 模块和命令行工具中。

  • webpagetest-mapper:将
    WebPageTest 的测试数据转换为可读的文档格式。
  • WPT Bulk
    Tester:使用 谷歌Docs 测试五个 URLs(借使您抱有 API key,也足以使用 webpagetest.org
    来做那件事,或者另曾祖父开可访问的实例)。

性能测试

上面的这么些性能测试工具,使用了量化的主意测试了网站中诸如首字节加载时间(time
to first
byte)或者渲染时间等表现。有些工具还会检查尤其检查资源是或不是被缓存,八个CSS 或 JS 文件是或不是值得合并。

长远精通

正如一大半优化工具,对您的网站总有利弊。弊端之一是
丢掉浏览器中的CSS缓存 。 如果动态网页更改频仍,大家不愿意缓存HTML页面
那意味内联CSS
历次重复下载。
要求证实的是只列出重点的CSS,异步加载剩下的非关键的CSS。
大家得以缓存非关键的CSS。有比比皆是争论和反对关于在“中内联CSS,
精晓更加多我引进 Hans 克赖斯特ian Reinl的博客 “A counter statement: Putting
the CSS in the
head”。

比方您使用(CDN),也值得一提的是,您还相应 从CDN中提供非关键的CSS
这样做允许你平昔从边缘提供缓存的资源,提供更快的响应时间,而不是一同路由到源服务器来获取它们。

对此传统的网页,内联CSS的技术运作杰出,但按照你的意况,可能并不总是适用。
假诺你有客户端JavaScript生成HTML如何是好?
假设您在单页面应用程序上如何是好?
假如你尽可能多地出口关键的CSS,它将升格页面渲染效果。
了然关键CSS的做事规律及是或不是适用于你的网页,这点很关键。 我爱好GuyPodjarny对此的立场:

“尽管有这几个限制,Inline在前端优化领域仍旧是一个很首要的工具。
因而,你应该运用它,但要小心,不要滥用它。“

—Guy Podjarny


“为何内联一切不是答案”,他提供了关于如曾几何时候理应_如曾几何时候不应该松手CSS的好提议。

在生育环境中拔取Critical

拔取Critical那样的工具是半自动提取和内联关键CSS的好法子,而无需变更开发网站的艺术,不过怎样适应真实风貌?
要将新更新的公文置于目标文件,您只需依据普通的方法开展配备 –
无需在生养条件中改变。
您只需记住,每一回构建或改动CSS文件时,都亟待周转Grunt。

俺们在本文中运行的代码示例涵盖了单个文件的选取,不过当你需要处理多少个公文重视CSS竟然整个文件夹时会暴发怎么着?
您的Gruntfile可以立异以处理多少个文件,类似于上面的言传身教。

critical: { dist: { options: { base: ‘./’, dimensions: [{ width: 1300,
height: 900 }, { width: 500, height: 900 }] }, files: [ {src:
[‘index.html’], dest: ‘dist/index.html’}, {src: [‘blog.html’]亚洲必赢官网 ,, dest:
‘dist/blog.html’} {src: [‘about.html’], dest: ‘dist/about.html’} {src:
[‘contact.html’], dest: ‘dist/contact.html’} ] } } 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
critical: {
  dist: {
    options: {
      base: ‘./’,
      dimensions: [{
        width: 1300,
        height: 900
       },
       {
        width: 500,
        height: 900
      }]
    },
    files: [
      {src: [‘index.html’], dest: ‘dist/index.html’},
      {src: [‘blog.html’], dest: ‘dist/blog.html’}
      {src: [‘about.html’], dest: ‘dist/about.html’}
      {src: [‘contact.html’], dest: ‘dist/contact.html’}
    ]
  }
}


你还足以应用以下代码对给定文件夹中的每个HTML文件执行职务:

critical: { dist: { options: { base: ‘./’, dimensions: [{ width: 1300,
height: 900 }, { width: 500, height: 900 }], src: ‘*.html’, dest:
‘dist/’ } } } 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
critical: {
  dist: {
    options: {
      base: ‘./’,
      dimensions: [{
        width: 1300,
        height: 900
      },
      {
        width: 500,
        height: 900
      }],
      src: ‘*.html’,
      dest:  ‘dist/’
    }
  }
}


上边的代码示例可以让您深远驾驭什么在您的网站上落到实处。

Yslow

Yslow 基于 Yahoo
的高性能网页教条,分析网页的性能并交由响应缓慢的原由。

WebPagetest

WebPagetest
是性质测试的纯金标准,它提供了多地方的量化目标用于性能测试,比如有一个骨干的评分,用于评论当前页面优化的水准;有一个截图,呈现页面加载后的视觉效果;还有一个浏览器加载资源的瀑布流…

根据用户浏览器真实的连天速度,在全世界限量内举行网页速度测试,并提供详实的优化提出。

亚洲必赢官网 13

webpagetest

通过应用 API
wrapper,也得以将
WebPagetest 的有关服务丰富到 NPM 模块和命令行工具中。

  • webpagetest-mapper:将
    WebPageTest 的测试数据转换为可读的文档格式。
  • WPT Bulk
    Tester:使用
    谷歌(Google) Docs 测试多个 URLs(如果您所有 API key,也可以利用
    webpagetest.org 来做这件事,或者其余公开可访问的实例)。

那不完美

固然如此变化和内联关键CSS所需的多多工具都在不断立异,但或许还有局地索要校对的园地。
如若你发现任何不当,您的品种,open up an
issue
或指出呼吁,并在GitHub贡献项目。

为您的网站优化关键渲染路径可以大大革新页面加载时间。
使用那种技能使大家可以选取响应式布局,而不会影响其肯定的独到之处。
那也是确保您的页面加载高效而不妨碍你的筹划的好办法。

测试

一如往昔,测试任何新的更动是不行重大的。
即使您想要测试更改,有一些很棒的工具得以在线免费使用。进到 Google’s
PageSpeed
Insights
并通过该工具运行您的URL。
您应该小心到,您的网页现在不再持有其他阻塞资源,并且您的特性立异提出已经变绿
。而你也许也熟练了另一个伟人的工具。WebPagetest

亚洲必赢官网 14

选用WebPagetest是测试你的网页及时展现的好办法。
(翻开大图)

它是一个免费的工具,能够让您从全球各种地点展开网站速度测试。
除了对您的网页的内容举办添加的分析性审查,若是你拔取“Visual
Comparison”, 该工具将相比较两个网页。
那是比较革新您的要害CSS以前和未来的结果并回放差别的好措施。

应用首要CSS的想法是,大家的网页会尽快显现,从而尽快向用户浮现内容。
测量那几个的最好点子是接纳 speed
index.
WebPagetest接纳的测量方法是衡量页面内容的视觉填充速度。SpeedIndex测量可视页面加载的视觉进程,并统计内容绘制速度的全部得分。
比较
SpeedIndex测量通过内联关键CSS此前和今后的改观。
您将对你的渲染时间的更改大吃一惊。

Google PageSpeed

PageSpeed 依照网页最佳实践分析和优化测试的网页。

亚洲必赢官网 15

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

在构建进度中,可以选拔 PSI
测试移动端和桌面端的习性,最终获得可读性卓越的测试结果。

亚洲必赢官网 16

Yslow

Yslow 基于 Yahoo
的高性能网页教条,分析网页的性质并付诸响应缓慢的原因。

更加多资源

若是你喜欢使用其余构建系统(如Gulp),则足以平昔运用插件,而无需下载Grunt。
还有一个灵光的教程,何以使用Gulp优化骨干页面.

还有任何插件可以领取你的严重性CSS,比如
Penthouse,和来自Filament
公司的criticalCSS。我肯定推荐
“咱俩怎么使RWD网站急速加载”
驾驭什么行使这一个技术来确保他们的网页尽可能快地加载。

Smashing Magazine的总编维·达(Vi·ta)ly Friedman写了一篇有关Smashing
Magazine怎样立异表现的稿子 improved the
performance
。如若您想精晓有关渲染路径的越来越多信息,那么在Udacity网站上得以免费应用
一个灵光的科目。 Google
Developers
website
也有关于
优化CSS传输的内容。
帕特里克 Hamman 写了一篇博客关于
哪些识别关键的CSS创造更快的网页。

默许意况下,您是还是不是在您的序列中置放关键CSS? 你采用什么工具?
你遇见什么问题? 欢迎在小说下方分享你的阅历!

(il, rb, ml, og)

1 赞 2 收藏
评论

亚洲必赢官网 17

长远摸底

正如大多数优化工具,对您的网站总有利弊。弊端之一是
不见浏览器中的CSS缓存 。 借使动态网页更改频仍,大家不期待缓存HTML页面
那代表内联CSS
历次重复下载。
要求证实的是只列出首要的CSS,异步加载剩下的非关键的CSS。
我们得以缓存非关键的CSS。有无数争辩和反对关于在“中内联CSS,
了然越来越多我引进 Hans 克赖·斯特(Chr·ist)ian Reinl的博客 “A counter statement: Putting
the CSS in the
head”。

假设你使用(CDN),也值得一提的是,您还应有 从CDN中提供非关键的CSS
那样做允许你从来从边缘提供缓存的资源,提供更快的响应时间,而不是一头路由到源服务器来获取它们。

对于价值观的网页,内联CSS的技能运作杰出,但依照你的气象,可能并不延续适用。
假若你有客户端JavaScript生成HTML如何做?
假如您在单页面应用程序上如何是好?
固然你尽可能多地出口关键的CSS,它将升级页面渲染效果。
了然关键CSS的工作规律及是不是适用于您的网页,那一点很关键。 我欢愉GuyPodjarny对此的立足点:

“即使有那么些限制,Inline在前端优化领域依旧是一个很要紧的工具。
由此,你应该使用它,但要小心,不要滥用它。“

—Guy Podjarny


“为何内联一切不是答案”,他提供了有关怎么着时候理应_如曾几何时候不该放置CSS的好提出。

自家的网站都付出到哪里去了?

评估网站在世界各地为各种移动端用户支付的爱慕资金。

亚洲必赢官网 18

Google PageSpeed

PageSpeed 依据网页最佳实践分析和优化测试的网页。

亚洲必赢官网 19

google pagespeed

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

在构建进度中,可以采取 PSI
测试移动端和桌面端的性质,最后得到可读性突出的测试结果。

亚洲必赢官网 20

google pagespeed

那不完美

虽说变化和内联关键CSS所需的重重工具都在不断立异,但恐怕还有一对内需改进的小圈子。
如果你发现其他错误,您的连串,open up an
issue
或指出请求,并在GitHub进献项目。

为你的网站优化关键渲染路径可以大大改良页面加载时间。
使用那种技术使我们能够运用响应式布局,而不会潜移默化其明显的优点。
那也是确保您的页面加载高效而不妨碍你的筹划的好法子。

Pingdom 网站速度测试

输入 URL 地址,即可测试页面加载速度,分析并找出性能瓶颈。

亚洲必赢官网 21

自家的网站都付出到哪个地方去了?

评估网站在世界各地为种种移动端用户支付的敬爱资金。

亚洲必赢官网 22

what does my site cost?

越多资源

假定您喜爱使用其余构建系统(如Gulp),则可以直接使用插件,而无需下载Grunt。
还有一个灵光的学科,哪些行使Gulp优化中央页面.

还有其余插件可以领取你的重中之重CSS,比如
Penthouse,和来自Filament
公司的criticalCSS。我明白推荐
“大家怎样使RWD网站急忙加载”
精通哪些运用那么些技能来担保他们的网页尽可能快地加载。

Smashing Magazine的总编辑维达ly Friedman写了一篇有关Smashing
Magazine怎么着改革表现的文章 improved the
performance
。若是你想打听有关渲染路径的更多信息,那么在Udacity网站上能够免费使用
一个灵光的课程。 Google
Developers
website
也有关于
优化CSS传输的内容。
帕特里克 Hamman 写了一篇博客关于
怎么样辨别关键的CSS成立更快的网页。

默许境况下,您是还是不是在您的品类中放置关键CSS? 你使用什么工具?
你遭遇什么样问题? 欢迎在文章下方分享你的经历!

(il, rb, ml, og)

1 赞 2 收藏
评论

SpeedCurve

SpeedCurve
既可以让你追踪竞争对手的属性表现,也可以追踪自己的性能表现。使用
SpeedCurve
时,你可以查阅某个因素在分化站点的进程彰显。对于移动用户来说,他们期望网站在哥哥大上加载起来要快于电脑,要是感觉到加载迟缓,往往会很快关上网页,所以,网站的响应速度对她们很主要。

亚洲必赢官网 23

Pingdom 网站速度测试

输入 URL 地址,即可测试页面加载速度,分析并找出性能瓶颈。

亚洲必赢官网 24

pingdom

Calibre

Calibre 可以帮你追踪页面的加载时间,以及页面大小。问题页面(Janky
page)?是的,Calibre 会直接报告你什么页面有问题。

亚洲必赢官网 25

SpeedCurve

SpeedCurve
既可以让您追踪竞争对手的特性表现,也足以追踪自己的属性表现。使用
SpeedCurve
时,你可以查阅某个因素在差距站点的进度显示。对于移动用户来说,他们盼望网站在手机上加载起来要快于电脑,就算感觉到加载迟缓,往往会神速关上网页,所以,网站的响应速度对他们很关键。

亚洲必赢官网 26

speedcurve

GT Metrix

GT Metrix 结合了 谷歌 PageSpeed 和
YSlow,接济开发者创设急忙、高效和周全优化的网页浏览体验。

亚洲必赢官网 27

Calibre

Calibre 可以帮你追踪页面的加载时间,以及页面大小。问题页面(Janky
page)?是的,Calibre 会直接告诉你怎么着页面有问题。

亚洲必赢官网 28

image

perf.js

在支付过程中,将性能的时序情状展现在页面上。

GT Metrix

GT Metrix 结合了 谷歌(Google) PageSpeed 和
YSlow,扶助开发者创立神速、高效和宏观优化的网页浏览体验。

亚洲必赢官网 29

image

perf bar

一种简易的方法,用于快捷收集和查阅网页性能,提供预置的量化标准,也支撑自定义的量化标准。

perf.js

在付出进度中,将性能的时序景况突显在页面上。

grunt-perfbudget

用来评估性能的 Grunt task。 grunt-perfbudget 使用 WebPagetest
的公有或个体实例在一定的 URL
举办测试。它会将测试结果和你预期的属性期望做比较,如若低于预期,那么那几个task
就顺遂落成了,假如超越了您预期的性质期望,那么就会告知战败,并且会支援您解析超出预期的来由。

perf bar

一种简易的方法,用于火速收集和查阅网页性能,提供预置的量化标准,也支撑自定义的量化标准。

Sitespeed

Sitespeed.io
是一个根据最佳实践以及一些加载时序等量化标准的开源工具,有助于开发者分析网页的加载速度和渲染性能。它会从开发者的站点收集多个页面的数据,依照最佳实践等规则来分析那几个网页,并将结果以
HTML 的款型出口,或者以数值的款型发送到 Graphite。

grunt-perfbudget

用来评估性能的 Grunt task。 grunt-perfbudget 使用 WebPagetest
的公有或个体实例在一定的 URL
举办测试。它会将测试结果和您预期的属性期望做比较,若是低于预期,那么这些task
就顺遂落成了,倘使超越了您预期的性质期望,那么就会告知败北,并且会支援您解析超出预期的原由。

speedgun

该网站允许你选择 Speedgun.js 收集任意公开站点的属性数据。它会运行四遍,并展现一个协调的示图,协理开发者明白当下页面的加载进程。

Sitespeed

Sitespeed.io
是一个根据最佳实践以及一些加载时序等量化标准的开源工具,有助于开发者分析网页的加载速度和渲染性能。它会从开发者的站点收集五个页面的数额,依照最佳实践等规则来分析这几个网页,并将结果以
HTML 的形式出口,或者以数值的方式发送到 Graphite。

gulp size

展现档次大小。

亚洲必赢官网 30

speedgun

该网站允许你接纳
Speedgun.js
收集任意公开站点的性能数据。它会运作五遍,并展现一个温馨的示图,支持开发者精通当前页面的加载进程。

浏览器工具盒插件

gulp size

来得档次大小。

亚洲必赢官网 31

image

Chrome 开发者工具

在 Chrome
的开发者工具中,对于评估性能有五个可怜实惠的标签:Audits 和 Network。

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

亚洲必赢官网 32

Network
面板以动态的章程实时地突显了资源的呼吁和下载。即便辨析和固定这几个请求会比纯粹的加载页面多花一些时光,但这么些消耗对于率领页面的习性优化是那几个关键的。

亚洲必赢官网 33

浏览器工具盒插件

火狐开发者浏览器

该浏览器是为开发者而创办的,专注于劳动开发者的工作流。这是一向首次,将构建、测试和增加等劳动集中于一体。

越来越多新闻请查看 MDN 上的 Network
Monitor。

Chrome 开发者工具

在 Chrome
的开发者工具中,对于评估性能有三个格外实惠的竹签:Audits

Network。

奥迪t
面板用于分析加载的页面。它可以提供优化指出,裁减页面加载时间,增加速度页面的响应速度。

亚洲必赢官网 34

image

Network
面板以动态的法子实时地体现了资源的哀告和下载。纵然辨析和一向这一个请求会比纯粹的加载页面多花一些年华,但那几个消耗对于指引页面的性能优化是丰裕关键的。

亚洲必赢官网 35

image

Page performance

以此扩大插件应用于 Chrome
浏览器,能够开速分析当前页面的性质。倘使浏览器打开了三个标签,那么该插件会自行分析当前页面的特性表现。

亚洲必赢官网 36

火狐开发者浏览器

该浏览器是为开发者而成立的,专注于服务开发者的工作流。那是历来第三遍,将构建、测试和扩大等服务集中于一体。

越多新闻请查看 MDN 上的 Network
Monitor。

审查

Page performance

以此扩张插件应用于 Chrome
浏览器,可以开速分析当前页面的习性。即使浏览器打开了多个标签,那么该插件会自动分析当前页面的属性表现。

亚洲必赢官网 37

image

PerfAudit

大家审批页面的加载和渲染性能。对于令人反感的响应缓慢和问题页面,我们有本分的义务提供快速、稳定和标准的页面。

审查

Perfmonkey

PerfMonkey 让追踪页面的渲染性能变得无比不难。

PerfAudit

俺们核对页面的加载和渲染性能。对于令人反感的响应缓慢和题材页面,大家有本分的重任提供高效、稳定和纯粹的页面。

SVG 和图片

Perfmonkey

PerfMonkey 让追踪页面的渲染性能变得格外容易。

ImageOptim

ImageOptim
是一个免费的施用,它在回落图片体积、提高加载速度的还要,还不会捐躯图片质料。它优化了削减参数、移除了不算的头音信和非需要的水彩配置新闻。

亚洲必赢官网 38

它也足以被并入到 Grunt 和 Gulp 中。

SVG 和图片

SVGO

SVG Optimizer 是一个根据 Nodejs 的 SVG 矢量图形优化工具。

一旦您要求的是相互界面的操作,而不是
CLI,那么可以下载这几个 APP。

ImageOptim

ImageOptim
是一个免费的施用,它在裁减图片体积、升高加载速度的同时,还不会就义图片质地。它优化了滑坡参数、移除了不算的头音信和非要求的颜色配置音信。

亚洲必赢官网 39

image

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

SVGOMG

SVGOMG 是 SVGO’s Missing GUI 的缩写,意在揭发 SVG
文件的紧要性问题,而不抱有 SVGO 的总体可布置项。

亚洲必赢官网 40

SVGO

SVG Optimizer 是一个按照 Nodejs 的 SVG 矢量图形优化工具。

如果您需求的是并行界面的操作,而不是 CLI,那么能够下载那个
APP。

手动优化 SVGs

看似于其余的图形文件,SVG 也应该在上线前被优化。即使有不可胜举类似 雷蒙德(Mond)(Raymond)的工具得以帮你做那种优化,但最好的法门照旧深深理解其细节并做一些手动的优化。

SVGOMG

SVGOMG 是 SVGO’s Missing GUI 的缩写,意在揭发 SVG
文件的基本点问题,而不持有 SVGO 的总体可配置项。

亚洲必赢官网 41

image

Triamge

Triamge 是一个扩平台的 GUI 和 CLI
工具,用于优化网站的图片文件。它整合使用 optipng、pngcrush、advpng 和
jpegoptim,并根据文件类型做优化(最新版本中,已经辅助 PNG 和 JPG)。

亚洲必赢官网 42

手动优化 SVGs

恍如于别的的图形文件,SVG 也理应在上线前被优化。就算有广大好像 Raymond的工具得以帮你做那种优化,但最好的法门如故深入精晓其细节并做一些手动的优化。

CSS

Triamge

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

亚洲必赢官网 43

image

CSS Triggers

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

亚洲必赢官网 44

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

CSS

CSS Stats

该网页应用以可视化的款式体现了开发者项目中关于 CSS 的总括音信。

亚洲必赢官网 45

CSS Triggers

该网站用于展现怎么样 CSS 属性能够影响浏览器的布局、渲染和别的组成操作。

亚洲必赢官网 46

image

更加多关于 CSS-triggers
的音讯,可以点击那里查看。

CSS Shrink

CSS 压缩工具。由于 CSS
是页面渲染的中坚文件,所以必须维持轻巧,便于快捷响应和渲染。

CSS Stats

该网页应用以可视化的款型展示了开发者项目中有关 CSS 的总结新闻。

亚洲必赢官网 47

image

uncss

UnCSS 是一个用以移除脚本中没用 CSS
的工具。它可以核对多个文本,也得以校对由 JavaScript 注入的 CSS。

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

CSS Shrink

CSS 压缩工具。由于 CSS
是页面渲染的主导文件,所以必须有限支撑轻巧,便于快速响应和渲染。

Critical path

领到和组成 HTML 中任重(英文名:)而道远的 CSS。

uncss

UnCSS 是一个用以移除脚本中没用 CSS
的工具。它可以审核多少个文件,也得以核查由 JavaScript 注入的 CSS。

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

HTML

Critical path

领到和重组 HTML 中驷不及舌的 CSS。

HTMLMinifier

HTMLMinifier 是一个莫大可部署、经过完美的测试、基于 JavaScript 的 HTML
压缩工具,并且放置了代码审查类的工具。

HTML

gulp-htmlmin

用于压缩 HTML 的 gulp 插件。

HTMLMinifier

HTMLMinifier 是一个可观可配置、经过周密的测试、基于 JavaScript 的 HTML
压缩工具,并且放置了代码审查类的工具。

grunt-contrib-htmlmin

用来压缩 HTML 的 grunt 插件。

gulp-htmlmin

用于压缩 HTML 的 gulp 插件。

JavaScript

grunt-contrib-htmlmin

用来压缩 HTML 的 grunt 插件。

uglifyjs

JavaScript 解析器、混淆、压缩和美化工具集。

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

JavaScript

您恐怕并不须求某些 jQuery 插件

jQuery
及其附属工具都是非凡完美的项目,使用它们往往使开发工作轻松而又火速。

单向,即使你正在开发一个库,那么您须要思考一下是否真正需求看重于
jQuery。也许你只要求引入几行代码,就可以屏弃引入一个库完结某些职能。若是您的库只是对准于高级浏览器,那么可能直接调用浏览器的嵌入函数就足以兑现相关职能了。

亚洲必赢官网 48

uglifyjs

JavaScript 解析器、混淆、压缩和美化工具集。

它也足以被并入到 Grunt 和 Gulp 中。

推而广之阅读

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

    1 赞 6 收藏
    评论

亚洲必赢官网 49

您也许并不须要某些 jQuery 插件

jQuery
及其直属工具都是充足优良的类型,使用它们往往使支付工作轻松而又高效。

一头,如若您正在开发一个库,那么你需求思想一下是还是不是真的要求借助于
jQuery。也许你只必要引入几行代码,就可以甩掉引入一个库完毕某些职能。如若你的库只是对准于高级浏览器,那么可能平昔调用浏览器的放到函数就可以已毕相关功效了。

亚洲必赢官网 50

image

恢宏阅读

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