网站技术架构&Web前端性能优化笔记--01
考虑可用性、伸缩性、可扩展性、安全性
应用服务与数据服务分离
分类 | 作用 | 表头 |
---|---|---|
应用服务器 | 处理业务逻辑 | 内容 |
文件服务器 | 需快速进行磁盘检索和数据缓存 | 内容 |
数据服务器 | 存储用户上传的文件资源 |
80%的业务访问集中在20%的数据上,对一小部分数据进行缓存减轻数据库的访问压力
缓存
本地缓存:受应用服务器内存限制,缓存数据量有限,会出现内存争用
远程分布式缓存:使用集群的方式,部署大内存的服务器作为专门的缓存服务器,在理论上做到不受内存容量限制的缓存服务
使用应用服务器集群改善网站并发处理能力
通过负载均衡调度服务器,可将用户请求分发到应用服务器集群里任何一台服务器。
数据库读写分离
使用缓存后,有一部分读操作(缓存访问未命中,缓存过期)和所有的写操作需要访问数据库。
大多数数据库支持主从热备份(配置两台服务器的主从关系),可从一台数据库服务器的数据更新同步到另一台。可实现读取分离。
使用反向代理和CDN加速网站响应
CDN和反向代理的基本原理都是缓存
- CDN 部署在网络供应商的机房,用户在进行请求时,会从距离最近的网络供应商机房获取数据
- 反向代理部署在中心机房,当用户请求到达中心机房后,会首先访问反向代理服务器,如果反响代理服务器中缓存者用户请求的资源,就直接返给用户
使用分布式文件系统和分布式数据库系统
分布式数据库:按业务分库
使用NoSQL和搜索引擎
应用服务器通过一个统一的数据访问模块来访问各种数据,减轻应用程序有多个数据源的问题
分布式服务和业务拆分
将网站根据业务和模块划分拆分多个应用,每个应用进行单端的部署和维护,应用之间通过超链接建立关系,并通过相同的数据存储系统来构成一个相互关联系统
优化各层
应用层—视图层、业务逻辑层
服务层—数据接口层、逻辑处理层
数据层
- 解决宕机
网站高可用的主要手段是 冗余,将应用部署在多台服务器上同时提供访问(前提是应用服务器不允许存储用户会话信息),数据存储在多台数据服务器之间互相进行热备份。 - 可伸缩行
通过集群的方式,通过使用合适的负载均衡设备不断加入新的应用服务器实现大量用户的高并发访问和海量的数据存储。只用服务器上不存储数据,所有服务器都是对等的。
Web前端性能优化
主要包括:浏览器渲染、加载、前端视图模型、图片视频资源、CDN(Content Delivery Network内容分发网络)服务
浏览器访问渲染优化
减少HTTP请求数
http协议是无状态的应用层协议,每次http请求都建立新的通信链路,http1.1及以后请求默认keep-alive,在服务端每个http连接开启一个单独的线程去处理请求,产生很大开销。
- 实现方法:合并压缩css、js、图片文件,减少建立的连接请求数,使用http的keep-alive进行连接的复用。
文件压缩
文本文件的压缩率达80%以上
- 实现方法:在服务端启用gzip压缩
代码优化
-
css代码优化
- 尽量使用外部样式,并且放在页面顶端加载,实现及时渲染和避免某些样式导致阻塞渲染
- 压缩合并CSS文件,减少通信传输数据量和请求连接量
-
JavaScript代码优化
- 由于js边加载边解析,解析过程会阻塞浏览器渲染,因此把js代码放在页面底部加载
- 压缩合并js文件
使用浏览器缓存
在浏览器中缓存静态资源
-
实现方法:设置http头里的Cache-Control和Expires(过期时间)属性来设定浏览器缓存时间
- 原理:通过HTTP请求头中的If-Modified-Since(If-No-Match)和响应头中的Last-Modified(Etag)来实现。HTTP请求把 If-Modified-Since(If-No-Match)传给服务器,服务器将其与Last-Modified(ETag)对比,若相同,则文件没有被改动过,则返回304,直接浏览器缓存中读取资源即可。
- 服务器:Apache、nginx、IIS、tomcat服务器配置Cache-Conreol属性不同
<filesMatch ”.(jpg|jpeg|png|gif|ico)$”>
Header set Cache Control max-age=16768000,public
</filesMatch>
<filesMatch ”.(css|js)$”>
Header set Cache Control max-age=2628000,public
</filesMatch>
CDN(内容分发网络)加速
CDN服务器在网络运营商的机房
反向代理
由反向代理服务器给你的数据,而不知道数据源最终是从哪个服务器来的
在代理服务器缓存,当这些内容发生改变时,会通知反向代理服务器缓存失效,代理服务器会重新缓存动态资源
反向代理器还可以做负载均衡
ajax对SEO(搜索引擎优化)不友好