网站开发技术设计

1 架构演化

大型网站的关注指标

高可用

高性能

易扩展

可伸缩

安全

大型网站的特点

高并发，大流量

高可用

海量数据

用户分布广泛，网络情况复杂

安全环境恶劣

需求快速变更，发布频繁

渐进式发展

大型网站架构演化发展过程

初始阶段，多使用LAMP来搭建，All In One即所有资源存放在一台服务器上

应用服务和数据服务分离，有独立的数据库服务器

使用缓存改善网站性能（依据是二八定律：80%的业务访问集中在20%的数据上）

这里需要考虑哪些数据适合缓存

缓存可以是本地缓存，也可以是远程分布式缓存

需要考虑使用合理的缓存策略，防止透传

使用应用服务器集群改善网站的并发处理能力

如果能通过增加一台服务器的方式来改善负载压力，就可以以同样的方式持续增加服务器来不断改善系统性能，从而实现系统的可伸缩性

这里需要考虑使用哪些负载均衡的策略

数据库读写分离

可以利用主流数据库提供的主从热备功能，通过配置两台数据库的主从关系，同时业内也有很多优秀的开源中间件如Atlas

缓存中的数据，如果更新过快，那么会持续刷新缓存，从而降低性能

使用反向代理和CDN加速网络响应

CDN和反向代理的基本原理都是缓存

CDN部署在网络提供商的机房，用户在请求网络服务时，可以从距离自己最近的网络提供商机房获取数据

反向代理部署在网站的中心机房，当用户的请求到达中心机房后，首先访问的服务器是反向代理服务器，如果反向代理服务器中缓存着用户请求的资源，那么就将其直接返回给用户

CDN的重点：——《大型网站系统与Java中间件实践》

全局调度

缓存技术

内容分发

带宽优化

使用分布式文件系统和分布式数据库系统

网站常用的数据库拆分手段是业务分库，即将不同业务的数据库部署到不同的物理服务器上

使用NoSQL和搜索引擎

ES

MongoDB

业务拆分，使用分而治之的手段将整个网站业务分成不同的产品线

SOA、服务化

中心化的 gataway方式

消息队列

不同服务访问同一个DB等

这部分十分重要，道理很简单，但是执行起来的效果千差万别。

当下火热的微服务，也是基于这种思想。

技术实现方式也有很多

分布式服务

大型网站架构演化的价值观

网站的价值在于它能为用户提供什么价值，在于网站能做什么，而不在于它是怎么做的。因此对于小型网站来说，最需要做的是位用户提供好的服务来创造价值，得到用户的认可，从而活下去，野蛮生长。

大型网站架构技术的核心价值是随网站所需灵活应对， 它是一个演化的过程

驱动大型网站技术发展的主要力量是网站的业务发展，是业务成就了技术，而不是相反。因此要摒弃为了技术而技术的套路

网站架构设计误区

一味追求大公司的解决方案

为了技术而技术

企图用技术解决所有问题

2 架构模式

分层，这是在横向方向对系统进行切分

分层的挑战在于必须合理规划层次边界和接口

分层包括物理分层和逻辑分层两种

分割，这是在纵向方向对系统进行切分

将不同的功能和服务分割开来，包装秤高内聚低耦合的模块单元

分布式

1） 分布式应用和服务；

2） 分布式静态资源；

3） 分布式数据和存储；

4） 分布式计算；

5） 分布式配置、分布式锁、分布式文件系统。。。

1） 分布式意味着服务调用必须通过网络，需要考虑带宽的影响；

2） 服务器越多，宕机的概率越大

分层和分割的目的在于小模块便于分布式部署

带来的问题：

常用的分布式方案：

集群，即多台服务器部署相同的应用，从而构成一个集群，通过负载均衡设备共同对外提供服务

即使访问量很小的分布式应用和服务，也至少要部署到两台服务器来构成一个小集群，这样可以提高系统的可用性

缓存，即将数据放在距离计算最近的位置以加快处理速度

CDN

反向代理

本地缓存

分布式缓存

异步，业务之间的消息传递不是同步调用，而是将一个业务操作分成多个阶段，每个阶段之间通过共享数据的方法异步进行协作

1） 提高系统可用性；

2） 加快网站响应速度；

3） 消除并发访问高峰

通常需要使用消息队列

带来的好处：

冗余

集群带来的必然结果

安全需求的必然结果

自动化，DevOps思维，尽量减少人工干预

自动化发布

自动化代码管理

自动化测试

自动化安全监测

自动化部署

自动化监控

自动化报警

自动化失效转移、恢复

自动化分配资源

......

安全

3 大型网站核心架构要素

性能

一个性能问题可能会导致网站用户严重流失

衡量性能的指标：响应时间、TPS、系统性能计数器等

可用性

没有网站可以完美的7*24运行

网站高可用结构的前提是必然会出现服务器宕机，儿高可用设计的目标是当服务器宕机时，服务或者应用依然可用

必要的手段是集群，即冗余

伸缩性，即通过不断向集群中加入服务器的手段来环节不断上升的用户并发访问压力和不断增长的数据存储需求

衡量标准：是否可以构建集群；是否可以方便的向集群中添加新的服务器

扩展性，直接关注网站的功能，保证可以快速响应需求变更

衡量标准： 网站增加新的业务产品时，是否对现有业务透明无影响

安全性

衡量标准： 针对现存和潜在的各种攻击和窃密手段，是否可以有效的应对

4 瞬时响应 - 网站的高性能架构

不同视角下的网站性能

用户视角

主要是端到端的感觉

主要通过前段优化的手段来提升用户体验

开发人员视角

主要关注应用程序本身以及相关子系统的性能，包括响应延迟、系统吞吐量、并发处理能力、系统稳定性等

主要优化手段： 使用缓存加速数据读取、使用集群提高吞吐能力、使用异步消息加快请求响应、使用代码优化提升程序性能

运维人员视角

主要关注基础设施性能和资源利用率

主要优化手段： 建设优化骨干网、使用高性价比定制服务器、利用虚拟化技术优化资源利用率

性能测试指标

响应时间，即应用执行一个操作需要的时间，包括从发出请求开始到收到最后响应数据所需要的时间

并发数，即系统能够同时处理的请求的数目，也反映了系统的负载特性

吞吐量，即单位时间内系统处理的请求数量，体现系统的整理处理能力

性能计数器， 描述服务器或者操作系统性能的一些数据指标

性能测试方法

性能测试，以系统设计初期规划的性能指标为预期目标，对系统不断增压，验证系统在资源可接受范围内，是否能达到性能预期

负载测试，对系统不断的增加并发请求，知道系统的某项或者多项性能指标达到安全临界值

压力测试，超过安全负载的情况下，继续对系统增压，直到系统崩溃或者不能再处理任何请求

稳定性测试，在特定硬件、软件、网络情况下，给系统加载一定压力，是系统运行较长一段时间，来观察系统是否稳定

Web前端优化

浏览器访问优化

减少http请求

使用浏览器缓存

启用压缩

CSS放在页面最上面，JavaScript放在页面最下面

减少Cookie传输

CDN加速

反向代理

应用服务器性能优化

分布式缓存

一般会使用消息队列，带来的额外好处是会削平峰值

1）不同的缓存服务器之间进行通信，例如JBoss Cache；

2）不同缓存服务器之间不进行通信，例如Memcached

缓存从本质上来说，就是一个内存hash表

缓存需要缓存那些读写比很高、很少变化的数据，一般来说读写比在2:1以上时，缓存才有意义

应用程序读取数据时，首先到缓存中读取，如果缓存不存在或者已失效，再访问数据库，同时将新的数据放入缓存

缓存也需要注意缓存热点数据

缓存预热，在新启动的缓存系统中，在启动时就加载热点数据，这样启动后就可以直接使用

缓存穿透， 应用持续大量访问不存在的数据，因为这类数据不存在于缓存中，因此会大量访问数据库，从而降低性能

对于分布式缓存来说，目前有两类：

异步操作

使用集群

代码优化

多线程

1） 将对象设计成无状态对象；

2） 使用局部对象；

3） 并发访问资源时使用锁

需要注意线程安全问题，方法：

资源复用

主要是单例和资源池（对象池）

数据结构，选择合适的算法

垃圾回收

合理设置垃圾回收策略

存储性能优化

机械硬盘 vs 固态硬盘

B+树 vs LSM树

RAID vs HDFS

5 万无一失 - 网站的高可用架构

网站可用性度量

网站不可用时间 = 故障修复时间点 - 故障发现时间点

网站年度可用性指标 = （1 - 网站不可用时间/年度总时间）* 100%

一般以几个9来表示，2个9是基本可用，网站年度不可用时间小于88小时；3个9是较高可用，网站年度不可用时间小于9小时；4个9是具有自动恢复能力的高可用，网站年度不可用时间小于53分钟；5个9是极高可用性，网站年度不可用时间小于5分钟

网站高可用架构的设计目标是保证服务器硬件故障时服务依然可用、数据依然保存并能够被访问

网站高可用架构的主要手段：数据和服务的冗余备份以及失效转移，一旦服务器宕机，就将服务切换至其他可用的服务器上。

高可用的应用

无状态应用： 应用服务器不保存业务的上下文信息，而仅根据每次请求提交的数据进行相应的业务逻辑处理，多个服务实例之间完全对等，请求提交到任何一个服务器上，处理的结构都是相同的。

通过负载均衡进行无状态服务的失效转移

负载均衡： 主要使用在业务量和数据量较高的情况下，当单台服务器不足以承担所有的负载压力时，通过负载均衡手段，将流量和数据分摊到一个集群组成的多台服务器上， 以提升整体的负载处理能力

应用服务器集群的Session管理

Session复制

Session绑定

利用Cookie记录Session

Session服务器

高可用的服务

分级管理

核心服务与非核心服务隔离

核心服务优先使用高性能服务器

超时设置

异步调用

必须满足可以使用异步调用方式

服务降级

幂等性设计

服务高可用（高可靠）一直是美团外卖的第一要求，为了提高可用性，做了很多策略，包括并不限于上文提出的各种架构设计方案。

其实造成线上问题的很大一部分原因是由于发版造成的，也体现出了SOP的重要性。

关于降级与依赖隔离，可以考虑采用Hystrix实现自动降级与依赖隔离 。

高可用的数据

数据一旦出现问题，对于网站往往是毁灭性的打击，因此保护网站的数据就是保护企业的命脉。

主要手段：数据备份和失效转移

缓存服务高可用

观点一：缓存服务已经承担了业务中绝大多数的数据读取访问，因此需要同样保证高可用

观点二：缓存服务并不是数据存储服务，出现服务不可用导致数据丢失应从别的手段解决，而不是提高缓存服务本身高可用

缓存服务器集群中单机故障，集群规模较大时，数据丢失比例和数据负载压力影响很小。

CAP原理： 一个提供数据服务的存储系统无法同时满足数据一致性（Consistency）、数据可用性（Availibility）、分区耐受性（Parition Tolerance）这三个条件

数据高可用含义：

副本间数据一致

多个副本可读

同时写入数据副本

1）数据持久性

2）数据可访问性

3）数据一致性

数据一致性分类：

1） 数据强一致；

2） 数据用户一致；

3） 数据最终一致

数据备份

1） 异步热备；

2） 同步热备

冷备的优点是简单和廉价，成本和技术难度较低，缺点是不能保证数据最终一致

热备分为两种：

失效转移

1） 心跳检测（Keepalived、Heartbeat）；

2） 应用程序访问失败报告

失效确认：

访问转移

数据恢复

高可用网站的软件质量保证

网站发布，它的过程和服务器宕机效果箱单，其对系统可用性的影响也 类似

一般采取批量更新的方式进行，不会一次关掉集群中的全部服务器

自动化测试

一般使用Selenium来进行测试

预发布验证

预发布服务器是一种特殊用途的服务器，它和线上的正式服务器唯一的区别是没有配置在负载均衡服务器上，外部用户无法访问

代码控制

主干开发，分支发布

分支开发，主干发布，这是目前使用的主流方式

自动化发布

火车模型：将每个应用的发布过程看做一次火车旅程，火车定点运行，期间有若干站点，每一站都进行例行检查，不通过的项目下车，通过的项目继续坐着火车旅行，直到火车到达终点。

实际中，可能所有项目在途中都下车了，这样火车不得不回到原点，等待�...

现在是移动互联网快速发展的时期，渐渐不少人查看网页的习惯也在做者改变。不小年轻人现在很喜欢通过手机访问不同的网站，因此企业开发手机网站也成为其抢占移动端的发嘛。手机网站开发技术的不断成熟，让开发网站变得不在困难，一般企业手机网站开发都需要几个重要部分组成。

一、手机网站开发的主题确认

对于企业开发网站来说第一步就是确立好网站的主题，这也是建立手机网站的关键。建立网站的主题主要反映了开发网站的目的，同时为网站内容的整体连续性提供给的依据。在确立了网站的主题后，之后填充网站内容写作就变得比较容易了，手机网站的主题设立的信息贯穿整个网站。当然企业在确定开发手机网站时就应该对整个网站的开发发展提供一个全面的计划。

二、开发手机网站的内容建设

在确定手机网站的主题后，接下来的工作就是建设网站的内容。网站内容的建设在具备亲和力的条件下，还需要与确认的主题契合。手机网站的建设除了对企业本身有宣传作用、展示产品，更重要的还是为企业带来利润，通过网站让更多客户了解企业与企业达成合作。

三、手机网站设计

在完成内容的填充后，接下来需要完成的就是网页的设计了。网页的设计也是非常重要的，现在各类不同的手机网站众多，如果想要得到客户的访问，好看的设计无疑是可以为网站增色不少。人是视觉动物，对好看的东西都会忍不住多看几眼，而对手机网站来说也是，如果企业的网站内容丰富但网页设计很丑，客户也很难多看几眼你的网站。

网站的设计主要体现在网站结构、色调、栏目等，而设计问题在网站制作中是普遍存在的。版式设计也基本都是那些模板，网站不会利用企业的特点进行装饰，网站的设计需要有个性，因此企业在对待网站设计工作时需要非常仔细，选择一家有资质的设计公司为企业设计富有企业特色的手机网站设计。

四、手机网站开发问题

完成设计后，到了对手机网站进行审查的阶段。在提交网站方案时需要对作对比，慎重的审查网站开发设计方案。对于网站建设来说，实际并不是一个简单的工作，如何从企业的角度出发进行规划、营造一个实用的网站，需要与专业的开发这进行考论，经过深思熟虑后作出终的决定。

好的手机网站开发有利益提高企业的形象，树立口碑，提高企业的收益。但同时开发不善的手机网站也会对企业造成负面影响，因此企业在开发网站时需要了解其步骤，然后经过深思熟虑后作出决定。

BY：深圳尚网科技有限公司 https://itnoo/

现如今，越来越多的移动和桌面端应用开始应用HTML、JS和CSS进行开发，对于网页开发和设计更是如此。目前这种局面也催生了更多新的网页技术，包括React.js、Angular以及Node.js这样的库。此外，随着需求及项目的进一步细化，开发者社区几乎每天都会出现新的库和开发工具，作为网页开发者或设计师的你，自然很有必要去了解和掌握当下最新的、实用的工具，持续优化工作方法、有效提高开发进度。

以下小编收集了一系列优秀的开发和设计工具，包括在线/离线搭站工具、开源代码工具、在线代码生成器、排版工具等，一起看看吧。

1.

WordPress – 一站式网站搭建工具

· 价格：基础版终身免费，个人版HK$30，高级版HK$63，商务版HK$199

· URL：https://zh-cn.wordpress/

· 推荐指数：★★★★★

WordPress – 一站式网站搭建工具

WordPress是使用PHP语言开发的博客平台，支持PHP和MySQL数据库的服务器上架设属于自己的网站，也可以把它作为一个CMS（内容管理系统）来架设商业网站，提供的功能包括：所见即所得的文章编辑器、多作者共同写作、为搜索引擎而优化的永久链接、生成和使用静态页面、Trackback/Pingback、会员注册登录等。

特色功能：

· 安装方式简单、易用，内置许多搭站辅助工具，一键点击即可完成安装。

· 插件工具众多，支持使用扩充其功能，适合DIY丰富的网站内容。

· 第三方开发的免费模板、主题丰富，各色各样，应有尽有！

· SEO搜索友好，收录时间快。

· 强大的社区支持，成千上万的开发者贡献和审查WP，整个环境安全且活跃。

2.

Mockplus – 更快、更简单的Web/Mobile/Desktop设计平台

价格：基础版免费，个人版￥199/年，团队版￥999/年，企业版￥5999/年

URL：https://mockplus/

推荐指数：★★★★★

Mockplus –更快更简单的设计平台

作为国内势头正猛的工具软件，Mockplus（也叫摹客）适合软件团队、个人在软件开发的设计阶段使用，交互快、设计快、演示快、上手快，很好地顺应了当前敏捷开发（AgileDevelopment）的大趋势。同时，秉承“关注设计，而非工具”的理念，摹客提供一系列独家实用的功能，帮助用户提高工作及开发进度。

特色功能：

界面设计。组件开箱即用，提供项目和页面模板、自定义组件库、母版、组件样式、格子、自动数据填充，让设计快速复用。

团队协作。支持团队管理、角色设定和分组，可协作设计、分工编辑、多人审阅和评论、支持Sketch导入。

交互设计。拖拽鼠标即完成交互设计，支持页链接、组件交互、交互状态、交互自动还原。

工作文档。多种批注组件添加设计说明、页面流程图快速呈现业务逻辑，脑图模式快速构建页面关系。

演示分享。随时发布分享，提供8种演示方式，支持HTML在线预览和离线包等多种导出方式。

3.

Macaw – 革新性超前Web编辑器

· 价格： 免费

· URL：http://macaw.co/

· 推荐指数：★★★★

Macaw – 革新性超前Web编辑器

Macaw是目前最热门的开发工具之一，被网友戏称为“金刚鹦鹉“。它是一款基于Mac平台、支持语义HTML和简洁CSS的Web开发软件，可生成多分辨率页。同时它也可以作为设计师的图像编辑工具，提供实时的布局引擎，让元素以类似AdobePS中的呈现方式进行操作，通过编辑当前的网页图片，最后生成HTML模板和JS代码。

特色功能：

· 特定宽度功能，可以自动计算每行字符个数，也支持用户指定的宽度，生成自适应网页布局。

· 组件库功能，支持将自己设计的组件收藏和保存到库，并拖拽到任意页面中。

· 不同组件类别，可自己设计或者保存到指定的类别，并将它们快速应用到整个文档。

· 具备流计算所有必要的属性（漂浮、清除等），并将元素作为静态文件流。

4.

Weebly – 主流Web开发及设计服务商

价格：基础版免费，个人版8美金/月，Pro版12美金/月，商务版25美金/月

URL：https://weebly/

推荐指数：★★★★

Weebly – 主流Web开发及设计服务商

作为美国本土的一家自助建站服务商，Weebly使用了大量的Ajax技术，在操作性、用户友好等方面做得很好，同类型的服务商还有Webs，Yola等，但像Weebly这样针对中国用户单独增设中文网站的比较罕见。

特色功能：

· 拖拽实现编辑，无论是视频、图片、地图和文章都能拖拽到网站中，无需HTML或其他网页程序语言的支持，简单且直观。

· 专业模板设计直接使用，目前已有70个、且在持续增加中，如果懂HTML/CSS，可以直接用它们的编辑器来定制。

· 允许绑定个人的顶级域名，而且是绑定域名是免费的，直接提供IP地址即可，也可以在Weebly上购买域名。

5.

Adobe Dreamweaver – 最权威的网页开发及设计工具

价格：个人版$9.99-$82.99/月，商务版$33.99-$79.99/月

URL：https://adobe/products/dreamweaver.html

推荐指数：★★★★

Adobe Dreamweaver – 最权威的网页开发及设计工具

相信不少做开发和设计的小伙伴对DW这款软件并不陌生，它是集网页制作和管理网站于一体的WYSIWYG网页代码编辑器，通过使用HTML、CSS、JavaScript等语言，程序员和设计师几乎可以在任何地方快速制作和上线网站。支持Windows和Mac操作系统，对刚入门初学者或者需要进阶的大神来说都是不错的选择。

特色功能：

· 自适应网格，可使用CSS3自适应网格版面，创建跨平台和浏览器的兼容网页设计，采用符合业界标准的代码为各种不同设备和计算机开发项目。

· 实时视图，支持再发布前测试页面，采用最新版WebKit转换引擎，提供绝佳的HTML5支持。

· “多平面预览”面板，支持为智能手机、Tablet和个人计算机进行设计，开发人员也可以通过其为各种设备设计样式并实现渲染可视化。

结语

以上是小编力荐的网页开发和设计工具，显而易见每款工具都各有千秋，我们可以结合实际的开发需求和项目支持来做进一步选择：如果你拥有不错的开发基础、且想自己编代码来搭站，那么Macaw和DreamWeaver都是不错的选择；如果你是开发新手或者小白、更需要完全成形的三方平台来搭建网站，那么WordPress和Weebly都可以考虑；如果你更在意开发效率、网站功能以及资金预算，那么Mockplus是不二之选！