你的位置:编辑出版网 >> 资讯 >> 专业工具 >> 正文 投稿

一份权威的网站前端性能指南

2013-4-24 12:33 |  编辑出版网  | nihao

Geek #17

一大群为大型站点工作的专家们,能够一起建立一份权威的前端性能指南吗?

Briza Bueno (Americanas.com), Davidson Fellipe (Globo.com), Giovanni Keppelen (ex-Peixe Urbano), Jaydson Gomes (Terra), Marcel Duran (Twitter), Mike Taylor (Opera), Renato Mangini (Google), and Sérgio Lopes (Caelum)有没有可能一起出一份权威的参考呢?

这正是我们所做的!我们会引导你创造更快的网站。

Zeno Rocha, project lead.

性能真的很重要吗? ∞

你当然知道它很重要。所以为什么我们还要做出速度很慢的网站,给用户一个糟糕的体验呢?这是一份由社区驱动的实用指南,它能帮助你让你的网站更快。我们没有必要再浪费时间来列举大量需要优化性能的场景了,让我们直接进入重点!

HTML

避免 内联式/嵌入式 代码 ∞

你可以通过三种方式在HTML页面中引入CSS或Javascript代码:

1) 内联式: 在HTML标签的style属性中定义样式,在onclick这样的属性中定义Javascript代码;

2) 嵌入式: 在页面中使用<style>标签定义样式,使用<script>标签定义Javascript代码;

3) 引用外部文件:<style>标签中定义href属性引用CSS文件,在<script>标签中定义src属性引入Javascript文件.

尽管前两种方式减少了HTTP请求数,可是实际上却增加了HTML文档的体积。不过,当你的页面中的CSS或者Javascript代码足够少,反而是开启一个HTTP请求的花费要更大时,采用这两种方式却是最有用的。因此,你需要测试评估这种方式是否真的提升了速度。同时也要考虑到你的页面的目标和它的受众:如果你期望人们只会访问它一次,例如对一些临时活动来说,你决不会期望有回访客出现,那么使用内联式/嵌入式代码能够帮助减少HTTP请求数。

> 尽量避免在你的HTML中手工编写CSS/JS(首选的方法是通过工具实现这个过程的自动化)。

第三种方式不仅使你的代码更有序,而且使得浏览器能够缓存它。这种方式在大多数的情况下都是首选,特别是一些大文件和多页面的情况。

> 小工具 / 参考

样式在上,脚本在下 ∞

当我们把样式放在<head>标签中时,浏览器在渲染页面时就能尽早的知道每个标签的样式,我们的用户就会感觉这个页面加载的很快。

<head>
  <meta charset="UTF-8">
  <title>Browser Diet</title>
  <!-- CSS -->
  <link rel="stylesheet" href="style.css" media="all">
</head>

但是如果我们将样式放在页面的结尾,浏览器在渲染页面时就无法知道每个标签的样式,直到CSS被下载执行后。

Geek #32

另一方面,对于Javascript来说,因为它在执行过程中会阻塞页面的渲染,所以我们要把它放在页面的结尾。

<body>
  <p>Lorem ipsum dolor sit amet.</p>
  <!-- JS -->
  <script src="script.js"></script>
</body>

> 参考

压缩你的HTML ∞

为了保持代码的可读性,最好的方法是在代码中添加注释和使用缩进。
<p>Lorem ipsum dolor sit amet.</p>
<!-- My List -->
<ul>
  <li><a href="#"></a></li>
  <li><a href="#"></a></li>
  <li><a href="#"></a></li>
</ul>

但是对于浏览器来说,这些都是不重要的。正因为如此,通过自动化工具压缩你的HTML是非常有用的。

<p>Lorem ipsum dolor sit amet.</p><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>
HTML Compression Sample Results

通过移除多余的空白符、注释和一些与内容结构无关的的不需要的字符,能够节省一些字节。

结果就是,你的用户能够享受到更快的下载、解析和执行。

右边的列表是一些例子,展示的是使用 HTML Compressor 之后的结果,全都使用的是默认设置。

> 小工具 / 参考

尝试async ∞

为了解释这个属性对于性能优化是多么有用,我们应该先明白,当不使用它时会发生什么。

Geek #20
<script src="example.js"></script>

使用上面这种方式时,页面会在这个脚本文件被完全下载、解析、执行完后才去渲染之后的HTML,在这之前会一直处于阻塞状态。这就意味着会增加你的页面的加载时间。有时这种行为是我们希望的,而大多数时候则不想要。

<script async src="example.js"></script>

使用上面这种方式时,脚本的加载是异步的,不会影响到这之后的页面解析。脚本会在下载完之后立即执行。需要注意的是,如果有多个使用这种方式异步加载的脚本,他们是没有特定的执行顺序的。

> 参考

CSS

压缩你的样式表 ∞

为了保持代码的可读性,最好的方法是在代码中添加注释和使用缩进:

.center {
  width: 960px;
  margin: 0 auto;
}
/* --- Structure --- */
.intro {
  margin: 100px;
  position: relative;
}

但是对于浏览器来说,这些都是不重要的。正因为如此,通过自动化工具压缩你的CSS是非常有用的。

.center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}

这样做能够减小文件的大小,从而得到更快的下载、解析和执行。

对于使用预处理器例如 Sass, Less, and Stylus, 你可以通过配置缩小编译输出的CSS代码。

> 小工具 / 参考

合并多个CSS文件 ∞

对于样式的组织和维护,另一个好方法是将他们模块化。

Geek #9
<link rel="stylesheet" href="structure.css" media="all">
<link rel="stylesheet" href="banner.css" media="all">
<link rel="stylesheet" href="layout.css" media="all">
<link rel="stylesheet" href="component.css" media="all">
<link rel="stylesheet" href="plugin.css" media="all">

然而,这样每个文件就是一个HTTP请求(我们都知道,浏览器的并行下载数是有限的)。

<link rel="stylesheet" href="main.css" media="all">

所以,合并你的CSS文件。文件数量的减少就会带来请求数量的减少和更快的页面加载速度。

Want to have the best of both worlds? Automate this process through a build tool.

> 小工具 / 参考

使用 <link> 标签而不是 @import ∞

有两种方式可以引入一个外部的样式表:通过 <link> 标签:

<link rel="stylesheet" href="style.css">

或者通过 @import 指令 (使用在一个外部样式表中或者页面内嵌的 <style> 标签中):

@import url('style.css');

当你在一个外部样式表中使用第二种方式时,浏览器无法通过并行下载的方式下载这个资源,这样就会导致其他资源的下载被阻塞。

> 参考

JavaScript

异步加载第三方内容 ∞

嵌入一个Youtube视频或者一个like/tweet按钮,有人没有加载过这样的第三方内容吗?

Geek #46

问题在于,不管是用户端的还是服务器端的连接,都无法保证这些代码是正常有效的工作的。这些服务有可能临时dowan掉或者是被用户或者其公司的防火墙阻止。

为了避免这些在页面加载时成为问题,或者更严重的是,阻塞了全部页面的加载,总是应该异步加载这些代码 (或者使用 Friendly iFrames).

var script = document.createElement('script'),
    scripts = document.getElementsByTagName('script')[0];
script.async = true;
script.src = url;
scripts.parentNode.insertBefore(script, scripts);

另外,如果你想加载多个第三方插件,你可以使用这个代码来实现异步的加载。

> 视频 / 参考

缓存数组长度 ∞

循环无疑是和Javascript性能非常相关的一部分。试着优化循环的逻辑,从而让每次循环更加的高效。

要做到这一点,方法之一是存储数组的长度,这样的话,在每次循环时都不用重新计算。

var arr = new Array(1000),
    len, i;
for (i = 0; i < arr.length; i++) {
  // Bad - size needs to be recalculated 1000 times
}
for (i = 0, len = arr.length; i < len; i++) {
  // Good - size is calculated only 1 time and then stored
}

> Results on JSPerf

> 注解: 虽然现代浏览器引擎会自动优化这个过程,但是不要忘记还有旧的浏览器

在迭代document.getElementsByTagName('a')等类似方法生成的HTML节点数组(NodeList)时,缓存数组长度尤为关键。这些集合通常被认为是“活的”,也就是说,当他们所对应的元素发生变化时,他们会被自动更新。

var links = document.getElementsByTagName('a'),
    len, i;
for (i = 0; i < links.length; i++) {
  // Bad - each iteration the list of links will be recalculated to see if there was a change
}
for (i = 0, len = links.length; i < len; i++) {
  // Good - the list size is first obtained and stored, then compared each iteration
}
// Terrible: infinite loop example
for (i = 0; i < links.length; i++) {
  document.body.appendChild(document.createElement('a'));
  // each iteration the list of links increases, never satisfying the termination condition of the loop
  // this would not happen if the size of the list was stored and used as a condition
}

> 参考

避免使用document.write ∞

The use of document.write causes a dependency to the page on its return to be fully loaded.

这个(坏)方法已经被开发者抛弃了很多年, 但是在某些情况下仍然是需要的,例如在一些Javascript文件的同步回退中。

举例来说,如果发现Google的CDN没有响应,HTML5 Boilerplate则会通过这个方法来调用本地的jQuery库。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.9.0.min.js"><\/script>')</script>

> 注意: 如果在window.onload事件中或之后执行document.write方法,会将当前页面替换掉。

<span>foo</span>
<script>
  window.onload = function() {
    document.write('<span>bar</span>');
  };
</script>

这段代码执行后的结果是页面中只会呈现出bar字符,而不是期望的出现foobar。在window.onload事件之后执行也是同样的结果。

<span>foo</span>
<script>
  setTimeout(function() {
    document.write('<span>bar</span>');
  }, 1000);
  window.onload = function() {
    // ...
  };
</script>

这段代码执行的结果和上一段代码的结果相同。

> 参考

最小化重绘和回流 ∞

当有任何属性或元素发生改变时,都会引起DOM元素的重绘和回流。

当一个元素的布局不变,外观发生改变时,就会引起重绘。Nicole Sullivan描述这个就像是样式的改变,例如改变background-color

回流的代价是最高的,当改变一个页面的布局时就会发生回流,例如改变一个元素的宽。

毫无疑问,应当避免过多的重绘和回流,所以,对于下面的代码:

Geek #55
var div = document.getElementById("to-measure"),
    lis = document.getElementsByTagName('li'),
    i, len;
for (i = 0, len = lis.length; i < len; i++) {
  lis[i].style.width = div.offsetWidth + 'px';
}

应当变为:

var div = document.getElementById("to-measure"),
    lis = document.getElementsByTagName('li'),
    widthToSet = div.offsetWidth,
    i, len;
for (i = 0, len = lis.length; i < len; i++) {
  lis[i].style.width = widthToSet + 'px';
}

当你设置style.width时,浏览器需要重新计算布局。通常,浏览器暂时是不需要知道改变了元素的样式的,直到它需要更新屏幕时,正因为如此,改变多个元素的样式只会产生一次回流。然而,在第一个例子中,我们每次请求offsetWidth时,都会使浏览器重新计算布局。

如果需要得到页面中的布局数据,那么请参照第二个例子,将这些操作放在任何会改变布局的设置前。

> 示例 / 参考

避免不必要的DOM操作 ∞

当你获得DOM而又什么都不做时,这简直就是在杀死宝贵的生命。

说真的,浏览器遍历DOM元素的代价是昂贵的。虽然Javascript引擎变得越来越强大,越来越快速,但是还是应该最大化的优化查询DOM树的操作。

最简单的替代方案就是,当一个元素会出现多次时,将它保存在一个变量中,这样的话你就没必要每次都去查询DOM树了。

// really bad!
for (var i = 0; i < 100; i++) {
  document.getElementById("myList").innerHTML += "<span>" + i + "</span>";
}
// much better :)
var myList = "";
for (var i = 0; i < 100; i++) {
  myList += "<span>" + i + "</span>";
}
document.getElementById("myList").innerHTML = myList;

> Results on JSPerf

压缩你的脚本 ∞

和CSS一样,为了保持代码的可读性,最好的方法是在代码中添加注释和使用缩进:

BrowserDiet.app = function() {
  var foo = true;
  return {
    bar: function() {
      // do something
    }
  };
};

但是对于浏览器来说,这些都是不重要的。正因为如此,请记住用自动化工具压缩你的Javascript代码。

BrowserDiet.app=function(){var a=!0;return{bar:function(){}}}

这样做能够减小文件的大小,从而得到更快的下载、解析和执行。

> 小工具 / 参考

将多个JS文件合并 ∞

对于脚本的组织和维护,另一个好方法是将他们模块化。

Geek #47
<script src="navbar.js"></script>
<script src="component.js"></script>
<script src="page.js"></script>
<script src="framework.js"></script>
<script src="plugin.js"></script>

然而,这样每个文件就是一个HTTP请求(我们都知道,浏览器的并行下载数是有限的)。

<script src="main.js"></script>

所以,合并你的JS文件。文件数量的减少就会带来请求数量的减少和更快的页面加载速度。

想要两全其美?通过构建工具自动化这个过程吧。

> 小工具 / 参考

jQuery

总是使用最新版本jQuery ∞

jQuery的核心团队通过改进代码的可读性、加入新的函数和优化现有的算法,不停地改进着这个库。

Geek #36

正因为如此,请总是使用最新版本的jQuery。访问下面的地址,你总会得到最新的jQuery。

http://code.jquery.com/jquery-latest.js

但是 绝对 不要在一个<script>标签中引用这个地址,因为通过这个地址得到的总是最新的版本代码,所以如果你没有测试过,可能会造成一些问题。正确的做法是,你需要指明引用的jQuery的版本。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

英明的Barney Stinson说过, "New is always better" :P

> 参考

使用for,而不是each ∞

原生Javascript中的函数执行几乎总是要比jQuery快一些。正因为如此,请使用Javascript的for循环,不要使用jQuery.each方法。

但是请注意,虽然for in是原生的,可是在许多情况下,它的性能要比jQuery.each差一些。

for循环迭代时,请记得缓存集合的长度。

for ( var i = 0, len = a.length; i < len; i++ ) {
    e = a[i];
}

在社区中,关于whilefor循环的反向使用问题是一个热门话题,而这经常被认为是最快的迭代方式。然而实际上,这通常只是为了防止循环不够清晰。

> Results on JSPerf / 参考

不要使用jQuery... ∞

...除非它是必需的。 :)

有时vanilla JavaScript要比jQuery简单一些。

Geek #6

使用attr()方法来查询ID:

$('a').on('click', function() {
  console.log( $(this).attr('id') );
});

如果你能通过this的本身属性获得,还需要上面的方法吗?

$('a').on('click', function() {
  console.log( this.id );
});

而且这样还更快。

> Results on JSPerf / 参考

Images

使用CSS Sprites ∞

这个技术就是将各种图片整合到一个文件中去。

CSS Sprite Example

然后通过CSS去定位它们。

.icon-foo {
  background-image: url('mySprite.png');
  background-position: -10px -10px;
}
.icon-bar {
  background-image: url('mySprite.png');
  background-position: -5px -5px;
}

这么做的结果就是,减少了HTTP请求数,避免延迟页面上的其他资源。

在使用sprite时,应当避免在每个图片之间的空隙过大。这个虽然不会影响到文件的大小,但是会影响到内存的消耗。

尽管每个人都知道sprites,但是这种技术并没有被广泛使用—或许是由于开发者没有使用自动化工具去生成。 我们着重介绍了一些工具,或许可以帮到你。

> 小工具 / 参考

Data URI ∞

这种技术是CSS Sprites的替代方法。

Data-URI是指使用图片的数据代替通常使用的图片URI,在下面的例子中,我们就使用它减少了HTTP请求数。

使用前:

.icon-foo {
  background-image: url('foo.png');
}

使用后:

.icon-foo {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAACnej3aAAAAAXRSTlMAQObYZgAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII%3D');
}

所有的现代浏览器和IE8及以上版本的IE都支持这个方法,图片需要使用base64方法编码。

这种技术和CSS Sprites技术都是可以使用构建工具得到的。使用构建工具的好处是不用手工去进行图片的拼合替换,在开发时使用单独的文件就可以。

然而坏处是,随着你的HTML/CSS文件的增大增多,你必须考虑你可能会有一个非常大的图片。如果你在HTTP请求中没有使用gzip技术压缩你的HTML/CSS,那么我们不推荐使用这种方法,因为减少HTTP请求数得到的大文件对于速度来说可能带来相反的结果。

> 小工具 / 参考

不要在 <img> 标签中调整图像 ∞

总是在img标签中设置widthheight属性。这样可以防止渲染过程中的重绘和回流。

<img width="100" height="100" src="logo.jpg" alt="Logo">

知道这个之后,一个开发者将一个700x700px的图像设置为50x50px来显示。

但是这个开发者不知道的是,大量的没有用的数据也发送到了客户端。

所以请记住:你可以在标签中设置一个图片的寬高,但不意味着你应该通过这么做来改变图片。

> 参考

优化你的图片。 ∞

图片文件中包含许多对于Web来说没有用的东西。举例来说,一个JPEG图片中可能包含一些Exif元数据(数据,相机型号,坐标等等)。一个PNG图片会包含有关颜色,元数据的信息,有时甚至还包含一个缩略图。这些只会增加文件的大小,而对于浏览器来说却毫无用处。

有很多工具能够帮你从图片中去除这些信息,并且不会降低图片的质量。我们把这个称做无损压缩。

另一种优化图片的方式是,以图片质量为代价进行压缩。我们称之为有损压缩。举例来说,当你到处一个JPEG图片时,你可以选择导出的图片质量(从0到100)。考虑到性能,总是选择可接受范围内的最低值。在PNG图片中,另一个常见的有损技术是减少颜色数量,或者将PNG-24格式转换为PNG-8格式。

为了提升用户的体验,你还应该将你的JPEG文件转换为渐进式的。现在大多数的浏览器都支持渐进式JPEG文件,并且这种格式的文件创建简单,没有明显的性能损失问题。页面中的这种格式的图片能够更快的展现(see demo).

> 小工具 / 参考

Server

启用缓存 ∞

优化页面请求的最好的方法就是不要发送请求。避免不必要的请求最有效的方法之一就是让浏览器缓存资源。浏览器会默认决定缓存一个文件多久。但是我们能够控制这个缓存时间。

Geek #15

这个配置是在服务器上设置的。以Apache为例,你可以将下面的配置添加到.htaccess文件中:

ExpiresActive On
ExpiresByType image/gif "access plus 6 months"
ExpiresByType image/jpeg "access plus 6 months"
ExpiresByType image/png "access plus 6 months"
ExpiresByType text/css "access plus 6 months"
ExpiresByType text/javascript "access plus 6 months"
ExpiresByType application/javascript "access plus 6 months"

这些配置设置图片、CSS和JS文件的缓存时间为6个月—推荐设置为最少一个月。其他服务器的设置类似。

需要牢记的一个事情时,一旦被浏览器缓存,那么这段时间内就不会去请求新的文件。如果我们改变了文件内容,浏览器使用的可能仍然是旧的文件。那么为了使用新的版本,我们需要改变这个文件的文件名。这么做的一种方法是在文件名中添加一些版本控制或时间戳的标记。举例来说,我们将home.js命名为home-v1.js,当需要更新版本时,将文件名改为home-v2.js等等.

另一种常见的做法是在文件URL中添加GET请求参数:类似home.js?v=1home.js?v=2。这种做法与改变文件名的方法相比,缺点是有些代理服务器可能会忽略GET请求参数,这样的话你就没办法破坏浏览器的缓存了。

> 参数

GZIP ∞

在一个网站中,站百分比最多的内容就是简单的文本(HTML, CSS, JavaScript, JSON, XML等)。对于这种内容来说,最好的实践就是在服务器端开启GZIP压缩。

在服务器发送数据前,使用GZIP进行压缩,然后再进行传输,当浏览器接收到数据后会进行解压缩。就像是给某人发文件前,先使用压缩来让文件变得更小。所有的现代浏览器和服务器都支持GZIP。

同样是需要在服务器上进行相应的设置。以Apache为例,你可以将下面的配置加入.htaccess文件中:

AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/javascript

所有当前流行的服务器都很容易设置(请查阅你的文档!)。这对提升页面性能来说是一个最有用的技巧。

> 参考

Bonus

诊断工具:你最好的朋友 ∞

Geek #43

如果你想知道这个世界上的Web性能,那么你一定要给你的浏览器安装YSlowPageSpeed—从现在起,它们将是你最好的朋友。

或者你可以选择使用在线工具,访问WebPageTest, HTTP Archive或者PageSpeed

不管是哪种方式,都可以对你的网站的性能进行分析,并且给出分析报告,还可以对潜在的问题给出建议。

That's it for today! ∞

Geek #31

我们希望,在阅读了这篇指南之后,你就能够对你的网站进行瘦身了。:)

同时请记住,和生活中其他事情一样,没有所谓的银弹。虽然优化你的应用的性能是值得的,但是这不应该作为你决定开发策略的唯一基础—偶尔你需要平衡下成本和收益。

想要了解更多?查看参考,这篇指南就是依据它写出来的。

有什么建议吗?你可以给@BrowserDiet发一个tweet或者在Github上发一个pull request

别忘了向你的朋友推荐,让我们一起使Web变得更快。

请关注编辑出版网 >资讯 >专业工具 ,你懂的
打印 | 收藏 |  推荐给好友
上一篇:Adobe Flash Player 下一篇:20大数据可视化工具点评
收藏关注编辑出版网社会热点转载,这里有你懂的

宣传