让网站提速的最佳前端实践

前端工程师经常被提起网站性能，如何让网站访问更快等问题，本文就作个总结。

最少化HTTP请求

用户在浏览网页时，超过80%的时间都是在请求下载网页资源，包括图片，样式，脚本，Flash等等，减小这些资源的下载请求数目，便成了让网页提速的关键。
固然，若是页面很简单，资源少，网页请求天然就少，若是网页内容不少，咱们如何作到减小资源请求数呢？这里有几个方法：

1. 合并静态文件，将全部脚本、样式文件合并到一个文件里，能够大大减小HTTP请求数。但若是每一个页面的静态文件都不同，全部文件都合并到一块儿也会带来麻烦，因此须要在开发过程当中均衡处理合并。

2. CSS雪碧图（Sprites），将CSS中用到的背景图片合并到一张图片上，而后经过background-position去定位想用到的图片块，能够减小图片请求数。

3. 使用data: URL scheme将图片数据写入到HTML或CSS文件中，虽然增长了HTML或CSS文件大小，但必要时，仍是须要这么作来减小HTTP请求数。

将CSS文件放在头部

当页面内容不少时，咱们但愿边加载边正确的显示给用户，你可能想把CSS文件放到页面底部，这样就能够优先展现用户内容，但这会引发一个严重的问题，用户先看到的是一个没有样式的页面，以后闪一下（页面重绘）又从新定义了样式，这其实很影响用户体验。而最好的作法就是遵循HTML规范，把CSS文件放到文档的HEAD标签里。

将JS文件放在底部

JS脚本所引发的问题是阻塞了浏览器的并行下载，HTTP/1.1规范指出：每一个域名下的资源的并行下载数量不得超过两个，当浏览器在下载JS文件时，不会进行其余下载，即便资源被分发在不一样的域名。

避免CSS表达式

若是要动态设置CSS属性，CSS表达式（CSS expressions）就显得尤为强（wei）大（xian），它在IE5.0中开始被支持，但又在IE8.0中被废弃。好比如下样式，背景色会在每一个小时都被定义一次。

background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" );

能够看粗，expression方法接受一个Js语句去设置CSS属性值，它只能被IE识别，因此在跨浏览器开发时（兼容IE），它就有了用武之地。

可是它的问题在于它执行的很是频繁，网页渲染时执行，窗口改变时执行，甚至页面滚动时、用户移动鼠标时它都会执行！

减小CSS表达式执行次数的方法是：当页面渲染完成后就给CSS属性设定一个明确的值，或者在Js中监听网页事件，事件触发时再去设置CSS属性值。若是必定要使用CSS表达式，请记住，它极可能会被执行成千上万次。

外链CSS和JS文件

之因此外链CSS和JS文件会使页面更快，是由于它们能够被浏览器缓存，不然每次请求HTML文档时都会重复下载CSS和JS代码，虽然内联CSS和JS能够减小HTTP请求数，可是使得HTML文档更大。

若是页面比较简单，JS和CSS都不多，使用内联代码减小HTTP请求，反而会让页面更快。

压缩静态文件

市面上的压缩工具备不少，好比JSmin， YUI Compressor，GCC，pngcrush等等，能够根据业务须要选择工具去压缩静态文件。

Ajax中优先选择GET请求

使用XMLHttpRequest对象进行POST请求时，咱们发现，它实际上是分为两步完成，现发送请求头信息，再发送请求数据，因此最好使用GET请求，只须要发送一个TCP数据包（除非有不少Cookie数据），并且GET请求的数据能够被缓存。但须要提的是，IE中对GET请求的URL长度限制在2K字节之内(参考support.microsoft.com)，因此若是URL超过这个长度，只能使用POST请求。

延迟加载

开发过程当中，想一想这个元素或脚本是否是页面初始化所必须的，若是不是，就能够考虑延迟加载它们，好比默认被折叠的元素、须要用户触发才须要显示的元素以及首屏以后的页面元素等等。

预加载

预加载看上去和上条矛盾，其实否则。当浏览器处于空闲时，咱们能够预先加载以后会使用到的页面的元素（好比：图片，JS，CSS），以后页面再使用这些元素时会优先从缓存中读取。预加载分为这两种形式：

1. 无条件预加载(Unconditional)：页面一旦加载完成就去下载额外的元素，而这个元素并不必定在这个页面上被使用，好比Google首页加载了一张背景图，这是为了搜索结果页所准备的。
2. 条件预加载(Conditional)：这是基于用户行为作出下一步猜想而去加载元素，好比当你输入文字时会根据文字去下载不一样元素。

减小DOM数

若是一个页面太复杂，意味着下载时间更长，同时JS访问DOM的速度也会变慢。减小DOM数并不意味着须要移除内容，而是咱们可使用更合理的HTML标签。还在使用Table布局？页面一堆DIV标签，也许咱们有更好更语义化的布局方法。

想知道页面的DOM数量很简单，只须要一行JS语句：

document.getElementsByTagName('*').length

多域名分发内容

使用多域名分发内容能够能够增长浏览器并行下载数，因为DNS解析也要耗时，通常2-4个域名比较合适。好比你能够把HTML或JSP，PHP等文档文件放在www.example.org这个域名上，而把静态文件放在static1.example.or或者static2.example.org上。

减小iframe的使用

iframe可让HTML文档嵌套在另外一个HTML文档内，想要更好的使用它们就必须知道它们的工做原理。

iframe优势：
* 延迟加载广告等第三方内容
* 提供安全沙箱
* 并行下载脚本

iframe缺点：
* 代价昂贵
* 阻止父级页面的加载
* 非语义化

减少Cookie

Cookie经常被用在身份验证或者存储我的信息，他会经过HTTP头信息在服务端和浏览器之间传输，为了减小HTTP响应时间，咱们有必要减少Cookie。一般有如下几个方法：

1. 清除没必要要的Cookie
2. 尽可能减少Cookie内容的长度
3. 在适当的域中设置Cookie，保证其余子域不受影响
4. 设定合适的Cookie的过时时间

更多关于Cookie的信息能够参考 When the Cookie Crumbles

减小DOM操做

频繁用JS操做DOM的开销很大，咱们能够经过如下几种方式减小这种开销：
1. 缓存获取到的DOM元素
2. 批量处理元素，一次性更新到文档
3. 尽可能避免用JS改变页面布局

更好的事件绑定

当过多的元素被绑定频繁被触发的事件，页面响应会变慢，这时咱们就须要采用事件委托。若是你不须要等待全部图片下载完成，可使用DOMContentLoaded事件来代替onload事件。

使用link而不是@import引入CSS

以前提到过，要将CSS文件放在HEAD标签里，在IE中，@import至关于把CSS文件放到了页面底部，因此最好不用这么使用。

避免使用CSS图片滤镜

在IE7一下，AlphaImageLoader用于解决PNG图片透明问题，若是图片设置了这个属性，当它在下载时，会阻塞浏览器渲染页面，甚至让浏览器卡死，这个问题是很严重。

可缓存的favicon.ico

favicon.ico是网站根目录的一张图片，即使你不在HTML中设置它，浏览器也会发出请求，而且带上Cookie等信息。

想要较少favicon.ico带来的不良影响，须要作到：
1. 文件小，最好在1K一下
2. 在HTTP header中设置适当的过时时间(Expires)

避免空的图片src

空的图片src属性有三种形式：
HTML

<img src="" />

CSS

.class{background:url("")}

JS

var img = new Image();
img.src = "";

这么作各浏览器发出请求状况各有差别，具体以下：
* IE会向页面的目录发出请求；
* Safari和Chrome会向当前页面本身发出请求；
* Firefox 3及一下版本和Safari同样，向当前页面本身发出请求；
* Firefox 4及以上版本和Opera不发出请求；

本文粗译自http://developer.yahoo.com/performance/rules.html，有所删减并加了不少本身的理解。若是有错误或不恰当的地方，欢迎指正。

有些知识点只是粗描淡写，好比静态资源并行下载数、@import各浏览器表现差别等，欢迎在评论中详细讨论。