架构高性能网站秘笈(五)——Web组件分离

什么是Web组件？

网站的静态网页HTML、JavaScript脚本、CSS样式、图片、动态数据称为网站的Web组件。也就是说，一个Web应用由各种各样的Web组件构成。

为什么要进行Web组件分离？

一个网站的Web组件往往有各自的特点，比如：HTML页面属于静态文件，当用户请求一个HTML页面的时候Web服务器会进行IO操作，读取HTML文件；而用户请求动态数据的时候IO操作会比较少，但会涉及到大量的CPU计算；因此，如果静态内容和动态内容都使用相同服务器配置的话显然不能发挥Web应用最好的性能，因此我们需要对不同的Web组件采取不同的服务器配置方案。因此需要组件分离。

如何进行组件分离？

我们可以把不同的组件放在不同的服务器上，并且根据组件的特点，定制服务器配置，从而发挥组件最好的性能。要实现不同组件指向不同的服务器，我们首先需要为网站解析更多的子域名。

域名解析

假设我们已经拥有顶级域名www.5188.help，那么我们可以到购买域名的网站上设置域名的A标签，从而分出二级域名。以下是我解析的二级域名：
- static.5188.help #用于存放静态数据
- api.5188.help #存放动态数据
- css.5188.help #存放css
- js.5188.help #存放js
- upload.5188.help #存放图片、音频、文档

如何对待不同的组件？

下面具体介绍针对具体组件的服务器配置方案。

1. 静态页面

静态页面HTML以文件的形式存储在存储设备，因此存储HTML页面的服务器需要有较高的IO读写速度，对IO密集型操作，我们要进行如下优化：

支持epoll。使得Web在高并发情况下仍然保持稳定的吞吐率。
非阻塞IO。避免不必要的IO等待。
异步IO
使用sendfile()系统调用。避免文件系统磁盘缓冲区到用户地址空间的数据复制。
单进程。避免多进程切换的不必要开销。对于IO密集型的静态内容处理，多进程并不能带来多大的意义。
使用高转速磁盘。
使用RAID分区。使得磁盘实现并行读写，提高磁盘吞吐量。
购买大带宽。

2. 动态内容

动态内容的数据都实时计算生成，或查询数据库得到，为了提升运算速度，因此需要增加CPU核数，增加内存容量，具体做法如下：
1. 使用快的CPU
2. 使用大内存
3. 使用多进程
4. 使用数据库连接池，减去连接建立和释放的开销。

3. CSS样式表和avaScript脚本

一般网站上线后CSS样式表和JavaScript脚本几乎不会发生变化，因此完全可以将css和js在用户浏览器的缓存有效期设置更长的时间。

注：在css、js的URL后可以加一个参数，用来标注当前css、js的版本，如：

<code class="language-html hljs  has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-tag" style="margin: 0px; padding: 0px; color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="margin: 0px; padding: 0px; box-sizing: border-box; color: rgb(0, 0, 136);">link</span> <span class="hljs-attribute" style="margin: 0px; padding: 0px; box-sizing: border-box; color: rgb(102, 0, 102);">href</span>=<span class="hljs-value" style="margin: 0px; padding: 0px; box-sizing: border-box; color: rgb(0, 136, 0);">"css.5188.help/BSB/css/xxx.css?ver=1.0"</span> /></span></code><ul class="pre-numbering" style="margin: 0px; padding: 6px 0px 40px; box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="margin: 0px; padding: 0px 5px; box-sizing: border-box;">1</li></ul>

当服务器中css、js发生修改后，需要将参数进行修改：

<code class="language-html hljs  has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-tag" style="margin: 0px; padding: 0px; color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="margin: 0px; padding: 0px; box-sizing: border-box; color: rgb(0, 0, 136);">link</span> <span class="hljs-attribute" style="margin: 0px; padding: 0px; box-sizing: border-box; color: rgb(102, 0, 102);">href</span>=<span class="hljs-value" style="margin: 0px; padding: 0px; box-sizing: border-box; color: rgb(0, 136, 0);">"css.5188.help/BSB/css/xxx.css?ver=2.0"</span> /></span></code><ul class="pre-numbering" style="margin: 0px; padding: 6px 0px 40px; box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="margin: 0px; padding: 0px 5px; box-sizing: border-box;">1</li></ul>

那么，当浏览器发现css后的参数发生修改时，会重新向服务器请求，而不会使用本地缓存。

4. 图片

对于图片较多的页面，如果每个图片都向服务器请求的话需要消耗大量的时间带带宽，因此服务器向浏览器返回响应信息时一定要设置图片的Keep-Alive参数设为true，延用TCP连接。

Web组件分离的好处

浏览器对于同一域名的并发数会有限制。Web组件分离之后，不同类型的Web组件需要请求不同的域名，从而能够支持更大的并发量，从而能够提升Web组件的下载速度。

顶: 2

站内首发文章

John_ToDebug

发布了11 篇原创文章 · 获赞 3 · 访问量 1万+

私信关注