全方位提速网站的技术手段

邱丽娟

【摘要】 平时我们搭建的一个网站，特别是较大的企业网站，都希望客户访问时能更快地响应。本文将从全方位的四个层次来讨论怎样提速网站。

【关键字】 网站提速 域名规划 代理缓存 前端编译 域名预解析 网站预连接 资源预加载

一般网站的技术架构：通过负载均衡设备接入外网请求，执行SSL解密，根据域名或URL分发请求；以Nginx为负载分发服务器；静态资源与动态程序分开部署。

顺应这一架构层次，本文从域名规划、代理服务器端缓存、前端编译、页面制作四个层次阐述网站提速的技术手段。

一、域名规划

浏览器有一个限制：针对一个远程主机（域名），同时存在的并发请求数不能超出上限。换言之，将文件部署在不同的服务器（域名）上，将增强浏览器的并发能力。

以电商网站为例，规划其域名：

www：网站首页。

news：二级页面。

app：移动App的服务端地址。

weixin：微信公众号的服务端地址。

pdt-img-1：商品图片服务器。为充分利用浏览器并发获取图片的能力，建立5个图片服务器域名，即pdtimg-2、pdt-img-3、pdt-img-4、pdt-img-5。

二、 代理缓存

当使用Nginx作为Web请求和移动App请求的负载分发器时，在Nginx上配置代理缓存策略，定义负载分发器与应用服务器/静态资源服务器之间的缓存规则，这样在缓存过期之前负载分发器就不用从应用服务器/静态资源服务器获取文件。

proxy_cache_path data/cache/cache_my levels=1：2 keys_ zone=cache_my：200m inactive=1d max_size=1g；

server {

location ～* ＼.（？：ico|css|js|gif|jpe？g|png）$ {

include proxy.conf；

proxy_cache cache_my；

proxy_pass http：//my_servers；

}

}

当新应用发布时，要注意清除缓存目录。

三、动静分离/浏览器缓存/文件压缩/图片合并

减少静态文件对应用服务器的影响、请求次数、网络流量、连接次数，这些是前端开发的标准要求和强制要求。如果拿服务端代码编译来类比，就相当于对前端开发的成果文件（包括HTML、CSS、JS、图片等）进行一次检查和再处理，这正是“前端编译”的观点。FIS3是百度的前端编译解决方案，可一次性达到上述四个目的。FIS3的统一配置文件是fis-conf.js。

3.1 实施动静分离

在一个高并发的场景中，浏览器并发获取资源，无疑将加速页面的显示，增强用户体验，但这又对服务器应对并发访问的能力提出更高要求。根据文件类型，在服务端针对动、静文件实施分开部署，动态文件部署在应用服务器，静态文件部署在静态资源服务器，正是为了降低应用服务器在I/O方面的消耗，从整体上增强服务端响应文件请求的能力。大型网站部署CDN的目的之一，便是分散部署静态资源文件，结合智能DNS，就近返回静态资源文件。

在fis-conf.js中配置规则，将*.js、*.css、*.png文件发布到另一个绝对路径下，该路径将来可以是静态资源服务器上的任意路径。

fis.match（‘*.{png，js，css}， {

release： ‘/static/$0

}）；

3.2 充分利用浏览器缓存

浏览器缓存的工作原理是，与服务器之间建立一种契约，服务器依据文件修改时间来决定是否需要向浏览器返回该文件。浏览器每次请求远程文件时，从自身缓存中提取该文件的最后修改时间，放在If-Modified-Since头中随请求发出；服务器取出If-Modified-Since头数据，比对最新的文件修改时间，如相同，说明文件未曾修改，返回304状态代码，如不同，则正常返回文件。在这种工作模式下，即使文件没修改，浏览器也要发出一次请求。改进方案是，服务器告知浏览器文件将永不过期，服务器将能够代表文件是否变动的标识（最后修改时间、内容哈希）作为文件URI的一部分，一旦文件内容改变，URI随之变化，这样浏览器根据文件URI便能判断是否需要下载新的文件。

应用系统的静态资源文件、商品图片，均适用这一技巧。

fis.match（‘*.{js，css，png}， {

useHash： true

}）；

3.3 实施文件压缩

文件GZIP压缩是主流的Web服务器都支持的功能，其目的是减少网络传输的字节数，因为相对压缩和解压的运算能力的消耗，网络传输能力无疑是更大的制约。

fis.match（‘*.js， {//fis-optimizer-uglify-js插件进行压缩，已内置

optimizer： fis.plugin（‘uglify-js）

}）；

fis.match（‘*.css， {//fis-optimizer-clean-css插件進行压缩，已内置

optimizer： fis.plugin（‘clean-css）

}）；

fis.match（‘*.png， {//fis-optimizer-png-compressor插件进行压缩，已内置

optimizer： fis.plugin（‘png-compressor）

}）；

3.4 实施图片合并

一次Web请求，需要经历域名解析、建立连接、传输内容三个阶段，其中建立连接比较耗时，因此浏览器一般具有保持一段时间的长连接以供复用的机制。服务端将多张图片合并成一个文件，正是一种主动减少连接次数的机制。

//启用fis-spriter-csssprites插件

fis.match（‘：：package， {

spriter： fis.plugin（‘csssprites）

}）

//对CSS进行图片合并

fis.match（‘*.css， {//给匹配到的文件分配属性

useSprite： true

}）；

四、域名预解析/网站预连接/资源预加载

根据大型网站的监测结果，在一次资源请求的过程中，大量时间耗费在建立连接方面；对于初次请求一个新网站来说，域名解析也需要耗费一段时间；对于一次请求大文件的过程来说，需要耗费的时间相对更长，而在这段相对更长的时间内，用户只能等待。针对域名解析、建立连接、资源文件加载这三个问题，分别开辟一个提前量，在用户执行其它操作的间歇期，并行执行域名预解析、网站预连接、资源预加载。例如：

域名预解析：

网站预连接：

资源预加载：

目前并不是所有的浏览器都支持以上声明，但是将有越来越多的浏览器支持。