快速提升前端性能

JavaScript

JavaScript也会导致render-blocking因此它的加载也应该优化可以使用以下的方法:

  1. 小的内联脚本。
  2. 在文档底部加载外部脚本。
  3. 使用defer属性推迟执行脚本。
  4. 使用async属性异步加载的脚本。

XHTML

<head> <script> // small inline JS </script>
</head> <body> … <script
src=”/path/to/independent-script.js” async> <script
src=”/path/to/parent-script.js” defer> <script
src=”/path/to/dependent-script.js” defer> </body>

1
2
3
4
5
6
7
8
9
10
11
<head>
  <script>
    // small inline JS
  </script>
</head>
<body>
  …
  <script src="/path/to/independent-script.js" async>
  <script src="/path/to/parent-script.js" defer>
  <script src="/path/to/dependent-script.js" defer>
</body>

在解析HTML时 defer推迟下载脚本,一旦页面渲染完成执行脚本。defer支持很不错,但据报道存在不一致和不可靠性,所以最好同时使用defer并把脚本放置在文档底部。

在HTML解析和执行时异步下载脚本文件。这允许多个脚本文件并发下载和执行;然而,他们不能保证在一个特定的顺序加载。如果相互依赖可能需要在这些场景下修改任意脚本。

async支持大不如defer,这就是为什么我选择使用loadJS用来异步加载JS文件的脚本。它支持老式浏览器,同时有一个有用的特性,即根据条件加载脚本。

XHTML

<head> <script> // small inline JS </script>
</head> <body> … <script> // inline loadJS function
loadJS( src, cb ){ .. } // then load your JS
loadJS(“/path/to/script.js”); </script> <script
src=”/path/to/parent-script.js” defer> <script
src=”/path/to/dependent-script.js” defer> </body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<head>
  <script>
    // small inline JS
  </script>
</head>
<body>
  …
  <script>
    // inline loadJS
    function loadJS( src, cb ){ .. }
    // then load your JS
    loadJS("/path/to/script.js");
  </script>
  <script src="/path/to/parent-script.js" defer>
  <script src="/path/to/dependent-script.js" defer>
</body>
其它

其他方法,如启用gzip和缓存、配置SSL和从内容分发网络(CDN)获取资源,可以提高前端性能,但需要一些服务器端支持。

这就是所有内容了,其他还有一些细节以及推荐,可以自己去看一下。希望不算侵权。

资源

这里是丰富的有用资源,让你深入了解网站性能。

2、压缩、优化

现在找到了减少请求的方法,然后就可以开始寻找各种方法来减重。文件越小,加载速度越快。

其它

其他方法,如启用gzip和缓存、配置SSL和从内容分发网络(CDN)获取资源,可以提高前端性能,但需要一些服务器端支持。基于篇幅所限,我不会深入他们。然而我想强调的是,我推荐使用这些方法,他们将会对你的网站性能有一个全面和积极的影响。

我将提到,因为我的网站的访问量百分比相当一部分来自美国以外,而我的服务器是位于纽约,我于是决定把我的一些资源发布到CDN上。他们部署到一个 Amazon
S3
  bucket上,绑定到一个CloudFront版本。

JavaScript

JavaScript也会导致render-blocking,因此它的加载也应该优化。可以使用以下的方法:
小的内联脚本。
在文档底部加载外部脚本。
使用defer属性推迟执行脚本。
使用async属性异步加载的脚本。

图片

图片通常占到一个网站的大头。通常网站平均有1249
KB的图片

我抛弃了图标字体,取而代之的是内联SVG。此外,任何可以矢量化的图片都使用内联SVG替换。我的网站先前版本的一个页面仅仅图标web字体就加载了145KB,同时对于几百个web字体,我只使用了一小部分。相比之下,当前网站的一个页面只加载10KB内联SVG,这可是93%的差异。

SVG
sprites
看起来很有趣,它可能是我在整个网站使用普通内联SVG图标的一个可行的替代解决方案。

在可能的情况下使用CSS代替图片,现在的CSS能做的已经很多了。然而,浏览器兼容性可能是现代CSS使用的一个问题;因此,充分利用 caniuse.com 和逐步改进。

你也可以通过优化图片来压缩字节。有两种方法来优化图片:

  1. 有损压缩:降低图像的质量
  2. 无损压缩:不影响质量

要同时使用两种方法取得最好的效果,顺序是很重要的。首先使用有损图像压缩方法,比如在不超过必要大小的情况下调整图像大小然后在略低质量且不压缩太多的情况下导出如我通常在82
– 92%下导出JPG图片

奥门永利误乐域 1

ImageOptim是OS X下的一个图像优化工具

接下来,使用无损图像优化工具比如 ImageOptim进行处理,从而通过删除不必要的信息,如元数据或颜色配置文件来进一步减少图像文件大小。

文章是这篇
快速提升前端性能

快速提升前端性能

2015/09/26 · HTML5,
JavaScript · 1
评论
·
性能

本文由 伯乐在线
cucr
翻译,唐尤华
校稿。未经许可,禁止转载!
英文出处:Jonathan
Suh
。欢迎加入翻译组

去年,我写了一篇文章Need for
Speed
,分享了在开发我的网站中使用的工作流程和技术(包含工具)。从那时起,我的网站又经过了一次重构,完成了很多工作流程和服务器端改进,同时我对前端性能也给与了额外关注。以下就是我做的工作,为什么我要这么做,以及我在网站上用来优化前端性能的工具。

2、页面渲染

消除render-blocking的JavaScript和CSS。

render-blocking文件增加了浏览器显示内容的时间,因为这些文件需要先下载并处理。多个render-blocking文件需要浏览器使用多个线程去获取和处理它们,等待时间进一步增加。

压缩、优化

现在我找到了减少请求的方法,我开始寻找各种方法来减重。文件越小,加载速度越快。通常平均的页面大小为1950KB。按照内容分类:

图片:1249KB HTML:58KB CSS:60KB JS:303KB 字体:87KB Flash:67KB
其它:126KB

我使用这些数据作为参考和比较的起点,同时找到我可以用来为网站减负的方法。 我的网站耗费的流量有多少?是一个由Tim
Kadlec
编写的很棒的工具,可以用来帮助你测试和可视化,来自世界各地的访问在你的网站上消耗的流量。

CSS

默认情况下,浏览器将CSS作为渲染阻塞;因此,当它加载时,浏览器暂停渲染,等待CSS已经被下载和处理。外部样式表意味着更多的网络线程,它增加了等待时间,同时大型样式表也会增加等待时间。
我们可以通过在<head>标签内联“关键CSS”来改善页面渲染时间,这样浏览器可以~~~~不用再等待下载整个样式表,就可以快速地渲染页面内容,然后通过non-rendering-blocking方式加载完整的样式表。

确定哪些CSS是关键需要
(1)查看移动或桌面下页面视口(viewport )大小
(2)识别视口中可见的元素
(3)选择这些元素关联的CSS

CSS和JavaScript

压缩样式表和JavaScript文件可以明显减少文件大小,我仅在压缩上就从一个文件上节省了56%的空间。

压缩前 压缩后 节省比例
CSS 135KB 104KB 23.0%
JS 16KB 7KB 56.3%

我使用 BEM (代码、元素、修饰符)
方法论
编写CSS,这将导致冗长的类名。重构我的一些代码变得更简短(“navigation”为
“nav”, “introduction” 为
“intro”),这让我节省了一些空间,但和我期望的后期压缩相比并不是那么明显。

冗长的类 精简后 节省比例
104KB 97KB 6.7%

我也重新评估了使用jQuery的必要性。对于压缩的135KB的JavaScript,大约96KB是jQuery库——71%之多!这里并没有很多需要依赖于jQuery,所以我花时间重构了代码。我通过剥离jQuery和在Vanilla重写它,去除了122KB,最终压缩后的文件大小减少到13KB。

jQuery Vanilla JS 节省比例
135KB 13KB 122KB (90%)

从那时起,我设法去掉更多空间(压缩后7KB),最后脚本在压缩和gzipped后只有0.365KB。

今天看的是之前保存的一篇前端优化的相关文章。但是人家写了禁止转载,我这边学习的话就不抄太多东西了。

发表评论

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