2017年下半年 系统架构设计师 五案例分析（试题五）

试题五

阅读以下关于Web系统架构设计的叙述，在答题纸上回答问题1至问题3.

【说明】

某电子商务企业因发展良好，客户量逐步增大，企业业务不断扩充，导致其原有的B2C商品交易平台己不能满足现有业务需求。因此，该企业委托某软件公司重新开发一套商品交易平台。该企业要求新平台应可适应客户从手机、平板设备、电脑等不同终端设备访问系统，同时满足电商定期开展"秒杀"、"限时促销"等活动的系统高并发访问量的需求。面对系统需求，软件公司召开项目组讨论会议，制定系统设计方案。讨论会议上，王工提出可以应用响应式Web设计满足客户从不同设备正确访问系统的需求。 同时，采用增加镜像站点、CDN 内容分发等方式解决高并发访问量带来的问题。李工在王工的提议上补充，仅仅依靠上述外网加速技术不能完全解决高用户并发访问问题，如果访问量持续增加，系统仍存在崩溃可能。李工提出应同时结合负载均衡、缓存服务器、Web应用服务器、分布式文件系统、分布式数据库等方法设计系统架构。经过项目组讨论，最终决定综合王王和李工的思路，完成新系统的架构设计。

 

【问题1】(5分)

请用200字以内的文字描述什么是"响应式 Web 设计"，并列举2个响应式Web设计的实现方式。

 

参考答案：

响应式web设计是指我们设计与开发的页面可以根据用户的行为和不同的设备环境做出相应的响应来调整页面的布局，以提供用户可感知的、流畅的阅读和操作体验。

实现方式：

（1）流式布局

（2）弹性布局加媒体查询

 

【问题2】(16 分)

综合王工和李工的提议，项目组完成了新商品交易平台的系统架构设计方案。新系统架构图如图5-1所示。请从选项 (a) - (j) 中为架构图中(1) - (8) 处空白选择相应的内容，补充支持高并发的Web应用系统架构设计图。

(a) Web 应用层

(b) 界面层

(c) 负载均衡层

(d) CDN 内容分发

(e) 主数据库

(f) 缓存服务器集群

(g) 从数据库

(h) 写操作

(i) 读操作

(j) 文件服务器集群

 

参考答案：

（1）（d）

（2）（c）

（3）（f）

（4）（a）

（5）（6）（e）（h）

（7）（8）（g）（i）

 

【问题3】(4 分)

根据李工的提议，新的B2C商品交易平台引入了主从复制机制。请针对B2C商品交易平台的特点，简要叙述引入该机制的好处。

 

参考答案：

1、提升性能

交易平台要求高并发，主从复制方式一主多从，不同的用户请求可以从不同的从数据库读取数据，提高并发度。

2、可扩展性更优

如果采用单台数据库服务器，则访问量持续增加时，数据库瓶颈暴露，且无法迅速解决问题。而主从结构可以快速增加从服务器数量，以满足需求。

3、提升可用性

一主多从，一台从服务器出现故障不影响整个系统正常工作。

4、相当于负载均衡

一主多从分担任务，相当于负载均衡

5、提升数据安全性

系统中的数据冗余存放多份，不会因为某台机器硬件故障而导致数据丢失。

 

本题知识点：

一，响应式Web设计

响应式实现基础

响应式设计实现通常会从以下几方面思考：

1. 组合流式布局、弹性盒子（包括图片、表格、视频）和媒体查询等技术；
2. 使用百分比布局创建流式布局的弹性UI，同时使用媒体查询限制元素的尺寸和内容变更范围；
3. 使用相对单位使得内容自适应调节；
4. 选择断点，针对不同断点实现不同布局和内容展示；

响应式设计模式

目前，响应式设计实践大致可总结为五类：mostly fluid（浮动式）、column drop（断列式）、layout shifter（移位式）、tiny tweaks（微调试） 和 off canvas，通常，我们选择其中的某一种或几种组合实现我们的响应式UI。

微调式（Tiny Tweaks）

Tiny Tweaks布局模式主要表现为单一列展示大部分内容，随着视口宽的的增加，改变font-size值和padding间距，以保证内容的持续可读性。

微调式针对单列布局，简单的修改字体大小，padding和margin间距，保证内容可读性。

浮动式（Mostly Fluid）

Mostly Fluid布局是一种多列布局，在大屏幕上设置较大margin，但是在移动端则会浮动后续列，垂直堆叠排列。该模式很常见，因为通常只需要设置一个断点。

浮动式布局，精髓在于浮动，随着屏幕缩小，浮动后续列，通常float／flex + width然后使用media query设置不同width值实现。

当屏幕宽度大于31.42em，浏览器默认font-size为16px，则为37.5 * 16 = 600px，大于600px像素时下面两个div则浮动并列显示，否则垂直堆叠展示。

断列式（Column Drop）

Column Drop也是一种多列布局方式，在移动端垂直堆叠排列，随着屏幕增大将各列平铺排列，这种模式就需要我们选择多个断点并选择变化列。

断列士核心是将内容划分为多列，然后随着屏幕变小，依次将左／右列断开堆叠至主列下方。

移位式（Layout Shifter）

Layout Shifter响应式设计是指针对不同屏幕进行不同布局和内容展示，通常需要设置多个断点，然后针对不同大小屏幕，进行不同设计，和前面几种模式在处理小屏幕时自动将后面列往下堆叠不同，在每类断点之间都需要涉及布局和内容两者的修改；这意味着我们需要做更多的编码工作，当然我们的可控性也更强。

移位式核心在于确定不同屏幕需要何种布局及内容展示方式，然后在各断点使用media query进行控制。

分屏式（Off Canvas）

在这之前的四种设计思路都是在大屏铺开展示，然后随着屏幕缩小，将其余列垂直堆叠展示，用户需要上下滚动才能查看页面所有内容，而Off Canvas模式则换了一个思路：分屏：

1. 在小屏幕设备，将不常用或非主要的内容（如导航和菜单之类）放在屏幕外左右两侧，点击可以切换显示／隐藏；
2. 在大屏幕可选择性的铺开展示；

分屏式精华是划分主要内容（如文章列表）和非主要内容（如导航栏），然后优先展示主要内容，非主要内容可以在左右两侧隐藏，支持用户主动点击／滑动切换显示／隐藏。

通常的做法是，在小屏幕，设置不常用内容display: none;或transform: translate(-200px, 0);，然后点击打开按钮时，添加恢复样式display: block;或transform: translate(0, 0);，即可展示；在大屏幕则可选择性设计展示方式，通常是直接平铺。

响应式实现

理论知识基本准备的差不多了，接下来实现一个简单的例子。

设置视口

在html内添加元视口代码：

1. <meta name="viewport" content="width=device-width, initial-scale=1.0">

2. 复制代码

1. width=device-width 指定视口为理想视口，以便使用当前视口（设备独立像素为单位）能展现良好的页面；
2. initial-scale=1 指定将 CSS 像素与设备独立像素比例设为 1:1。

intial-scale=1.0 即阻止移动浏览器自动调整页面大小 ，浏览器将按照视口的实际大小（此处设置为理想视口）来渲染页面。

当然还可以通过[email protected]方式声明，与meta标签效果相同：

其中，zoom属性等同于 viewport meta 标签的 initial-sacale 属性。

媒体查询

当前各主流浏览器基本都支持meida query，但是如果你期望网站在IE8甚至以下版本也展示良好，则需要添加兼容，可以用 media-queries.js 或 respond.js：

设置断点（breakpoints）

响应式设计还有一个重要的问题是如何确定视图断点，是以设备为依据吗？当然不行，设备是无穷无尽的，最好的实践是以内容为依据，然后从移动设备开始，从小到大依次增加一屏展示内容，确定我们期望的多个视图断点及布对应设计UI。

以material-ui为例，分为：

1. xs, extra-small: > 0
2. sm, small: >= 600
3. md, medium: >= 960
4. lg, large: >= 1280
5. xl, xlarge: >= 1920

可以自由选择断点并使用media query设置响应式布局，

 

当然这并不意味着我们只能使用这几个断点，也许我们希望在特定情况下，进行一些特定处理：

相对单位

既然是响应式设计，需要实现响应式视图，那么固定值的长度单位就必然很难满足期望；如果使用固定单位，如px，则需要针对每一种情况进行不同处理，多了很多工作，否则就无法实现响应式。

例如，给在容器div设置width: 100%;可以确保其填充视口宽度，相对视口而言不会太大也不会太小，无论设备是宽度为320像素的 iPhone5、宽度为375像素的iPhone6，还是宽度为360像素的 Nexus 5，div 均会适应于这些设备屏幕；此外，使用相对单位可以自动调整内容尺寸空间，而不会出现横向滚动条的情况。

相对单位有百分比（%），em，rem等。

响应式文本

针对网站可读性的调研发现，阅读体验友好段落行内应该包含 70 到 100 个字符，通常是8-15个英文单词，20-50个中文汉字，所以需要针对视图断点进行控制：

如上，在较小的屏幕上，大小为1rem的字体可以使每行完美地呈现约20-30中文，而在较大的屏幕上就需要添加断点了，如，当浏览器宽度超过 600px，则内容理想宽度是100%，最大理想宽度是700px。

响应式图片

因为布局是响应式的，所以图片也需要根据布局进行响应式展现。

弹性图片布局

首先在布局上，我们的图片肯定需要随着布局变更而弹性变化，所以不能设置固定尺寸，通常使用相对单位，设置如下样式：设置宽度100%，宽度自适应，不设置高度，图片高度将按照图片分辨率比例自适应，于是，图片便可以自动跟随容器缩放良好展现。

同时我们也有必要为图片容器设置最大宽度，避免出现图片拉伸过大，损失质量的情况：

图片响应式

是不是这样就结束了呢？当然不是，通常，PC端需要使用大尺寸图片展现，但是在移动端限于带宽和网络流量原因，必然不适合使用大尺寸图，图片内容也需要响应式，我们应该为不同的屏幕尺寸提供不同的图片，为大屏幕准备大尺寸图片，小屏幕准备尺寸更小的清晰图片，另外高分辨率 (2x, 3x) 显示屏上高分辨率图片可保证清晰度。

 

 二，负载均衡

 负载均衡建立在现有网络结构之上，它提供了一种廉价有效透明的方法扩展网络设备和服务器的带宽、增加吞吐量、加强网络数据处理能力、提高网络的灵活性和可用性。

负载均衡（Load Balance）其意思就是分摊到多个操作单元上进行执行，例如Web服务器、FTP服务器、企业关键应用服务器和其它关键任务服务器等，从而共同完成工作任务。

分类

1、软/硬件负载均衡

 

2、本地/全局负载均衡

 

部署方式 

1、路由模式 

 

2、桥接模式 

 

3、服务直接返回模式

 

算法

1、轮询法

轮询法，就是将用户的请求轮流分配给服务器，就像是挨个数数，轮流分配。这种算法比较简单，他具有绝对均衡的优点，但是也正是因为绝对均衡它必须付出很大的代价，例如它无法保证分配任务的合理性，无法根据服务器承受能力来分配任务。

2、随机法

随机法，是随机选择一台服务器来分配任务。它保证了请求的分散性达到了均衡的目的。同时它是没有状态的不需要维持上次的选择状态和均衡因子。但是随着任务量的增大，它的效果趋向轮询后也会具有轮询算法的部分缺点。

3、最小连接法

最小连接法，将任务分配给此时具有最小连接数的节点，因此它是动态负载均衡算法。一个节点收到一个任务后连接数就会加1，当节点故障时就将节点权值设置为0，不再给节点分配任务。

 

技术

1、基于DNS的负载均衡

由于在DNS服务器中，可以为多个不同的地址配置相同的名字，最终查询这个名字的客户机将在解析这个名

字时得到其中一个地址，所以这种代理方式是通过DNS服务中的随机名字解析域名和IP来实现负载均衡。

2、反向代理负载均衡（如Apache+JK2+Tomcat这种组合）

该种代理方式与普通的代理方式不同，标准代理方式是客户使用代理访问多个外部Web服务器，之所以被称为反向代理模式是因为这种代理方式是多个客户使用它访问内部Web服务器，而非访问外部服务器。

3、基于NAT（Network Address Translation）的负载均衡技术（如Linux VirtualServer，简称LVS）

该技术通过一个地址转换网关将每个外部连接均匀转换为不同的内部服务器地址，因此外部网络中的计算机就各自与自己转换得到的地址上的服务器进行通信，从而达到负载均衡的目的。其中网络地址转换网关位于外部地址和内部地址之间，不仅可以实现当外部客户机访问转换网关的某一外部地址时可以转发到某一映射的内部的地址上，还可使内部地址的计算机能访问外部网络

三，分布式数据库