网站架构设计参考(图文)

转载请注明出处:http://blog.csdn.net/anxpp/article/details/51614973,谢谢!

1、概述

    本人并未经历过一个网站从小到大的演化过程(这种机会本来就太小,而且越来越小),现在很多网站,从建立之初就搭建在大型网站提供的云计算服务之上,需要的一切资源都可以按需购买,并且极易伸缩。不过我觉得还是有必要了解一下大型网站的演化过程。下文是参考多方资料整理得出。

2、大型网站架构演化过程

    下面就是本人参考多方资源总结而得。


    2.1、初始阶段的网站架构

    网站一开始,使用的人并不多,访问量比较小,使用一台服务器就已经完全满足要求的。我们的个人主页、博客,都可以使用如下架构:

01
    应用程序、数据库和文件等资源,都在同一台服务器上。通常也使用一些开源免费的软件来将成本最低化。

    2.2、应用服务于数据服务分离

    随着业务的发展,一台服务器终将不能满足需求。这是,可以按需将应用服务和数据服务分离:应用服务器、数据库服务器和文件服务器。
    他们根据各自的特性,对cpu、内存和硬盘等的需求也各不相同:
02
    应用服务于数据服务分离后,不同特性的服务器担任不同的角色, 系统整体性能将大大提高。

    2.3、使用缓存改善性能

    我们很清楚,并不是所有的资源都被平均访问到,刚好相反,一部分资源可能会被非常频繁的访问,而另外一些则几乎不会被访问。
    如果我们将最常被访问的资源直接放到内存中(或其他的缓存方式),由于不再需要从数据库(硬盘)中读取,速度将会大大提高,不过也会增加对内存的需求。
    而缓存一般分两种,应用服务器本地缓存和远程缓存。本地缓存因内存原因,不适合放太多,所以可以专门部署大内存的服务器,当远程缓存服务器(速度比本地缓存会慢些)。而目前的缓存技术也比较多,常见的NoSQL数据库也常被用来当缓存工具使用,本地缓存也能借助一些框架实现,这时的架构如下:
03
    使用缓存后,数据访问压力会大大减小。

    2.4、使用服务器集群

    业务继续发展后,高并发的访问不可避免,使用服务器集群是比较常用的有效手段。
    这相当于将一台应用服务器复制多个,然后通过负载均衡服务器,将请求分发到不同的应用服务器,他们干的是相同的事,不过压力会大大减小:
04
    根据高并发的情况,可以增加或者减少其中的应用服务器,从而使系统有较好的伸缩性。

    2.5、数据库读写分离

    虽然缓存能一定程度上优化数据访问,但是当业务发展一定程度时,数据库的负载压力可能还是会过高,从而成为瓶颈。
    目前主流的数据库,都支持配置主从数据库,利用这一特性,我们可以部署两台数据库服务器,一台用于写操作,这是主数据库,而从数据库用于读,主数据库会将数据以数据库提供的机制,增量同步到从数据库,这样就改善了数据库的负载压力:
06
    为了便于应用服务器的扩展以及更容易的访问主从两个数据库,通常会从应用服务器中独立出来一个专门用来访问数据库的数据访问模块。

    2.6、使用反向代理和CDN加速访问

    CND和反向代理都是使用缓存的原理,区别在于前者部署与网络提供商的机房,使用户咋请求资源时,从就近的机房获取数据;后者部署于应用服务器前端,用户请求到达后,会有限返回服务器中缓存的可用资源。
07
    这两种技术主要目的就是加速用户的访问,使数据返回更快,同时还能减轻后端服务器的负载压力。

    2.7、分布式文件服务器和分布式数据库

    随着业务的日益增长,任何单个强大的服务器都不能满足业务的需求,这时可以使用分布式数据库和分布式文件服务器。
    在数据已经达到服务器不能支持的时候,就可以拆分业务,让他们使用的数据库服务器部署在不同的物理服务器上:
09

    2.8、使用NoSQL和搜索引擎

    通常使用NoSQL和搜索引擎技术来处理复杂的数据存储和检索:
10

    2.9、业务拆分

    随着业务的进一步发展,也使其变得更加复杂,导致整个系统难以维护。
    这时就可以将整个业务拆分成不同的产品线,再按需将各个产品线拆分成不同的应用,并对这些应用单独部署维护,然后以超链接、消息队列数据分发和访问统一的数据存储系统来关联这个完整的系统:
09

    2.10、分布式服务

    随着业务的拆分得越来越小,整个系统的关联上也变得日益复杂,部署维护依然是一件非常困难的事。
    这时可以将这些业务中一些通用的地方提取出来独立部署加以复用,提供统一的服务:
10

3、其他

    目前,实现以上架构都有大量成熟稳定的技术支持,博客后续也会陆续更新添加相关技术的文章。
    对于架构的选择,不能一味追求大而全,应该以当前业务及后续发展合理选择,既能节约直接成本,还能降低开发、部署和维护的成本。
  • 6
    点赞
  • 24
    收藏
    觉得还不错? 一键收藏
  • 7
    评论
YOLO高分设计资源源码,详情请查看资源内容中使用说明 YOLO高分设计资源源码,详情请查看资源内容中使用说明 YOLO高分设计资源源码,详情请查看资源内容中使用说明 YOLO高分设计资源源码,详情请查看资源内容中使用说明YOLO高分设计资源源码,详情请查看资源内容中使用说明YOLO高分设计资源源码,详情请查看资源内容中使用说明YOLO高分设计资源源码,详情请查看资源内容中使用说明YOLO高分设计资源源码,详情请查看资源内容中使用说明YOLO高分设计资源源码,详情请查看资源内容中使用说明YOLO高分设计资源源码,详情请查看资源内容中使用说明YOLO高分设计资源源码,详情请查看资源内容中使用说明YOLO高分设计资源源码,详情请查看资源内容中使用说明YOLO高分设计资源源码,详情请查看资源内容中使用说明YOLO高分设计资源源码,详情请查看资源内容中使用说明YOLO高分设计资源源码,详情请查看资源内容中使用说明YOLO高分设计资源源码,详情请查看资源内容中使用说明YOLO高分设计资源源码,详情请查看资源内容中使用说明YOLO高分设计资源源码,详情请查看资源内容中使用说明YOLO高分设计资源源码,详情请查看资源内容中使用说明YOLO高分设计资源源码,详情请查看资源内容中使用说明YOLO高分设计资源源码,详情请查看资源内容中使用说明YOLO高分设计资源源码,详情请查看资源内容中使用说明YOLO高分设计资源源码,详情请查看资源内容中使用说明YOLO高分设计资源源码,详情请查看资源内容中使用说明YOLO高分设计资源源码,详情请查看资源内容中使用说明YOLO高分设计资源源码,详情请查看资源内容中使用说明
图文混排是一种常见的网页设计方式,可以让页面更加丰富多彩。下面是一个简单的示例代码,供您参考: ```html <!DOCTYPE html> <html> <head> <title>图文混排网页设计</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style type="text/css"> .container { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; margin: 20px; } .img-box { flex: 1 1 300px; margin: 10px; } .img-box img { display: block; width: 100%; } .text-box { flex: 1 1 400px; margin: 10px; text-align: justify; } h2 { margin-top: 0; } p { margin-top: 5px; line-height: 1.5; } </style> </head> <body> <div class="container"> <div class="img-box"> <img src="https://picsum.photos/id/237/300/200" alt="图片"> </div> <div class="text-box"> <h2>标题</h2> <p>这是一段文字,用于介绍图片内容。</p> <p>这是另一段文字,可以继续介绍内容。</p> </div> </div> <div class="container"> <div class="text-box"> <h2>标题</h2> <p>这是一段文字,可以先介绍内容。</p> <p>这是另一段文字,继续介绍。</p> </div> <div class="img-box"> <img src="https://picsum.photos/id/1041/300/200" alt="图片"> </div> </div> </body> </html> ``` 这个示例代码使用了 flexbox 布局来实现图文混排效果。通过在容器(`.container`)上设置 `display: flex;`,使得其中的子元素可以以行或列的方式排列。在子元素(`.img-box` 和 `.text-box`)上设置了 `flex` 属性来控制它们的大小和比例。最后,通过在文本框(`.text-box`)上设置 `text-align: justify;`,让文字两端对齐,使得排版更加美观。 您可以根据自己的需求修改样式,以实现您想要的图文混排效果。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值