前台页面优化全攻略（一）

详见：http://blog.yemou.net/article/query/info/tytfjhfascvhzxcyt212

据调查，网页大小在2013年平均增长了32%，平均达到了1.7M，单独的HTTP请求达到96个。这是令人震惊的数字，而且这只是个平均值，有一半的网站会大于这个值。网站也得了肥胖症，而我们这些开发者就是罪魁祸首。

一个超重的网站会对你产生如下影响：

1. 网站代码越多，用户下载的就越多，加载速度就会越慢。在这个地球上，并不是每个人都能享受20M的宽带，每一个开发者心里都很清楚，用户不愿意等。

2. 众所周知，移动互联网发展迅速，对于2G网络来说，加载1.7M的页面甚至需要一分钟时间。

3. 影响搜索引擎抓取速度将会对网站排名造成很大影响。

4. 对于开发者来说，代码量越大，就越不容易更新和维护。

我猜测今年页面平均代码量会减小，希望事实如我所愿。如今已经有很多人开始关注这个问题，并出现了很多优化的工具，而且这些技术都非常容易上手，不需要花太多时间，也不需要重新开发。

在本文中，我会给大家一些建议。前三个建议实际上不能给网页减肥，但它们仍能有效的加快网页加载速度。

1. 用GZIP格式压缩

gzip是GNUzip的缩写，它是一个GNU自由软件的文件压缩程序。它是Jean-loupGailly和MarkAdler一起开发的。第一次公开发布版本是1992年10月31日发布的版本0.1，1993年2月发布了版本1.0。

我们在Linux中经常会用到后缀为.gz的文件，它们就是GZIP格式的。现今已经成为Internet 上使用非常普遍的一种数据压缩格式，或者说一种文件格式。

HTTP协议上的GZIP编码是一种用来改进WEB应用程序性能的技术。大流量的WEB站点常常使用GZIP压缩技术来让用户感受更快的速度。这一般是指WWW服务器中安装的一个功能，当有人来访问这个服务器中的网站时，服务器中的这个功能就将网页内容压缩后传输到来访的电脑浏览器中显示出来.一般对纯文本内容可压缩到原大小的40%.这样传输就快了，效果就是你点击网址后会很快的显示出来.当然这也会增加服务器的负载. 一般服务器中都安装有这个功能模块的。

根据W3C组织调查，大部分的网站都没有启用压缩功能。 

2. 支持浏览器缓存

如果浏览器支持缓存，我们就不用重复下载网页资源。最简单的设置缓存方法是在响应头中添加相应的内容，包括：Expires header，Last-Modified等。

你可以可以通过配置服务器来自动添加这些属性。比如你在Apache服务器中配置缓存所有的照片一个月:

1. <IfModule mod_expires.c>

2. ExpiresActive On

4. <FilesMatch ".(jpg|jpeg|png|gif|svg)$">

5. ExpiresDefault "access plus 1 month"

6. </FilesMatch>

8. </IfModule>

3. 使用内容分发网络 (CDN)

CDN的全称是Content Delivery Network，即内容分发网络。其目的是通过在现有的Internet中增加一层新的网络架构，将网站的内容发布到最接近用户的网络“边缘”，使用户可以就近取得所需的内容，提高用户访问网站的响应速度。CDN有别于镜像，因为它比镜像更智能，或者可以做这样一个比 喻：CDN=更智能的镜像+缓存+流量导流。因而，CDN可以明显提高Internet网络中信息流动的效率。从技术上全面解决由于网络带宽小、用户访问量大、网点分布不均等问题，提高用户访问网站的响应速度。 

为更好地理解CDN，让我们看一下CDN的工作流程。当用户访问已经加入CDN服务的网站时，首先通过DNS重定向技术确定最接近用户的最佳CDN节点，同时将用户的请求指向该节点。当用户的请求到达指定节点时，CDN的服务器（节点上的高速缓存）负责将用户请求的内容提供给用户。具体流程为: 用户在自己的浏览器中输入要访问的网站的域名，浏览器向本地DNS请求对该域名的解析，本地DNS将请求发到网站的主DNS，主DNS根据一系列的策略确定当时最适当的CDN节点，并将解析的结果（IP地址）发给用户，用户向给定的CDN节点请求相——应网站的内容。

以上三个方法可以有效地加快页面的访问速度，现在我们将对你的代码进行诊断，帮助我们给页面减肥。

4. 删除不需要的资源

当你不再需要一个组件的时候，你应该删掉它的CSS和JavaScript代码，如果这些代码都单独放在一个文件中，那删掉它们也不是难事，但如果已经没有用的代码和其它代码在一个文件中，那你肯定要费不少精力去删掉它们。这个时候你就需要使用第三方的工具来帮你一键解决，比如JSLint, Dust-Me Selectors, CSS Usage, unused-css.com 或是像grunt-uncss一样的构建工具。

5. 通用和最小化CSS

理想情况下，需要一个单独的CSS文件，让每个页面都调用这一个布局，当然，如果你想要支持老版本的IE，你就得多弄一个CSS文件。当你把它们构建到服务器上之前，你应该把代码间所有不必要的格式都删掉。

有很多预处理工具都可以帮你解决这件麻烦事，比如Sass, LESS 和Stylus。

有一些方法可以帮助你直接合并多个CSS文件，在Windows上：

1. copy file1.css+file2.css file.css

在 Mac或Linux上：

1. cat file1.css file2.css > file.css

 你可以把得到的CSS文件再经过在线的CSS压缩工具删除格式化，cssminifier.com, CSS Compressor & Minifier 和CSS Compressor都是很不错的工具。

最后，在head标签中加载所有的CSS，这样浏览器就知道你的页面样式不用多次重绘了。

6. 通用和最小化的JavaScript

平均每个页面加载了18个javascript文件，虽然把像jQuery这样的库文件单独分开非常实用，但是你自己的JavaScript代码应该保持通用和最小化。同样很多第三方的工具可以帮你解决这样事情，比如 YUI Compressor, Closure Compiler 和我最喜欢用的 The JavaScript CompressorRater。简化的JavaScript代码会加快网页的访问速度，减少HTTP请求次数。

最后，最好在HTML的body标签后放置JavaScript引用代码，这样能保证JavaScript代码不影响到其它内容的加载。

7. 使用正确的图片路径

加载错误的图片格式会对你的网页造成很大影响，一般来说选取图片我们应用遵循如下原则：

1.照片使用JPG格式。

2.其它所有的图片都使用PNG格式。

8. 调整大图的大小

目前智能机所拍出的照片越来越大，你不可能把原照片直接展示在页面中。普通的编辑器都会直接上传原图，这样会让页面的加载速度慢到另一个级别。在正常的照片处理中，一般都没有必要给用户高质量的图片展示。所以你需要一个自动调整图片大小的工具。

需要注意的是，图片的尺寸是不能超过容量的大小的，这样一来页面加载了全图，却无法展示出来。现在照片的尺寸基本上都超过电脑显示屏的尺寸了。

图片的大小在网页总大小中占很大的比重，图片减小50%会导致整体页面大小减少75%，所以你应该认真解决一下图片的加载。

9. 进一步压缩图片

仅仅调优图片的大小是不够的，你应该通过第三方工具对图片进行分析，进一步压缩图片。比较好用的工具有OptiPNG, PNGOUT, jpegtran 和jpegoptim。这些工具大都能安装成独立的工具或是整合到开发过程中，另外像Smush这样的工具，还可以直接在云端处理。

10. 删除不必要的字体

Web fonts已经彻底改变了字体的设计，它减少了很多不必要的文本。然而，目前的字体仍然会给你的网页带来多余的字节。如果你使用超过两种字体，这就已经开始对性能造成影响了。

结论

我相信大部分网站都可以通过以上的优化减小大概30%-50%的重量，但是身为一个完美主义的开发者这是远远不够的，我们在接下来的系列文章中会继续对网站瘦身进行深入研究，感兴趣的可以关注一下极客头条的微博和微信，我们会将接下来的文章在各个社交平台上进行推送。