经典面试题-Web前端性能优化方法(1)

昨天写了一篇文章《经典面试题：从地址栏输入URL到页面加载完成发生了什么？》，是针对所有程序员在面试中可能会被问到的问题。那么今天写的这篇文章就是专门针对前端开发工程师在面试中经常被问到的问题，就是关于Web前端页面的性能优化。

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的响应，则网页会进行重定向。在报文头中会包含如下信息，浏览器会根据重定向的信息重新发送一次请求，如果重定向的次数过多，则网页会一直呈现刷新状态，而用户却看不到内容，这是一中很糟糕的用户体验，因此应该避免页面太多的跳转。

响应头信息

总结

今天这篇文章只是介绍了几种性能优化的方式，后面会继续写剩余优化方式的文章，欢迎持续关注噢~