怎么着是非同一般,Web开发的各样性能工具

值得珍藏!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
休谟解释了一个简易的格局来成功它。假如你是经验丰盛的网页开发人士,您可能会意识那篇小说总之,并且明确,但对于你的客户和低级开发人士来说,那是一个很好的精选。—
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
休谟(Hume)解释了一个简便的办法来成功它。倘若您是经验丰裕的网页开发人士,您或许会发觉那篇小说总之,并且明确,但对此你的客户和初级开发人士来说,那是一个很好的选用。—
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 当前就在使用 马克斯(Max)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介绍
  • 预加载,有啥便宜?
  • 前者性能检查表

假使自己想连忙增加网站的习性, 谷歌(Google)的 PageSpeed
Insights
工具是自己的首选。 当尝试检测网页并找到需要改正的区域时,那相当实惠。
您只需输入要测试的页面的URL,该工具就会提供一多样性能提出。

如若您曾经通过PageSpeed
Insights工具运行自己的网站,您或许会遇见以下指出。

美高梅开户网址 4

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

自己必须认可,我先是次看到那个时有点困惑。 该提出的内容如下:

“若是以下资源未下载达成,您的页面上的此外内容都不会被渲染。
尝试推迟或异步加载阻塞资源,或直接在HTML中内联嵌入那些资源的显要部分。“

万幸的是,解决那几个题材比看起来更简明!
答案在于CSS和JavaScript在您的网页中的加载方式。

CloudFront

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

亚马逊 CloudFront
是一个情节分发网络服务。它可以无缝融合入其余的亚马逊(亚马逊(Amazon))网络服务产品,为开发者和店铺分发内容到最后用户手中提供了一种简易的方法,整个进度都享有低顺延、高转换速度的风味,也尚无最小使用量的强制要求。

MaxCDN

CSS-Tricks 当前就在行使 马克斯CDN 托管所有的静态资源。它可以无缝地融合
WordPres 和 W3
的装有缓存资源,所以大家无需做什么样越发处理,即可将资源移入
CDN,并能有限支撑链接的准确性。

美高梅开户网址 5

对于一个博客来说,考虑到内部的大文件器重是 JavaScript、CSS
和图表,而不是录像等品种,这带宽占用的可真多。

俺们的 CDN
服务一样是一个网站加快器和实时控制宗旨。创造它,就是为了让网站的用户和运维都能从下一代
CDN 中获取最大受益。

开始

我们先从Node.js控制台先导,并导航到您的网站的路径。
通过在你的控制德雷斯顿输入以下命令来安装Grunt命令行界面:

怎么着是非同一般,Web开发的各样性能工具。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,
一个无头Web基特(Kit)浏览器,捕获所需的紧要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,
一个无头Web基特浏览器,捕获所需的主要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的做事原理及是不是适用于你的网页,那点很要紧。 我爱好盖伊(Guy)Podjarny对此的立足点:

“固然有那一个限制,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的总编维达ly Friedman写了一篇关于Smashing
Magazine怎样创新表现的稿子 improved the
performance
。即使你想了然关于渲染路径的越来越多消息,那么在Udacity网站上得以免费应用
一个可行的科目。 Google
Developers
website
也有关于
优化CSS传输的始末。
帕特·里克(Pat·rick) 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的总编辑维·达(Vi·ta)ly Friedman写了一篇有关Smashing
Magazine怎么着改进表现的稿子 improved the
performance
。倘若您想了然有关渲染路径的愈来愈多音讯,那么在Udacity网站上得以免费应用
一个卓有功效的学科。 Google
Developers
website
也有关于
优化CSS传输的始末。
帕特·里克(Pat·rick) 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 结合了 谷歌 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。

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

美高梅开户网址 32

Network
面板以动态的方法实时地显示了资源的请求和下载。尽管辨析和稳定那么些请求会比纯粹的加载页面多花一些时刻,但这么些消耗对于指点页面的属性优化是格外重大的。

美高梅开户网址 33

浏览器工具盒插件

火狐开发者浏览器

该浏览器是为开发者而创制的,专注于服务开发者的工作流。那是常有首次,将构建、测试和伸张等劳动集中于一体。

越来越多信息请查看 MDN 上的 Network
Monitor。

Chrome 开发者工具

在 Chrome
的开发者工具中,对于评估性能有四个万分有效的竹签:Audits

Network。

奥迪(Audi)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)的工具得以帮你做这种优化,但最好的点子如故深远了然其细节并做一些手动的优化。

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地图