浏览型网站静态化架构设计

合集下载

6_静态网页制作

6_静态网页制作

换行

对于需要换行的地方,应加上<Br>标记, 有了它浏览器会自动将右边的文字转移至 下一行。请注意, <Br>是单标记。 示例:没有换行效果 换行效果
段落标记
为了使文本排列的整齐和清晰,文字段落 之间常用<P>和 </P>来做标记。 </P>是可 以省略的,因为下一个<P>的开始就意味着 上一个<P>的结束。 <P>标记还有一个属性ALING,它用来指明 字符显示时的对齐方式,一般值有 CENTER、LEFT、RIGHT3种。 示例:段落标记效果
6.2.2 页面布局与文字标记

文本是网页传播信息的基本载体,在网页 中的重要地位可想而知。对于任何一个基 本网页来说,文本都是必不可少的,文本 的格式化也是非常重要的。
标题

HTML中提供了相应的标题标记<Hn>。HTML 总共提供6个等级的标题,n越小标题字号就越大。 字号大 <H1>„ </H1> 一级标题 <H2>„ </H2> 二级标题 <H3>„ </H3> 三级标题 <H4>„ </H4> 四级标题 <H5>„ </H5> 五级标题 字号小 <H6>„ </H6> 六级标题 示例:标题效果
1. 2. 3. 4.
5.
简单动态页面处理流程 浏览器发出对动态页面的请求; Web服务器找到该页面,传给应用服务器; 应用服务器扫描页面,执行代码,生成结果; 应用服务器把结果页面返回给Web服务器; Web服务器发回该结果页面给浏览器。

前端开发中的静态网页生成和优化技术

前端开发中的静态网页生成和优化技术

前端开发中的静态网页生成和优化技术随着互联网的发展,网页的加载速度成为了用户体验的重要指标之一。

在前端开发中,静态网页生成和优化技术成为了提升网页性能的关键。

一、静态网页生成的意义静态网页生成是指在网页请求到达服务器时,将动态生成的内容事先保存成静态文件,并将其缓存在服务器上,再由服务器直接提供给用户。

相比动态生成网页,在静态网页生成的过程中,服务器没有多余的数据库查询等操作,可以显著减少服务器响应时间,提高网页加载速度。

静态网页生成的核心是将动态内容缓存成静态文件,以便下次请求时直接提供给用户,无需重新生成,从而减少对服务器资源的消耗。

这种技术适用于内容更新频率较低,但访问量较大的网站,例如新闻网站、企业官网等。

二、静态网页生成的实现方式静态网页生成的实现方式有多种,其中较为常见的是使用静态网页生成器和编译器。

1. 静态网页生成器静态网页生成器是一种工具,可以将动态内容转化为静态文件,并提供一些辅助功能,例如自动化部署、资源优化等。

目前比较流行的静态网页生成器有Jekyll、Hugo、Gatsby等。

这些工具通常基于模板语言和标记语言,开发者可以通过编写模板和写文章的方式,生成静态网页。

这样,每次更新内容时,只需要重新生成相关的静态文件,提高了网页更新的效率。

2. 编译器编译器是将一种源代码语言转化为另一种目标代码语言的工具。

在前端开发中,常见的使用编译器的方式是将高级语言(例如TypeScript、Less等)编译为浏览器可识别的低级语言(例如JavaScript、CSS)。

通过使用编译器,开发者可以更灵活地使用一些新的语言特性和语法糖,而无需担心浏览器的兼容性问题。

同时,编译器还可以对代码进行一些优化,从而提高网页的加载速度。

三、静态网页优化技术静态网页生成只是提升网页性能的一个环节,还需要进一步优化以达到更好的效果。

以下是一些静态网页优化的技术。

1. 图片压缩和懒加载图片通常是网页中占用带宽和加载时间最多的资源之一。

高访问量系统的静态化架构设计

高访问量系统的静态化架构设计
攻击和恶意请 求。 这 些流量有些是可预测的有些 括J a v a S c r i p t 动态 生成 的部分 , 也 就是页 面 中 是不可预测和防范的。像这种流量突然暴增 的情 H T ML 代码不能显示含有浏览器相 关的D O M。 例 况对系统的冲击很大 , 有时候瞬间流量可达2 O 万 如不能含有用户的姓名 、 身份标识及C o o k i e 相关
Co v er S t o r y 封面报道 l高性能 网站架构
高访 问量系统 的静态化架构设计
文, 许令波
何谓高访 问量 系统?以J a v a 系统为例 , 正常的用 0 2S , 所以如何让系统有更好的性能和稳定性是我 户请求要支撑2 0  ̄/ s 的Q P S , 对一个有复杂业务的 们面 临的一 大挑 战 。
下我 们 已做 过哪些 优化工 作 ,这些 工作对我 们 后续的优化也至关重要 。 淘宝从当初一个很小的 系统发展到今天,中间经历了很多次系统迭代和

每秒约有2 0 k 的请 求到后端服务器 。这个高访问 升 级 。
量系统的基本情况为 : 页面大小为4 5 k ,压缩后为 ・2 0 0 9 年系统拆分、 静态文件合并 、 前端页面异步 1 5 k , 峰值带宽可达2 G b p s 。服务端页面平均R T 约 化和 J s 0 N化 。
前面 的HT T P 请 求经过负载均衡设备分配到某个
域名对应的应用集群 , 再 经过Ng i n x 代理 ̄ j [ J B o s s 或者T o mc a t 容器 ,由它们 负责具体 处理用户请
・2 0 1 3 年统一c a c h e 、C D N 化、网络协议。
求。目前像这些高访问量 系统大部分需要读取的

网站架构设计

网站架构设计

网站架构设计——搭建一个高效、稳定的网络平台随着互联网的飞速发展,成为各大企业所关注的问题。

一个优秀的网站架构可以提升用户体验、挖掘信息价值以及优化网络性能。

一个糟糕的网站架构则可能导致访问延迟、数据泄露等问题,给用户带来不良影响。

因此,如何设计出一个高效、稳定的网络平台,成为越来越多企业所关注的关键问题。

一、什么是?指的是对于一个网站的整体设计规划。

该设计应该包括网站的前后端开发、数据存储、安全防护、系统管理等各个方面。

好的需要考虑面向未来的扩展性、高可用性以及容灾能力。

二、的基础1. 首先需要有一个明确的目标在进行的过程中,首先需要明确该网站的目标是什么。

是为了提供产品信息,还是为了提供交流平台?还是为了收集客户信息并实现精准营销?不同的目标需要根据不同的需求进行特定的功能设计和开发,才能更好地满足用户的需求。

2. 其次需要对数据进行分析在进行之前,需要对数据进行详细的分析。

正如心理学上所说,最好的预测未来的方式是研究过去。

通过对数据的分析,可以更加清晰地了解用户行为规律,进而帮助优化用户的使用体验。

3. 系统要高可用高可用是指系统在面临各种不同类型的侵袭、故障或者灾难时,能够确保系统的完整性和可用性。

为了实现网站高可用性,需要对负载均衡、容灾备份、数据备份等方面进行考虑。

4. 安全是关键应该具备确保安全性的设计思路。

从数据库安全、传输加密以及审计日志等方面来保护数据的完整性和安全性。

三、的实现1. 前端设计网站的前端设计需要考虑到用户体验,具备简明易懂、美观大方、易用等特点。

页面需要适应不同终端设备的不同分辨率,进行响应式布局。

同时,为了让用户搜索到更多的内容,前端设计应该便于SEO。

2. 后台开发后台开发需要重视代码的可维护性、可阅读性、可扩展性以及速度。

如何提升系统的响应速度?如何设计数据库结构以满足高并发的要求?在后台开发的过程中都是需要考虑的问题。

3. 数据存储选用合适的数据存储方案非常重要。

静态网站毕业设计论文

静态网站毕业设计论文

静态网站毕业设计论文静态网站毕业设计论文一、引言随着互联网的迅猛发展,网站已经成为人们获取信息、进行交流和展示自己的重要平台。

而在网站设计与开发中,静态网站一直以来都扮演着重要的角色。

本论文将探讨静态网站在毕业设计中的应用,分析其特点、优势和不足之处,并提出相关的解决方案。

二、静态网站的特点静态网站是指在服务器上预先生成好的网页文件,用户访问时服务器直接返回这些文件,不需要进行数据库查询或动态生成页面。

其特点如下:1. 简单易懂:相对于动态网站而言,静态网站的代码结构相对简单,易于理解和维护。

2. 快速加载:静态网站不需要进行数据库查询或动态生成页面,因此加载速度较快,能够提供更好的用户体验。

3. 安全性高:由于静态网站没有与数据库的交互,因此在安全性方面相对较高,减少了被黑客攻击的风险。

三、静态网站的优势1. 适用于小型项目:对于一些规模较小的项目,静态网站是一个较为理想的选择。

它不需要复杂的后台逻辑和数据库支持,能够快速搭建和部署。

2. 降低服务器压力:相较于动态网站,静态网站在访问时不需要进行数据库查询和动态页面生成,减轻了服务器的负载,提高了网站的性能。

3. 提高用户体验:由于静态网站加载速度快,用户能够快速访问到所需信息,提高了用户的满意度和体验。

四、静态网站的不足然而,静态网站也存在一些不足之处,主要体现在以下几个方面:1. 更新维护困难:静态网站的内容更新需要手动修改网页文件,对于频繁更新的网站来说,维护起来较为繁琐。

2. 缺乏个性化定制:静态网站的页面结构和内容固定,难以实现个性化的交互和用户体验。

3. 不适用于大规模项目:对于大规模的网站项目而言,静态网站的维护和扩展性较差,无法满足复杂的业务需求。

五、解决方案为了克服静态网站的不足之处,可以采取以下解决方案:1. 引入动态元素:在静态网站中引入一些动态元素,如JavaScript、CSS动画等,增加网页的交互性和视觉效果。

2. 使用静态网站生成工具:利用一些静态网站生成工具,如Jekyll、Hugo等,可以简化静态网站的搭建和维护过程,提高效率。

陈绪兵毕业设计(静态网页设计)

陈绪兵毕业设计(静态网页设计)

毕业设计题目静态网页设计学生姓名陈绪兵学号 2 0 9 0 2 0 8 1 2 1 5专业计算机网络技术班级 2 0 0 9 0 2 班指导教师孙俊完成日期2011 年11 月 15 日目录摘要 (1)关键词: (1)Abstract (1)第1章绪论 (2)1.1Internet的历史与发展 (2)1.2 网页的概述 (3)第2章开发软件简介 (3)2.1 Dreamweaver 简介 (3)2.2 Html语言简介 (4)2.3 Flash 简介 (5)2.4 Photoshop 简介 (6)2.5 本章小结 (7)第3章网络需求分析 (7)3.1 相关术语及解释 (8)3.2 个人网站的由来与发展 (8)3.3我的个人网页的设计与规划 (9)3.3.1 我的个人网页的概貌 (9)3.3.2 个人网页的设计理念 (10)3.4 网页小结 (14)第4章结论 (15)致谢 (16)参考文献 (17)静态网页的设计与制作学生:陈绪兵指导老师:孙俊(黄冈职业技术学院)摘要本文就网站的设计与制作,以软件工程的方法对全过程进行了分析与研究,本文的主要工作集中在:1.对web页进行概述,主要是对internet的历史和发展作了回顾,并对WEB页的定义和特性进行阐述,并对网站设计过程中使用的工具和技术简单的介绍.2.对网站建设中提及的术语进行简单解释,并对网站的由来和发展进行讨论。

3.对自己设计的网站从设计理念到制作的过程进行详细分析.4.使用Dreamweaver+Flash+photoshop 等软件的设计方式进行解析.5.就网站的设计与制作提出自己的观点以及建议。

关键词:网站设计工具设计方案创意风格Static web design and productionAbstractThis website design and production, with the method of software engineering to process the analysis and research, this paper main work concentrates in:1. The paper to web page is mainly to the Internet's history and development,and a review of the definition and characteristics of web pages is expounded, and the website design process using the tools and techniques of simple introduction.2. The website construction mentioned in terms of website, and simple explanation of the origin and development are discussed.3. For the design of your own website from design concept to making process were analyzed.4. Use Flash +Dreamweaver + photoshop software design methods are analyzed5. Just website design and facture put forward its own views and Suggestions第1章绪论随着21世纪的到来,人们更深切地感受到计算机在生活和工作中的作用越来越重要,越来越多的职业需要具有计算机应用技能型人才。

静态网页设计与制作说课.ppt

静态网页设计与制作说课.ppt

中认真关注,随时解答疑问。
实践法
24
学生汇报计划与实施过程,回答同学与老师提出的问题。
重点检查流程的认知和网站团队运作,师生共同评价各
小组及个人的工作成果: 1.自评:学生对本项目的整个实施过程进行评价; 2.互评:以小组为单位,分别对其它小组的工作进 行评价;
提问引导法 实践法 讨论法
2
3.教师评价:教师对互评结果进行评价,指出每个
学习情境描述
“个人网站制作”学习情境表1-
1
学习情境1:个人网站制作
学时:38
项目目标
1.掌握个人网站制作的流程和方法、学习欣赏网站,制订个人网站制作策划方案; 2.熟悉Dreamweaver基本工具的使用; 3.分组制作一个个人网站; 4.培养学生团队精神、创新能力、自主探究学习能力、表达能力。
社会能力目标
沟通能力协作精神 勤于思考认真做事 勇于创新敬业乐业
自主学习能力 知识应用能力 良好的职业道德 较强的工作责任心
课程设计理念
以职业资格为依据
内容选取
教学组织
课程标准
以工作需求为目标 以工作过程为主线
以真实项目为载体
教学实施
表现形式
以实际工作为场景
课程设计思路
企业 调研
确定岗 位(群)
5%
5
项目制作报告
项目制作工作计划、总结和成果评价表书写认真、完整、字迹清 楚、页面整洁,项目制作收获较大
10%
合计
100%
敬请专家指导! 谢谢!
教师知识与能 熟悉网站制作流程,网页制作Dreamweavera工具,网页素材制作方法,网页制作方
力要求
法与技巧;较强的归纳能力;较强的教学管理与教学组织能力。

页面布局的几种方式(静态化布局,流式布局,自适应布局,响应式布局,弹性布局)

页面布局的几种方式(静态化布局,流式布局,自适应布局,响应式布局,弹性布局)

页⾯布局的⼏种⽅式(静态化布局,流式布局,⾃适应布局,响应式布局,弹性布局)⼀、静态布局(static layout) 即传统Web设计,⽹页上的所有元素的尺⼨⼀律使⽤px作为单位。

1、布局特点 不管浏览器尺⼨具体是多少,⽹页布局始终按照最初写代码时的布局来显⽰。

常规的pc的⽹站都是静态(定宽度)布局的,也就是设置了min-width,这样的话,如果⼩于这个宽度就会出现滚动条,如果⼤于这个宽度则内容居中外加背景,这种设计常见于pc端。

2、设计⽅法 PC:居中布局,所有样式使⽤绝对宽度/⾼度(px),设计⼀个Layout,在屏幕宽⾼有调整时,使⽤横向和竖向的滚动条来查阅被遮掩部分; 移动设备:另外建⽴移动⽹站,单独设计⼀个布局,使⽤不同的域名如wap.或m.根据浏览器⽤户代理,识别移动端,并重定向。

pc端⾃适应设计详情参考优点:这种布局⽅式对设计师和CSS编写者来说都是最简单的,亦没有兼容性问题。

缺点:显⽽易见,即不能根据⽤户的屏幕尺⼨做出不同的表现。

当前,⼤部分门户⽹站、⼤部分企业的PC宣传站点都采⽤了这种布局⽅式。

固定像素尺⼨的⽹页是匹配固定像素尺⼨显⽰器的最简单办法。

但这种⽅法不是⼀种完全兼容未来⽹页的制作⽅法,我们需要⼀些适应未知设备的⽅法。

⼆、流式布局(Liquid Layout) 流式布局(Liquid)的特点(也叫"Fluid") 是页⾯元素的宽度按照屏幕分辨率进⾏适配调整,但整体布局不变。

代表作栅栏系统(⽹格系统)。

⽹页中主要的划分区域的尺⼨使⽤百分数(搭配min-*、max-*属性使⽤),例如,设置⽹页主体的宽度为80%,min-width为960px。

图⽚也作类似处理(width:100%, max-width⼀般设定为图⽚本⾝的尺⼨,防⽌被拉伸⽽失真)。

1. 布局特点 屏幕分辨率变化时,页⾯⾥元素的⼤⼩会变化⽽但布局不变。

【这就导致如果屏幕太⼤或者太⼩都会导致元素⽆法正常显⽰。

  1. 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。

浏览型网站静态化架构设计在天猫双11活动中,商品详情、店铺等浏览型系统,通常会承受超出日常数倍甚至数十倍的流量冲击。

随着历年来双11流量的大幅增加,每年这些浏览型系统都要面临容量评估、硬件扩容、性能优化等各类技术挑战。

因此,架构方面的重点在于,如何能够利用合理成本应对瞬间飙高的峰值请求,并确保活动完整周期中系统容量的可伸缩性、用户响应时间的稳定性,以及外部依赖系统出现问题时的高可用性。

此外,作为最主要的页面流量承载体系,架构方面还需考虑防爬攻击、流控容灾等安全、稳定的需求,并综合衡量网络带宽、硬件成本、缓存效率等各方面要素,找准平衡点,从而达到以不变应万变的理想效果。

架构演进为此,自2011年起,以天猫商品详情系统为代表,天猫浏览型系统在架构上的主要工作之一就是通过静态化技术实现了动静态信息分离、利用缓存技术存放静态化内容、利用少量动态数据异步加载填充。

整个过程历经单机静态化、统一缓存接入,到2013年双11前彻底CDN化三个阶段(如图1所示),有效解决了缓存命中率、流量自然分布、系统扩容简化、用户端响应速度等关键问题。

图1 CDN化的三个阶段目前,天猫浏览型系统最新使用的这套基于CDN的静态化架构,可以满足高可用持续伸缩的原始预期,并包含如下特性。

▪动静分离:HTML静态化和热点分离。

▪分布式缓存体系:利用CDN节点分布式缓存。

▪多级缓存机制:CDN两级+应用一级。

▪统一服务静态化集群。

▪一致性维持:主动失效&自动失效缓存机制。

▪动态内容填充:能支持多种时效性动态内容填充方式。

▪控预警机制:流量、失效、命中率等关键参数实时监控报警。

本文将针对这一优化历程,就主要技术挑战、架构改造策略、最终优化成果做一个总览式的介绍,并重点对CDN化过程中整体架构的演进、缓存失效机制、动态内容填充等具体要点进行论述。

第一阶段:系统静态化早期天猫浏览型系统大多采用简单架构,实现一层很薄的前台应用。

以天猫商品详情系统为例,针对商品、用户等访问量较大的数据中心接口模式改造为应用Client端缓存前置,同时普遍使用页面高速缓存(PageCache)来降低后端系统压力。

使得整体可支持应用水平扩展不受限制。

这一阶段系统面临的主要问题和挑战包括以下几点。

▪应用服务器瓶颈,页面渲染带来的CPU开销巨大。

▪单纯基于Java端的缓存已基本覆盖,整体性能提升空间有限。

▪水平扩容只能支持容量线性提升,难以满足大促井喷式流量增长,扩容成本高。

从问题看,基于原有动态浏览型系统模式而优化的瓶颈很难规避,例如以下几点。

▪Java应用服务器端必要开销,包括:涉及页面内容的字符串查找、替换、拼接等;元数据获取的网络开销;Servlet本身的性能瓶颈。

▪Web服务器端,包括:模块过滤,例如访问日志、Cookie打点、繁简转换;大HTML页面本身的GZIP压缩等。

▪突发流量的抵御,例如攻击、秒杀、大促,等等。

▪已用优化手段达到了边界,包括:可使用缓存的地方已经使用;服务端CPU能力已优化完毕(模板解析、压缩)。

总体来看,必须从架构着手彻底解决。

架构优化的方向上,考虑以下3个方面。

▪改变缓存方式,直接缓存HTTP响应结果。

▪改变缓存位置,直接基于Web服务器,屏蔽业务逻辑。

▪基本原则,缓存空间足够大、无单点、易于维护。

为此,2012年起正式启动了动态浏览型系统的改造项目,通过静态化手段解决上述问题。

即基于业务把原动态系统中的内容做动静分离,对浏览者无关部分做缓存,动态内容做CSI填充。

具体考虑从三方面重点着手展开:动静信息分离、静态化缓存方式,以及缓存失效机制。

图2为一期静态化整体架构。

图2 一期静态化整体架构动静分离将原页面内容按业务进行区分,从浏览用户、信息发布者、时间、地域、私有(Cookie等)信息等维度分析,抽取出页面中相对公共不依赖以上因素,且变化频度较低的内容作为基础,生成静态化内容。

静态化后页面URL固定,不同URL表示不同内容,服务器返回的请求与URL相关,其他动态内容则通过异步接口调用,通过CSI方式填充。

以商品详情系统为例,静态化后商品基本信息如标题、商品详情、销售属性组合等信息均直接进入缓存,其他如优惠、库存、物流、服务等动态信息则通过异步调用方式填充至静态化后的页面框架内。

缓存方式整体可划分为应用服务器、Web服务器、CDN节点、客户端浏览器4层缓存体系(如图3所示),分别承载不同使命。

图3 缓存整体划分缓存系统方面从开发成本、稳定性、I/O性能各方面综合考虑,选择了阿里内部广泛使用的分布式key/value系统Tair,存取静态化后的页面。

相对Nginx本地硬盘缓存方式来说,本地Tair读写性能更优,且服务器响应时间和负载波动影响小,使用及维护成本低。

整套体系详解如下。

▪应用层缓存:减小后端应用服务器压力,减少远程调用量。

▪Web服务器缓存:减小后端应用服务器压力,抵挡瞬间峰值和/或针对少量定点内容的攻击。

▪CDN缓存:合理地利用CDN,内容缓存放置在离用户最近的地方,加快响应的速度。

▪浏览器缓存:减少用户请求数量,降低系统压力,提升用户体验。

缓存失效缓存失效主要包含“失效后台进行主动失效”和“缓存过期自动失效”两种机制。

针对主动失效,主要技术难点包括以下3个方面。

▪失效来源及监控范围:基于业务决定需要监听哪些数据源哪部分内容变更,通过变更消息接收执行缓存失效动作。

▪每秒失效数据量级:单位时间内大量数据源(如商品、店铺装修)失效处理。

▪要失效的缓存范围:支持批量(例如基于域名)和单个数据源缓存失效变更。

以商品详情系统为例,失效来源主要为商品数据及店铺装修信息,后台用户修改导致对应内容发生变更时,通过消息机制通知失效后台。

失效后台接收消息并保留待失效商品ID,通过调用本地Tair接口失效缓存,大致流程如图4所示。

图4 缓存失效流程改造效果依然以天猫商品详情系统为例,采取静态化架构后,2012年双11时,在性能方面,结合后期完成的店铺装修分离等优化工作,系统单机(实体机)在80%缓存命中率的情况下,安全QPS(每秒查询率)相较2011年同期单机性能提升7倍多,系统资源则不到原来的50%。

与此同时,静态化还解决了单URL热点攻击问题,更重要的是,使得原动态架构下依赖的后端Java 系统可以转变为弱依赖:一方面既通过静态化缓存层一定程度上保护了后端系统;另一方面在极限情况下,当后端系统不可用时,可以通过缓存维持一部分访问量。

第二阶段:统一Web缓存第一阶段以商品详情为主的静态化架构改造取得了良好的效果,除天猫商品详情系统率先完成改造外,店铺等浏览型业务系统也很快参照类似方案完成了架构调整。

在过程中,逐渐确立了静态化技术规范,简化了接入步骤;同时,也发现在各自的系统中,尽管同样基于浏览型业务场景,但由于采用的缓存方案细节差异,存在一些涉及静态化缓存体系相关的共性问题,包括以下几点。

▪单机缓存静态页面,受部署模式影响,缓存层无法水平扩展。

▪单机模式下,缓存受限于服务器能力及内存容量,命中率受制约。

▪CSI模式填充动态内容,需要前端脚本配合,开发成本较高。

因此,自然而然想到有必要统一Web缓存层接入,共享静态化集群以节省成本、提高稳定性和命中率。

从运维角度看:▪统一接入层可以减少多个应用接入使用的成本,接入的应用只需维护自身Java系统,不用单独维护缓存;只要关心如何使用,统一的缓存框架也可更好地让更多流量型系统接入使用;▪统一接入层易于维护,并可统一加强全局监控、实现配置自动化,使集中维护升级更加便利;▪统一接入层可以共享内存,最大化利用内存,不同系统间的内存可以动态切换,有效应对攻击等类似突发情况。

搭建统一接入层,需要针对各浏览型系统做局部改动。

而整体需要重点解决的技术问题,从架构层次上看,主要涉及以下几大部分。

缓存系统选择第一阶段各浏览型系统采用了单机缓存模式,基于成本、业务场景等各方面因素稍有不同。

搭建统一接入层需要能够兼顾各浏览型系统的特殊要求,同时还需能支持共同需要的ESI解析及ESI模式下GZIP压缩,完成静态页面局部动态内容服务端填充;性能方面,能够满足双11/双12流量压力下的QPS(每秒访问率)要求;支持失效协议以及长连接,可执行批量失效。

综合以上分析,并考虑未来静态化内容最终CDN化部署方式,统一接入层Cache最终软件层面可支持以上所有功能,同时还包括快速失效和预热能力,支持CSS和JavaScript的脚本合并,长连接和批量失效,支持基于HTTP头的可编程配置等。

统一失效机制与缓存软件变更对应,各接入统一缓存的浏览型系统需针对新的缓存体系及协议改造原有失效机制,使用公共协议标准来执行批量及单个对象的主动失效。

同时,建立了统一的失效中心和缓存校验层,所有接入应用的主动失效请求统一经由失效中心,通过Purge方式执行缓存失效。

底层失效源方面,监控信息源数据变更。

以商品为例,当商品编辑完毕,包括商品标题描述等更新后详情页面需要失效,基于实时监控和消息机制进行主动失效(如图5所示)。

图5 基于事实监控和消息机制主动失效Web服务器改造缓存层之前的Web服务层,需要能支持一致性Hash分组,并集成现有系统使用的Session框架,可支持基于域名虚拟主机的动态配置。

为此,核心系统部门的同事自行开发了淘宝定制版本的Nginx 服务器(Tengine),作为统一接入层之上的Web服务器层部署。

网络流量支持统一接入缓存层后,由于集中了各系统缓存信息且访问集中,所以网络部署层次方面,可使用万兆网卡配置解决硬件瓶颈;同时评估集群需支撑的网络出口流量,确保机房内部及外部出口无瓶颈;在缓存不命中的情况下,需能支撑请求回源服务器端形成的内部流量。

整体部署方案图6是整体部署方案,从中可以看出:▪统一接入层部署,包括前端Nginx服务器+缓存系统+后端Java应用部署结构;▪Web服务器层做一致性Hash分组;▪统一缓存层支持ESI或CSI方式获取动态内容;▪统一失效中心机制失效缓存。

图6 整体部署方案改造效果统一接入层于2013年上半年改造完成并开始了商品详情等浏览型系统的接入工作,完成后,在原有单机缓存模式之上又增加了一层集中式缓存,解决了缓存层的水平扩展问题。

万兆网卡的使用有效解决了缓存层的网络瓶颈。

由于统一接入层与应用无关,因此可以多应用共用,使监控和维护成本大大降低,并提高了质量和效率。

当然,这一改造也造成应用对缓存层的强依赖链路,同时这一层缓存也存在单点问题。

从静态化单机缓存模式到统一接入层,路只走了一半,一切改造的终极目标,是利用CDN分布式、地域性特性及强大的流量容量体系,实现浏览型应用的CDN静态化。

第三阶段:CDN静态化统一接入层解决了单机缓存内存使用率低的问题,摆脱了单机缓存受内存大小制约,在面对商品数量增加和商品热点分散的场景下,只能垂直扩展那些无法水平扩展的问题,这提升了缓存系统的可维护性和扩展性。

相关文档
最新文档