如何通过前端技术深入探讨提升WEB页面加载速度的方法？

本文共计3779个文字，预计阅读时间需要16分钟。

记得面试时，一位领导语重心长地说——当今世界是互联网的世界，IT企业间的竞争非常激烈，比如一个网页的加载和显示速度，就比别人的站点页面更优。

记得面试现在这份工作的时候，一位领导语重心长地谈道——当今的世界是互联网的世界，IT企业之间的竞争是很激烈的，如果一个网页的加载和显示速度，相比别人的站点页面有那么0.1秒的提升，那也是很大的一个成就。

然后我不知道怎么写下去了，就在群里问了那群狗头军师，结果是这样的。。。

好的，是时候“语锋一转”切回主题了 —— 如何提升我们站点页面的访问速度、减少等待时间，从而最大化地提升用户访问体验呢？

针对这个问题，我们今天会从前端的角度来提出系列解决方案，它们都能有效地提升你页面的访问速度。

一. 减少对服务器的文件请求

常规的HTTP请求属于“请求”-“应答”-“断开”形式的短连接，每一个独立的资源我们都会向服务器发去一份get请求，再等服务端将我们需要的文件传回来。每一次资源的请求都实实在在地耗费了一次“连接-等待-接收”的时间（当然将http请求设为keep-alive长连接状态可以减少“连接”的次数和时间），如果我们能有效减少对服务器文件的请求次数，便意味着我们可以从这块省下一些页面等待时间，也可以顺便减少服务器的负担。

对于这个解决方案，我们可以这么做：

1. 使用css sprite技术合并多个图片为单个图片文件，实际使用时通过background-position来定位背景位置（相信大家第一个想到的也是这个吧）；

2. 合并多个css样式文件为单个样式文件，合并多个脚本为单个脚本，再在页面中引用合并后的样式/脚本文件。