网站地图 加入收藏 设为首页 原创论文网,覆盖经济,法律,医学,建筑,艺术等800余专业,提供60万篇论文资料免费参考

网站提速的技术手段探析

作者:原创论文网 时间:2017-04-10 11:02 加入收藏
摘要
  
  一般网站的技术架构:通过负载均衡设备接入外网请求,执行 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”>
  
  目前并不是所有的浏览器都支持以上声明,但是将有越来越多的浏览器支持。
上一篇:中学校内网络优化改造探析
下一篇:事业单位维护网络工作的问题与解决对策
重要提示:转载本站信息须注明来源:原创论文网,具体权责及声明请参阅网站声明。
阅读提示:请自行判断信息的真实性及观点的正误,本站概不负责。
别人都分享了,你还在等什么?赶快分享吧!
更多
网站提速的技术手段探析相关文章
我们的服务
联系我们
热门推荐
热门推荐