如何大幅提升web前端效能之看tengine在大公司架構實踐
在一個專案還是單體架構的時候，所有的js，css，image都會在一個web網站上，看起來並沒有什麼問題，比如下面這樣：
但是當web網站流量起來的時候，這個單體架構必須要進行橫向擴充套件，而在原來的架構中靜態資源這羊毛是出在單體架構這頭羊身上，所以橫向多少個單體，就有多少個靜態資原始檔夾，比如下面這樣的架構。
那這種架構有什麼問題呢？ 總的來說會有如下二個問題：
1. 瀏覽器對單一域名的請求有併發限制。
在同一個域名下，一般來說有js，css,img,media,html等等靜態資源，如果資源都掛在同一個域名下，勢必會影響頁面的載入速度，而且單一域名下靜態資源還會帶上同域名下的cookie等本不需要附加的資訊。
2. 不方便管理和資源的浪費
為什麼這麼說呢？ 我們知道靜態資源一般來說都是很佔資源空間的，尤其是使用者上傳的頭像，csv那更是佔用web伺服器資源，為了應對突發情況，一般會保持web程式碼的3個版本的回滾策略，也就是說你需要在web1，web2，web3上同時進行3個靜態資原始檔夾的copy，相比單獨用靜態資源伺服器統一管理的資料夾的情況對比，前者的磁碟資源的浪費可想而知。。。所以改正後的架構應該是這樣的。
有些同學可能會說，空口無憑，你得找點真實的案例給我看看，為了滿足你的胃口，下面我就找下‘攜程’ 和 ‘淘寶’站點給你分享一下。
2.2.0的安裝包。
[root@localhost myapp]# wget
--2017-09-02 19:54:07--
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
autoCHANGES.cn CHANGES.te configure docs LICENSE modules READMEsrc THANKS.te
[root@localhost tengine-2.2.0]# pwd
/root/myapp/tengine-2.2.02. 然後就是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 install4. 啟動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
tcp0 0 0.0.0.0:80 0.0.0.0:* LISTEN
tcp0 0 192.168.122.1:530.0.0.0:* LISTEN
tcp0 0 0.0.0.0:22 0.0.0.0:* LISTEN
tcp0 0 127.0.0.1:631 0.0.0.0:* LISTEN
tcp0 0 127.0.0.1:250.0.0.0:* LISTEN
tcp6 0 0 :::22 :::*LISTEN
tcp6 0 0 ::1:631 :::*LISTEN
tcp6 0 0 ::1:25 :::*LISTEN
[root@localhost sbin]# 
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
autoCHANGES.cn CHANGES.te configure docs LICENSE man objs READMEsrc 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 ，，，終於大功告成啦。。。。
好了，本篇就說到這裡，希望對你有幫助。。。
本文出自一線碼農的部落格，原文地址http://www.cnblogs.com/huangxincheng/p/7469328.html
來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/1600/viewspace-2808177/，如需轉載，請註明出處，否則將追究法律責任。
相關文章
- 如何提升Web前端效能？Web前端
- 實踐指南-前端效能提升 270%前端
- Babel 在提升前端效率的實踐Babel前端
- 前端微架構實踐(Vue)前端架構Vue
- 人力節省 50%，研發效能提升 40%，阿里 Serverless 架構落地實踐阿里Server架構
- 乾淨架構在 Web 服務開發中的實踐架構Web
- Web前端架構師Web前端架構
- kubernetes實踐之十七：架構架構
- 如何提升web前端技術？Web前端
- 迭代器模式大幅提升Python效能模式Python
- 前端架構之小小node架構前端架構
- LoadBalancer在kubernetes架構下的實踐架構
- 如何從請求、傳輸、渲染3個方面提升Web前端效能Web前端
- Kafka2.6.0釋出——效能大幅提升Kafka
- 前端外掛化架構的探索和實踐前端架構
- 重新架構：從 Redis 到 SQLite 效能提升架構RedisSQLite
- WEB站點效能優化實踐（載入速度提升2s）Web優化
- 個推技術實踐 | Spark效能調優看這篇，效能提升60%↑ 成本降低50%↓Spark
- 如何提升前端基建的效能價值？前端
- Higress 全新 Wasm 執行時，效能大幅提升ASM
- 跟著大公司學安全之BeyondCorp安全架構架構
- 汽車之家Unity前端通用架構升級實踐Unity前端架構
- Vue微前端架構與Qiankun實踐理論指南Vue前端架構
- 前端架構師破局技能，NodeJS 落地 WebSocket 實踐前端架構NodeJSWeb
- 網頁上的微服務—微前端架構實踐網頁微服務前端架構
- MVVM架構在Flutter中的簡單實踐MVVM架構Flutter
- SPDK Vhost-user 如何幫助超融合架構實現 I/O 儲存效能提升架構
- [上海線下活動] Web前端工程化架構實踐 — 滬江技術沙龍Web前端架構
- 學習Web前端，如何提升自我價值Web前端
- 前端架構之移動端混合架構（hybrid）前端架構
- MySQL高可用架構之MHA 原理與實踐MySql架構
- 從實踐者的角度看軟體架構的歷史架構
- Metal新特性：大幅度提升iOS端效能iOS
- RocketMQ DLedger架構在小米的大規模實踐MQ架構
- 秒殺架構實踐架構
- 華為雲：微服務架構下的效能保障最佳實踐微服務架構
- 哈囉前端Web Components最佳實踐前端Web
- 前端 Web gRPC 實踐和優化前端WebRPC優化