- 讲师:刘萍萍 / 谢楠
- 课时:160h
- 价格 4580 元
特色双名师解密新课程高频考点,送国家电网教材讲义,助力一次通关
配套通关班送国网在线题库一套
一般网站的技术架构:通过负载均衡设备接入外网请求,执行 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});四、域名预解析 / 网站预连接 / 资源预加载根据大型网站的监测结果,在一次资源请求的过程中,大量时间耗费在建立连接方面;对于初次请求一个新网站来说,域名解析也需要耗费一段时间;对于一次请求大文件的过程来说,需要耗费的时间相对更长,而在这段相对更长的时间内,用户只能等待。针对域名解析、建立连接、资源文件加载这三个问题,分别开辟一个提前量,在用户执行其它操作的间歇期,并行执行域名预解析、网站预连接、资源预加载。例如:
域名预解析:
网站预连接:
资源预加载:
目前并不是所有的浏览器都支持以上声明,但是将有越来越多的浏览器支持。
责编:古斯琪
课程专业名称 |
讲师 |
课时 |
查看课程 |
---|
课程专业名称 |
讲师 |
课时 |
查看课程 |
---|
点击加载更多评论>>