MyException - 我的异常网
当前位置:我的异常网» Web前端 » 怎么大幅提升web前端性能之看tengine在大公司架构实

怎么大幅提升web前端性能之看tengine在大公司架构实践

www.MyException.Cn  网友分享于:2013-10-08  浏览:0次
如何大幅提升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 switch ... found
checking for gcc builtin atomic operations ... found
checking for C99 variadic macros ... found
checking for gcc variadic macros ... found
checking for compiler structure-packing pragma ... found
checking for unistd.h ... found
checking for inttypes.h ... found
checking for limits.h ... found
checking for sys/filio.h ... not found
checking for sys/param.h ... found
checking for sys/mount.h ... found
checking for sys/statvfs.h ... found
checking for crypt.h ... found
checking for Linux specific features
checking for epoll ... found
checking for EPOLLRDHUP ... found
checking for O_PATH ... found
checking for sendfile() ... found
checking for sendfile64() ... found
checking for sys/prctl.h ... found
checking for prctl(PR_SET_DUMPABLE) ... found
checking for sched_setaffinity() ... found
checking for crypt_r() ... found
checking for SO_REUSEPORT ... found
checking for sys/vfs.h ... found
checking for nobody group ... found
checking for poll() ... found
checking for /dev/poll ... not found
checking for kqueue ... not found
checking for crypt() ... not found
checking for crypt() in libcrypt ... found
checking for F_READAHEAD ... not found
checking for posix_fadvise() ... found
checking for O_DIRECT ... found
checking for F_NOCACHE ... not found
checking for directio() ... not found
checking for statfs() ... found
checking for statvfs() ... found
checking for dlopen() ... not found
checking for dlopen() in libdl ... found
checking for sysinfo() ... found
checking for getloadavg() ... found
checking for /proc/meminfo ... found
checking for sched_yield() ... found
checking for SO_SETFIB ... not found
checking for SO_ACCEPTFILTER ... not found
checking for TCP_DEFER_ACCEPT ... found
checking for TCP_KEEPIDLE ... found
checking for TCP_FASTOPEN ... found
checking for TCP_INFO ... found
checking for accept4() ... found
checking for eventfd() ... found
checking for int size ... 4 bytes
checking for long size ... 8 bytes
checking for long long size ... 8 bytes
checking for void * size ... 8 bytes
checking for uint64_t ... found
checking for sig_atomic_t ... found
checking for sig_atomic_t size ... 4 bytes
checking for socklen_t ... found
checking for in_addr_t ... found
checking for in_port_t ... found
checking for rlim_t ... found
checking for uintptr_t ... uintptr_t found
checking for system byte ordering ... little endian
checking for size_t size ... 8 bytes
checking for off_t size ... 8 bytes
checking for time_t size ... 8 bytes
checking for setproctitle() ... not found
checking for pread() ... found
checking for pwrite() ... found
checking for sys_nerr ... found
checking for localtime_r() ... found
checking for posix_memalign() ... found
checking for memalign() ... found
checking for mmap(MAP_ANON|MAP_SHARED) ... found
checking for mmap("/dev/zero", MAP_SHARED) ... found
checking for System V shared memory ... found
checking for POSIX semaphores ... not found
checking for POSIX semaphores in libpthread ... found
checking for struct msghdr.msg_control ... found
checking for ioctl(FIONBIO) ... found
checking for struct tm.tm_gmtoff ... found
checking for struct dirent.d_namlen ... not found
checking for struct dirent.d_type ... found
checking for sysconf(_SC_NPROCESSORS_ONLN) ... found
checking for openat(), fstatat() ... found
checking for getaddrinfo() ... found
checking for PCRE library ... found
checking for PCRE JIT support ... found
checking for OpenSSL library ... found
checking for zlib library ... found
creating objs/Makefile

Configuration summary
  + using system PCRE library
  + using system OpenSSL library
  + md5: using OpenSSL library
  + sha1: using OpenSSL library
  + using system zlib library
  + jemalloc library is disabled

  nginx path prefix: "/usr/myapp/tengine"
  nginx binary file: "/usr/myapp/tengine/sbin/nginx"
  nginx configuration prefix: "/usr/myapp/tengine/conf"
  nginx configuration file: "/usr/myapp/tengine/conf/nginx.conf"
  nginx pid file: "/usr/myapp/tengine/logs/nginx.pid"
  nginx error log file: "/usr/myapp/tengine/logs/error.log"
  nginx http access log file: "/usr/myapp/tengine/logs/access.log"
  nginx http client request body temporary files: "client_body_temp"
  nginx dso module path: "/usr/myapp/tengine/modules/"
  nginx http proxy temporary files: "proxy_temp"
  nginx http fastcgi temporary files: "fastcgi_temp"
  nginx http uwsgi temporary files: "uwsgi_temp"
  nginx http scgi temporary files: "scgi_temp"

[root@localhost tengine-2.2.0]# make && make install

 

4. 启动tengine下的nginx进程,可以看到当我启动之后,tengine的80端口已经打开了。

[root@localhost myapp]# ls
tengine  tengine-2.2.0  tengine-2.2.0.tar.gz
[root@localhost myapp]# cd tengine
[root@localhost tengine]# ls
conf  html  include  logs  modules  sbin
[root@localhost tengine]# cd conf
[root@localhost conf]# cd ../sbin
[root@localhost sbin]# ls
dso_tool  nginx
[root@localhost sbin]# ./nginx 
[root@localhost sbin]# netstat -tln
Active Internet connections (only servers)
Proto Recv-Q Send-Q Local Address           Foreign Address         State      
tcp        0      0 0.0.0.0:80              0.0.0.0:*               LISTEN     
tcp        0      0 192.168.122.1:53        0.0.0.0:*               LISTEN     
tcp        0      0 0.0.0.0:22              0.0.0.0:*               LISTEN     
tcp        0      0 127.0.0.1:631           0.0.0.0:*               LISTEN     
tcp        0      0 127.0.0.1:25            0.0.0.0:*               LISTEN     
tcp6       0      0 :::22                   :::*                    LISTEN     
tcp6       0      0 ::1:631                 :::*                    LISTEN     
tcp6       0      0 ::1:25                  :::*                    LISTEN     
[root@localhost sbin]# 

 

三:css文件和合并加载的验证

 

1. css文件验证

         下面在nginx.conf 中配置一下静态资源的访问路径,所有静态资源都是放在/usr目录下。

        location ~ ^/(images|javascript|js|css|flash|media|static)/  {
          root        /usr;
        }

 

然后生成 /usr/css/top.css 文件,最终浏览可以发现配置已生效。

[root@localhost usr]# mkdir css
[root@localhost usr]# ls
bin  css  etc  games  include  lib  lib64  libexec  local  myapp  sbin  share  src  tmp
[root@localhost usr]# cd css
[root@localhost css]# rz

[root@localhost css]# ls
top.css

 

2. css 合并压缩

    这个合并模式还需要在tengine下安装一个ngx_http_concat_module 模块,可以看下官网:http://tengine.taobao.org/document_cn/http_concat_cn.html。

我这里采用静态编译,编译之前先把之前的tengine进程给关闭掉(nginx -s stop)。

[root@localhost myapp]# cd tengine-2.2.0
[root@localhost tengine-2.2.0]# ls
AUTHORS.te  CHANGES     CHANGES.ru  conf       contrib  html     Makefile  modules  packages  README.markdown  tests
auto        CHANGES.cn  CHANGES.te  configure  docs     LICENSE  man       objs     README    src              THANKS.te
[root@localhost tengine-2.2.0]# ./configure --prefix=/usr/myapp/tengine --with-http_concat_module && make && make install

 

   接下来只要在nginx.conf 中配置concat on,最多合并20个文件,最后 nginx -s reload 重启一下

        location ~ ^/(images|javascript|js|css|flash|media|static)/  {
          root        /usr;
          concat on;
          concat_max_files 20;    
          concat_types text/css application/x-javascript;
        }

 接下来再上传一个tips.css到/usr/css目录下,然后键入url:http://192.168.23.168/css/??top.css,tips.css ,,,终于大功告成啦。。。。

 

 

  好了,本篇就说到这里,希望对你有帮助。。。

 

文章评论

亲爱的项目经理,我恨你
亲爱的项目经理,我恨你
60个开发者不容错过的免费资源库
60个开发者不容错过的免费资源库
老程序员的下场
老程序员的下场
程序员眼里IE浏览器是什么样的
程序员眼里IE浏览器是什么样的
代码女神横空出世
代码女神横空出世
5款最佳正则表达式编辑调试器
5款最佳正则表达式编辑调试器
程序员最害怕的5件事 你中招了吗?
程序员最害怕的5件事 你中招了吗?
我的丈夫是个程序员
我的丈夫是个程序员
那些争议最大的编程观点
那些争议最大的编程观点
什么才是优秀的用户界面设计
什么才是优秀的用户界面设计
一个程序员的时间管理
一个程序员的时间管理
聊聊HTTPS和SSL/TLS协议
聊聊HTTPS和SSL/TLS协议
那些性感的让人尖叫的程序员
那些性感的让人尖叫的程序员
 程序员的样子
程序员的样子
程序员必看的十大电影
程序员必看的十大电影
Google伦敦新总部 犹如星级庄园
Google伦敦新总部 犹如星级庄园
总结2014中国互联网十大段子
总结2014中国互联网十大段子
老美怎么看待阿里赴美上市
老美怎么看待阿里赴美上市
中美印日四国程序员比较
中美印日四国程序员比较
我跳槽是因为他们的显示器更大
我跳槽是因为他们的显示器更大
漫画:程序员的工作
漫画:程序员的工作
初级 vs 高级开发者 哪个性价比更高?
初级 vs 高级开发者 哪个性价比更高?
程序员应该关注的一些事儿
程序员应该关注的一些事儿
2013年美国开发者薪资调查报告
2013年美国开发者薪资调查报告
如何区分一个程序员是“老手“还是“新手“?
如何区分一个程序员是“老手“还是“新手“?
科技史上最臭名昭著的13大罪犯
科技史上最臭名昭著的13大罪犯
如何成为一名黑客
如何成为一名黑客
当下全球最炙手可热的八位少年创业者
当下全球最炙手可热的八位少年创业者
Java程序员必看电影
Java程序员必看电影
程序员和编码员之间的区别
程序员和编码员之间的区别
每天工作4小时的程序员
每天工作4小时的程序员
要嫁就嫁程序猿—钱多话少死的早
要嫁就嫁程序猿—钱多话少死的早
为什么程序员都是夜猫子
为什么程序员都是夜猫子
十大编程算法助程序员走上高手之路
十大编程算法助程序员走上高手之路
程序猿的崛起——Growth Hacker
程序猿的崛起——Growth Hacker
Web开发人员为什么越来越懒了?
Web开发人员为什么越来越懒了?
程序员的一天:一寸光阴一寸金
程序员的一天:一寸光阴一寸金
为啥Android手机总会越用越慢?
为啥Android手机总会越用越慢?
看13位CEO、创始人和高管如何提高工作效率
看13位CEO、创始人和高管如何提高工作效率
写给自己也写给你 自己到底该何去何从
写给自己也写给你 自己到底该何去何从
程序员周末都喜欢做什么?
程序员周末都喜欢做什么?
我是如何打败拖延症的
我是如何打败拖延症的
不懂技术不要对懂技术的人说这很容易实现
不懂技术不要对懂技术的人说这很容易实现
10个调试和排错的小建议
10个调试和排错的小建议
10个帮程序员减压放松的网站
10个帮程序员减压放松的网站
2013年中国软件开发者薪资调查报告
2013年中国软件开发者薪资调查报告
鲜为人知的编程真相
鲜为人知的编程真相
做程序猿的老婆应该注意的一些事情
做程序猿的老婆应该注意的一些事情
Web开发者需具备的8个好习惯
Web开发者需具备的8个好习惯
软件开发程序错误异常ExceptionCopyright © 2009-2015 MyException 版权所有