设为首页 加入收藏

TOP

如何大幅提升web前端性能之看tengine在大公司架构实践(一)
2017-10-10 12:34:50 】 浏览:4586
Tags:如何 大幅 提升 web 前端 性能 tengine 公司 架构 实践

 

  在一个项目还是单体架构的时候,所有的js,css,image都会在一个web网站上,看起来并没有什么问题,比如下面这样:

    但是当web网站流量起来的时候,这个单体架构必须要进行横向扩展,而在原来的架构中静态资源这羊毛是出在单体架构这头羊身上,所以横向多少

个单体,就有多少个静态资源文件夹,比如下面这样的架构。

那这种架构有什么问题呢? 总的来说会有如下二个问题:

 

1.   浏览器对单一域名的请求有并发限制。

     在同一个域名下,一般来说有js,css,img,media,html等等静态资源,如果资源都挂在同一个域名下,势必会影响页面的加载速度,而且单一域名

下静态资源还会带上同域名下的cookie等本不需要附加的信息。

 

2.  不方便管理和资源的浪费

     为什么这么说呢? 我们知道静态资源一般来说都是很占资源空间的,尤其是用户上传的头像,csv那更是占用web服务器资源,为了应对突发情况,

一般会保持web代码的3个版本的回滚策略,也就是说你需要在web1,web2,web3上同时进行3个静态资源文件夹的copy,相比单独用静态资源服务

器统一管理的文件夹的情况对比,前者的磁盘资源的浪费可想而知。。。所以改正后的架构应该是这样的。

 

有些同学可能会说,空口无凭,你得找点真实的案例给我看看,为了满足你的胃口,下面我就找下‘携程’ 和 ‘淘宝’站点给你分享一下。

 

一:携程首页对这二个问题的解决

        啥也不想说,通过浏览器随便抓取一个css文件给大家分享一下,详细如下图:

 

 

1. css的加载路径

     从http://webresource.c-ctrip.com/ResCRMOnline/R5/css/index/private_index.A_v3.css?ts=20170828_pro 中可以看到这和www.ctrip.com

 域名根本就不是一个域名,除了有点像,不说话,甚至还有点想笑,所以这种方式的加载对页面的快速呈现有很大的帮助。

 

2. 对R5的分析

     这个R5是什么意思,就是有10个版本,R1-R10,每发布一个新版本,R++,轮回而已,所以你可以将R5 -> R6,那就是轮回之前的css版本。

 

   携程现在的静态资源大部分也是使用到了tengine,这是一个淘宝开源的基于nginx的proxy服务器,在nginx上面做了很多的优化,而且tengine很

大的一个亮点就是可以使用多文件合并加载,比如10个css文件,可以合并成一个css进行呈现,这就让10个http请求变成了1个,同样也是对页面

快速呈现有非常大的帮助,很可惜在ctrip上面并没有找到合并加载css,js的案例,或许还是历史的原因吧,那只能在taobao官网上找一下看看。

 

 

从上图中可以清楚看到tengine的强大功能,将default-min.css 和 apply-min.css 进行了合并加载,很神奇吧,接下来分享一下tengine的安装配置。

 

二:tengine安装

1.  下载地址:

       可以去tengine官网(http://tengine.taobao.org/)上找到目前最新的 2.2.0的安装包。

 

[root@localhost myapp]# wget http://tengine.taobao.org/download/tengine-2.2.0.tar.gz
--2017-09-02 19:54:07--  http://tengine.taobao.org/download/tengine-2.2.0.tar.gz
Resolving tengine.taobao.org (tengine.taobao.org)... 120.55.149.135
Connecting to tengine.taobao.org (tengine.taobao.org)|120.55.149.135|:80... connected.
HTTP request sent, awaiting response... 200 OK
Length: 2160648 (2.1M) [application/octet-stream]
Saving to: ‘tengine-2.2.0.tar.gz’

100%[===================================================================================================>] 2,160,648   2.11MB/s   in 1.0s   

2017-09-02 19:54:13 (2.11 MB/s) - ‘tengine-2.2.0.tar.gz’ saved [2160648/2160648]
[root@localhost myapp]# tar -xzvf tengine-2.2.0.tar.gz
[root@localhost myapp]# ls
tengine-2.2.0  tengine-2.2.0.tar.gz
[root@localhost myapp]# cd tengine-2.2.0
[root@localhost tengine-2.2.0]# ls
AUTHORS.te  CHANGES     CHANGES.ru  conf       contrib  html     man      packages  README.markdown  tests
auto        CHANGES.cn  CHANGES.te  configure  docs     LICENSE  modules  README    src              THANKS.te
[root@localhost tengine-2.2.0]# pwd
/root/myapp/tengine-2.2.0

 

2. 然后就是tengine的一些依赖包

[root@localhost myapp]# yum install -y zlib zlib-devel openssl openssl-devel pcre pcre-devel gcc gcc-c++

 

3. 常规的configure, make,make install

[root@localhost tengine-2.2.0]# ./configure --prefix=/usr/myapp/tengine
checking for OS
 + Linux 3.10.0-327.el7.x86_64 x86_64
checking for C compiler ... found
 + using GNU C compiler
 + gcc version: 4.8.5 20150623 (Red Hat 4.8.5-11) (GCC) 
checking for gcc -pipe switc
首页 上一页 1 2 3 4 下一页 尾页 1/4/4
】【打印繁体】【投稿】【收藏】 【推荐】【举报】【评论】 【关闭】 【返回顶部
上一篇9.模板方法模式 下一篇Struts2的初级问题

最新文章

热门文章

Hot 文章

Python

C 语言

C++基础

大数据基础

linux编程基础

C/C++面试题目