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

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

    一、域名规划

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

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

    uwww:网站首页。

    unews:二级页面。

    uapp:移动 App 的服务端地址。

    uweixin:微信公众号的服务端地址。

    updt-img-1:商品图片服务器。为充分利用浏览器

    并发获取图片的能力，建立 5 个图片服务器域名，即 pdt-img-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 的统一配置文件全方位提速网站的技术手段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}）；四、域名预解析 / 网站预连接 / 资源预加载根据大型网站的监测结果，在一次资源请求的过程中，大量时间耗费在建立连接方面；对于初次请求一个新网站来说，域名解析也需要耗费一段时间；对于一次请求大文件的过程来说，需要耗费的时间相对更长，而在这段相对更长的时间内，用户只能等待。针对域名解析、建立连接、资源文件加载这三个问题，分别开辟一个提前量，在用户执行其它操作的间歇期，并行执行域名预解析、网站预连接、资源预加载。例如：

    域名预解析：

    <link rel=“dns-prefetch” href=“//example.com”>

    网站预连接：

    <link rel=“preconnect” href=“http://example.com”>

    资源预加载：

    <link rel=“prefetch” href=“image.png”>

    <link rel=“subresource” href=“style.css”>

    <link rel=“prerender” href=“http://example.com”>

    <link rel=“preload” href=“image.png”>