Web前端性能优化

Web前端性能优化是一个复杂的过程，涉及到的知识点非常多，包括网页，服务器，CSS，Javascript，图片等方面。之前雅虎有总结过Web性能优化的14条原则，在这里我们做一下梳理，下面图片中的内容基本包含了所有可能的方式：

性能优化的方式

我们会对这些原则一一进行讲解，由于篇幅过长，我会分为几篇文章来写。今天就先来看看跟次数有关的几个内容

规则1-减少HTTP请求数量

• 图片-CSS Sprites

我们都知道图片对于页面来说是一个独立的资源，每张图片都会发送一次HTTP请求去获取。如果页面上任何大小的图片都发送一次请求，那么对于图片类型的网站性能来说将会是一个噩耗，那么我们该怎么做呢？

假想一下，如果多张类似于导航的小图片都集成在一张大图片上，只需要发送一次请求就可以得到，然后通过位置去获取具体的图片，这样是不是会减少很多次HTTP请求呢？

没错，这就是CSS Sprites（雪碧图）的由来，它主要是将多个图片合成为一张图片，然后通过位置获取具体的图片。下图就是一张雪碧图

雪碧图

在使用雪碧图时，一般会设置一个通用的类，它们有共同的background-image属性，然后具体的类通过background-position属性去获取具体的位置，如下代码所示

使用CSS Sprites图的样式

• 图片-Base64编码

在之前写过的一篇文章《关于图片的Base64编码，你了解吗？》中，讲过Base64编码的图片，也可以减少HTTP请求的次数。但是使用这种方式也存在弊端，太大的图片并不适合Base64编码，而且图片并不会被缓存，Base64编码的图片需要看真实环境再使用。

• CSS，JS文件合并

在一个系统中我们通常会将页面的HTML，CSS样式，Javascript脚本区分开，但是也并不是说CSS和JS文件划分的越细越好，因为每个CSS和JS文件都会发送一次HTTP请求，能合并的CSS和JS文件都合并。一般一个网站会有一个通用的CSS和JS文件，然后每个页面都会有一个CSS和JS文件。

规则2-减少DNS查询次数

DNS的解析会消耗时间，如果在页面上嵌入不同域下文件比较多，例如在页面广告中嵌入的图片和脚本，在页面的首次加载时，解析这些外部的DNS会消耗一定的时间。下面是CSDN极客头条首页加载请求的JS文件，在该页面中就有很多个来自外域请求的JS文件。

外域请求的JS文件

规则3-避免页面跳转

在服务器处理完HTTP请求后，会返回HTTP响应报文，如果浏览器收到的是一个3XX的响应，则网页会进行重定向。在报文头中会包含如下信息，浏览器会根据重定向的信息重新发送一次请求，如果重定向的次数过多，则网页会一直呈现刷新状态，而用户却看不到内容，这是一中很糟糕的用户体验，因此应该避免页面太多的跳转。

响应头信息