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

中国新通信 / 2018年08月14日 23:31

新闻

邱丽娟

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

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

一般网站的技术架构:通过负载均衡设备接入外网请求,执行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

});

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

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

域名预解析:

网站预连接:

资源预加载:

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

1.环球科技网遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.环球科技网的原创文章,请转载时务必注明文章作者和"来源:环球科技网",不尊重原创的行为环球科技网或将追究责任;3.作者投稿可能会经环球科技网编辑修改或补充。