毫秒必争，前端网页性能最佳实践

你愿意为打开一个网页等待多长时间？我一秒也不愿意等。但是事实上大多数网站在响应速度方面都让人失望。现在越来越多的人开始建立自己的网站，博客，你的网页响应速度如何呢？在这篇文章中我们来介绍一下提高网页性能的最佳实践，以及相应的问题解决方案，让站长或者即将要成为站长的朋友了解如何去测试和提高网站响应速度，对自己的网站更有信心。

最佳实践

最佳实践我们引用的来自yahoo前端性能团队总结的35条黄金定律。原文猛击这里。下面我们分门别类将每条的关键点总结一下。

网页内容

• 减少http请求次数
• 减少DNS查询次数
• 避免页面跳转
• 缓存Ajax
• 延迟加载
• 提前加载
• 减少DOM元素数量
• 根据域名划分内容
• 减少iframe数量
• 避免404

服务器

• 使用CDN
• 添加Expires 或Cache-Control报文头
• Gzip压缩传输文件
• 配置ETags
• 尽早flush输出
• 使用GET Ajax请求
• 避免空的图片src

Cookie

• 减少Cookie大小
• 页面内容使用无cookie域名

CSS

• 将样式表置顶
• 避免CSS表达式
• 用<link>代替@import
• 避免使用Filters

javascript

• 将脚本置底
• 使用外部Javascirpt和CSS文件
• 精简Javascript和CSS
• 去除重复脚本
• 减少DOM访问
• 使用智能事件处理

图片

• 优化图像优化CSS SPRite不要在HTML中缩放图片使用小且可缓存的favicon.ico

移动客户端

• 保持单个内容小于25KB
• 打包组建成符合文档

网页内容

减少http请求次数

80%的响应时间花在下载网页内容(images, stylesheets, javascripts, scripts, Flash等)。减少请求次数是缩短响应时间的关键！可以通过简化页面设计来减少请求次数，但页面内容较多可以采用以下技巧。

1. 捆绑文件: 现在有很多现成的库可以帮你将多个脚本文件捆绑成一个文件，将多个样式表文件捆绑成一个文件，以此来减少文件的下载次数。例如在asp.net中可以使用ScriptManager，asp.net MVC中的Bundling。

2.CSS Sprites: 就是把多个图片拼成一副图片，然后通过CSS来控制在什么地方具体显示这整张图片的什么位置。给大家看个熟悉的Sprites实例。

豆瓣把他的图标集中在一起，然后我们看他如何控制只显示第一个图标的

3.Image Maps：也是将多幅图拼在一起，然后通过坐标来控制显示导航。这里有个经典的例子，选中图片中的某个人就会将你带到不同的链接。

4.Inline images: 通过编码的字符串将图片内嵌到网页文本中。例如下面的inline image的显示效果为一个勾选的checkbox。

图片显示效果如左图

减少DNS查询次数

DNS查询也消耗响应时间，如果我们的网页内容来自各个不同的domain (比如嵌入了开放广告，引用了外部图片或脚本)，那么客户端首次解析这些domain也需要消耗一定的时间。DNS查询结果缓存在本地系统和浏览器中一段时间，所以DNS查询一般是对首次访问响应速度有所影响。下面是我清空本地dns后访问博客园主页dns的查询请求。看少去还不少哦。

避免页面跳转

当客户端收到服务器的跳转回复时，客户端再次根据服务器回复中的location指定的地址再次发送请求，例如以下跳转回复。

      HTTP/1.1 301 Moved Permanently      Location: http://example.com/newuri      Content-Type: text/html

当客户端遇到这种回复的时候，用户只能等待客户端再次发送请求，有的网站甚至会一直跳n次，跳到他想带你去的地方…当然在这个时候用户看不到任何页面内容，只有浏览器的进度条一直在刷新。

缓存Ajax

Ajax可以帮助我们异步的下载网页内容，但是有些网页内容即使是异步的，用户还是在等待它的返回结果，例如ajax的返回是用户联系人的下拉列表。所以我们还是要注意尽量应用以下规则提高ajax的响应速度。

• 添加Expires 或 Cache-Control报文头使回复可以被客户端缓存
• 压缩回复内容
• 减少dns查询
• 精简javascript
• 避免跳转
• 配置Etags

延迟加载

这里讨论延迟加载需要我们知道我们的网页最初加载需要的最小内容集是什么。剩下的内容就可以推到延迟加载的集合中。

Javascript是典型的可以延迟加载内容。一个比较激进的做法是开发网页时先确保网页在没有Javascript的时候也可以基本工作，然后通过延迟加载脚本来完成一些高级的功能。

提前加载

与延迟加载目的相反，提前加载的是为了提前加载接下来网页中访问的资源，下面是提前加载的类型

无条件提前加载：当前网页加载完成后，马上去下载一些其他的内容。例如google会在页面加载成功之后马上去下载一个所有结果中会用到的image sprite。

有条件加载：根据用户的输入推断需要加载的内容，雅虎的示例是search.yahoo.com，

有预期的的加载：这种情况一般发生在网页重新设计时，由于用户经常访问旧网页，本地对旧的网页内容缓存充分从而显得旧网页速度很快，而新的网页内容却没有缓存，设计者可以在旧网页的内容中预先加载一些新网页中可能用到的内容，这样新的网页就会生下来一些需要下载的资源。

减少DOM元素数量

网页中元素过多对网页的加载和脚本的执行都是沉重的负担，500个元素和5000个元素在加载速度上会有很大差别。

想知道你的网页中有多少元素，通过在浏览器中的一条简单命令就可以算出，

document.getElementsByTagName('*').length

多少算是多了呢？雅虎在写这篇文章的时候号称主页只有700多元素，但现在接