大型网站核心架构要素

关于什么是架构,一种比较通俗的说法是“最高层次的规划,难以改变的决定”,一般来说,除了当前的系统功能需求外,软件架构还需要关注性能、可用性、伸缩性、扩展性和安全性这5个架构要素,架构设计过程中需要平衡这5个要素之间关系以实现需求和架构目标。也可以通过考察这些要素来衡量一个软件架构设计的优劣。

3.1性能

性能是一个网站的重要指标,很多时候网站性能问题是网站架构升级优化的触发器。

从用户浏览器到数据库,影响用户请求的所有环节都可以进行性能优化。

在浏览器端可以通过浏览器缓存、使用页面压缩等手段改善性能,

还可以使用CDN,将网站静态内容分发至离用户最近的服务商机房。可以在网站机房部署反向代理服务器,缓存热点文件,加快请求响应速度,减轻应用服务器负载压力。

还可以通过异步操作将用户请求发送至消息队列等待后续任务处理,而将当前请求直接返回响应给用户。

在代码层面,也可以使用多线程、改善内存管理等手段优化性能。

在数据库服务器端,索引、缓存、sql优化等性能优化手段都已经比较成熟。

3.2可用性

网站使用的服务器硬件通常是普通的商用服务器,很有可能会出现服务器硬件故障而宕机。大型网站通常有上万台服务器,每天都必定会有一些服务器宕机,因此网站高可用设计的目标就是当服务器宕机时,服务或应用依然可用。

网站高可用性的主要手段是冗余。对于应用服务器来说,多台应用服务器通过负载均衡设备组成一个集群共同对外提供服务,任何一台服务器宕机,只需把请求切换到其他服务器就可实现应用的高可用性。

对于存储服务器,由于其上存储着数据,需要对数据进行实时备份,当服务器宕机时需要将数据访问转移到可用的服务器上,以保证继续有服务器宕机时数据依然可用。

除了运行环境,网站的高可用还需要软件开发过程的质量保证。衡量一个系统架构设计是否满足高可用的目标,就是加上系统中任何一台或者多台服务器宕机时,系统整体是否依然可用。

3.3伸缩性

所谓伸缩性就是指通过不断向集群中加入服务器的手段,来缓解不断上升的用户并发访问压力和不断存储的数据存储需求。

衡量架构伸缩性的主要标准就是是否可以用多台服务器构建集群,是否容易像集群中添加新的服务器。加入新的服务器后是否可以提供和原来无差别的服务。集群中可容纳的总的服务器数量是否有限。

对于应用服务器集群,只要服务器上不保存数据,所有服务器都是对等的,通过使用合适的负载均衡设备就可以向集群中不断加入服务器。

对于缓存服务器集群,加入新的服务器可能会导致缓存路由失效,进而导致集群中大部分缓存数据都无法访问。虽然缓存的数据可以通过数据库重新加载,但是如果应用已经严重依赖缓存,可能会导致整个网站崩溃。需要改进缓存路由算法保证缓存数据的可访问性。

关系数据库虽然支持数据复制,主从热备等机制,但是很难做到大规模集群的可伸缩性,因此关系数据库的集群伸缩性方案必须在数据库之外实现,通过路由分区等手段将部署有多个数据库的服务器组成一个集群。

至于大部分的NoSQL数据库产品,由于其先天就是为海量数据而生,因此其对伸缩性的支持都非常好。

3.4扩展性

不同于其他架构主要关注非功能性需求,网站的扩展性架构直接关注网站的功能需求。

衡量网站架构扩展性好坏的主要标准就是在网站增加新的业务产品时,是否可以实现对现有产品透明无影响,不需要任何改动或者很少改动。

网站伸缩性架构的主要手段是事件驱动和分布式服务

事件驱动架构在网站通常利用消息队列实现,将用户请求和其他业务事件构成消息发布到消息队列,消息的处理者作为消费者从消息队列中获取消息进行处理。通过这种方式将消息产生和消息处理分离开,可以透明的增加新的消息生成者任务或新的消息消费者任务。

分布式服务则是将业务和可复用服务分离开来,通过分布式服务框架调用。新增产品可以通过调用可复用的服务实现自身的业务逻辑,而对现有产品没有任何影响。可复用服务升级变更的时候,也可以通过提供多版本服务对应用实现透明升级,不需要强制应用同步变更。

3.5安全性

互联网是开放的,任何人在任何地方都可以访问网站。网站的安全架构就是保护不受恶意访问和攻击,保护网站的重要数据不被窃取。

衡量网站安全架构的标准就是针对现存和潜在的各种攻击与窃密手段,是否有可靠的应当策略。

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

资源下载链接为: https://pan.quark.cn/s/d9ef5828b597 在本文中,我们将探讨如何通过 Vue.js 实现一个带有动画效果的“回到顶部”功能。Vue.js 是一款用于构建用户界面的流行 JavaScript 框架,其组件化和响应式设计让实现这种交互功能变得十分便捷。 首先,我们来分析 HTML 代码。在这个示例中,存在一个 ID 为 back-to-top 的 div 元素,其中包含两个 span 标签,分别显示“回到”和“顶部”文字。该 div 元素绑定了 Vue.js 的 @click 事件处理器 backToTop,用于处理点击事件,同时还绑定了 v-show 指令来控制按钮的显示与隐藏。v-cloak 指令的作用是在 Vue 实例渲染完成之前隐藏该元素,避免出现闪烁现象。 CSS 部分(backTop.css)主要负责样式设计。它首先清除了一些默认的边距和填充,对 html 和 body 进行了全屏布局,并设置了相对定位。.back-to-top 类则定义了“回到顶部”按钮的样式,包括其位置、圆角、阴影、填充以及悬停时背景颜色的变化。此外,与 v-cloak 相关的 CSS 确保在 Vue 实例加载过程中隐藏该元素。每个 .page 类代表一个页面,每个页面的高度设置为 400px,用于模拟多页面的滚动效果。 接下来是 JavaScript 部分(backTop.js)。在这里,我们创建了一个 Vue 实例。实例的 el 属性指定 Vue 将挂载到的 DOM 元素(#back-to-top)。data 对象中包含三个属性:backTopShow 用于控制按钮的显示状态;backTopAllow 用于防止用户快速连续点击;backSeconds 定义了回到顶部所需的时间;showPx 则规定了滚动多少像素后显示“回到顶部”按钮。 在 V
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值