分布式系统前端架构的设计与优化

前端请求过程是指用户和应用服务器之间发生数据交互前的展现过程,这个过程通常不包含业务逻辑,不需要处理动态内容。

所谓唯快不破,互联网产品在用户体验方面,很重要的一点就是快。前端技术基本的架构与优化,主要是怎样让页面更快更好的展示在用户面前。

一、页面开发最佳实践

1.css样式置顶,Javascript脚本置底

样式表(css)放在网页的HEAD中会让网页显得加载速度更快,因为这样可以使浏览器逐步加载已下载的网页内容。
样式表中的内容是绘制网页的关键信息,如果将样式表放在底部,大多数浏览器在实现时都努力避免重绘,浏览器会拒绝渲染已经下载的网页,用户看到的可能就是不正常的页面。

同样,把JS脚本置底,最后再加载脚本文件,这样可以让网页渲染所需要的内容尽快加载显示给用户。

2.合并和减少HTTP请求次数

减少请求次数是缩短响应时间的关键,可以通过简化页面设计来减少请求次数。

3.缓存Ajax

最快的Ajax请求就是没有请求。
Ajax可以帮助我们异步的下载网页内容,但是有些网页内容虽然是异步的,用户还是需要等待它的返回结果,例如用户联系人的下拉列表,下拉过程中还是会有等待。

我们要注意尽量应用以下规则提高ajax的响应速度:

添加Expires 或 Cache-Control报文头使回复可以被客户端缓存
压缩回复内容
减少dns查询
精简javascript
避免跳转
配置Etags

  

4.延迟加载

最小内容集是网页最初加载需要的文件和资源,在设计时考虑到这一点,然后把剩下的内容就可以推迟到延迟加载的集合中。
Javascript是典型的可以延迟加载内容,所以一般会把JS文件放在页面底部。

一个比较激进的做法是开发网页时先确保网页在没有Javascript的时候也可以基本工作,然后通过延迟加载脚本来完成一些高级的功能:
使用reauire.js或sea.js按需加载js模块;
使用lazyload.js插件延迟加载图片;

5.避免请求空的图片src

空的图片src仍然会使浏览器发送请求到服务器,这样完全是浪费时间,而且浪费服务器的资源。尤其是你的网站每天被很多人访问的时候,这种空请求造成的伤害不容忽略。
浏览器如此实现也是根据RFC 3986 – Uniform Resource Identifiers标准,空的src被定义为当前页面。

6.合理的设置Cookie

Cookie信息被包含在http报文头中,对于cookie我们要注意以下几点,来提高请求的响应速度:

去除没有必要的cookie,如果网页不需要cookie就完全禁掉
将cookie的大小减到最小
注意cookie设置的domain级别,没有必要情况下不要影响到sub-domain
设置合适的过期时间,比较长的过期时间可以提高响应速度

  

7.使用Gzip压缩传输文件

Gzip通常可以减少70%网页内容的大小,包括脚本、样式表、图片等文件。Gzip比deflate更高效,主流服务器都有相应的压缩支持模块。

8.减少iframe数量

使用iframe要注意理解iframe的优缺点
优点:
可以用来加载速度较慢的内容,例如广告。
安全沙箱保护。浏览器会对iframe中的内容进行安全控制。
脚本可以并行下载

缺点:
即使iframe内容为空也消耗加载时间
会阻止页面加载
没有语义

二、使用CDN加速静态资源访问

提高下载速度还可以通过CDN(内容分发网络)来提升。
CDN指内容分发网络,通过部署在不同地区的服务器来提高客户的下载速度。
如果你的网站上有大量的静态内容,CDN是必不可少的。
大型互联网网站都有自己的CDN,网上目前也有很多公开免费的CDN资源可以使用,国内的如:

百度:http://cdn.code.baidu.com
新浪:http://lib.sinaapp.com
又拍:http://jscdn.upai.com
七牛:http://www.staticfile.org
360:http://libs.useso.com

三、为HTTP添加Expires或Cache-Control报文头

对于静态内容添加Expires,将静态内容设为永不过期,或者很长时间以后。在IIS中设置Expires可以看Configure the HTTP Expires Response Header (IIS 7)。
对于动态内容应用合适的Cache-Control,让浏览器根据条件来发送请求。

四、动静分离,图片资源和静态资源等独立部署

静态资源,如Javascript、CSS等文件应该部署在专门的服务器上,和请求动态内容的服务器分离,并且使用不同的域名,如专门的二级域名。

除了这些静态资源,网站的图片资源,比如产品图片,图集等内容应该使用单独部署的服务器存储,同样配置不同的域名访问。

五、反向代理技术

部署在网站机房,在应用服务器、静态资源服务器、图片服务器之前,提供页面缓存服务。

反向代理是代理服务器的一种。它根据客户端的请求,从后端的服务器上获取资源,然后再将这些资源返回给客户端。
正向代理作为一个媒介将互联网上获取的资源返回给相关联的客户端,而反向代理是在服务器端作为代理使用,而不是客户端。
反向代理正好与正向代理相反,对于客户端而言反向代理服务器就像是原始服务器,并且客户端不需要进行任何特别的设置。

参考 

《大型网站技术架构·核心原理与技术分析》

时间: 2024-10-10 07:39:05

分布式系统前端架构的设计与优化的相关文章

大规模分布式系统架构与设计实战摘录

大规模分布式系统架构与设计实战摘录 一位网站资深架构师曾经说过:在互联网公司呆一年,相当于在传统软件公司呆三年. 他的意思大概是在互联网公司一年遇到的问题比传统软件公司三年遇到的问题还多.而且 随着网站业务的快速发展,问题也层出不穷,没年遇到的问题都不同. 遇到问题,解决问 题,经历了这个过程,技术才能升华,人和技术才能融为一体,才知道什么技术是真正有 用的,什么技术是花拳绣腿.大型网站的技术本质都很简单,掌握起来也不难.大型网站 的架构师最有价值的地发不在于他们掌握了多少技术,而在于他们经历多

大规模分布式系统架构与设计实战之通用包工头模式

包工头模式 包工头 – 工人模式: 包工头工人模式我是从一本书上看到的<大规模分布式系统架构与设计实战>.“包工头-工人”模式会使用到Anycmd的User模块中去.AC是一个隐式的项目.一个项目只有一个包工头,一个包工头可以雇佣很多工人,一个工人在一个项目下只受雇于一个包工头.每一个工人都是自己的包工头. 这是军队管理的组织结构. 包工头可以把项目拆分成很多子项目,包工头可以把新的子项目承包给新的包工头,每一个工人都可以承包项目,每一个工人都有机会成为包工头,承包项目的工人立即成为该项目的包

js架构设计模式——前端MVVM框架设计及实现(一)

前端MVVM框架设计及实现(一) 最近抽出点时间想弄个dom模块化的模板引擎,不过现在这种都是MVVM自带的,索性就想自己造轮子写一个简单的MVVM框架了 借鉴的自然还是从正美的avalon开始了,我记得还是去年6月写过一个系列的avalon源码分析的,不过那时候0.7版本,不够健全,现在已经好太多了 框架是面向一个领域,提供一套解决方案,那么我们用前端的MVVM能为我们带来什么便利? 关注点分离 操作数据即操作DOM 动态模板 关注点分离是MVVM与身俱来的,操作数据即操作DOM,是VM中的访

WEB前端开发电商网站前端架构

课程介绍通过一个垂直电子商务网站,介绍前端架构搭建和实现的步骤和方法,以及在这个过程中我们需要做什么才能帮助项目最终从设计走向实现.课程提纲第1章 前端架构知识准备认识前端架构,了解前端架构技术.产品设计和发布.数据分析和优化的基础第2章 前端架构设计了解前端架构的组织方式.页面层次的架构组织.架构设计和组件化方案等.第3章 前端架构实施了解架构的实施.优化思路,如何实施自动化.通过蛋糕电商网站讲解,分析案例.如何图解设计和交互图.如何从目录入手搭建基本架构.如何从页面层次进行架构搭建和最后项目

前端架构浅谈

前端架构浅谈 0.前注 鉴于作者本人的能力有限(非常有限),并且依然在学习中,因此本文的高度和深度必然有所欠缺. 欢迎(并且非常欢迎)大家来批评指正,如果能详细的说明问题在哪里,如何解决和改正,那么就太感谢了!!! 我最喜欢听有理有据的批评了!! 本人QQ:20004604,邮箱:[email protected],期待你的交流. 1.为什么要有一个好的架构 首先明确一点,架构是为需求服务的. 前端架构存在的目的,就我个人理解来说,有以下几点: 1.提高代码的可读性. 一个好的架构,代码的可读性

【PC网站前端架构探讨系列】关于中小型PC网站前端架构方案的讨论与实践

 说在前面 好几天没更新这个系列文章了,这段时间还是在研究这块东西,遇到的各种奇葩问题,最后写完,只是调试就花了两天,果然发现在和大神之间的距离越来越远,在加上大部分时间在追求自己的梦想,梦想同样也是遥遥无期啊!一直在思考星星的那句话,人到底该不该追求梦想,做个咸鱼到底好不好的,吃吃喝喝睡睡的,反正最近感悟挺多,抽时间写个文章,好好和大家聊聊,把我的心里话告诉大家,程序员不容易,寻梦者更难啊!比如,这个所谓的pc网站的前端框架,这对一个做后台而且还是多年一直在做C#.JAVA没怎么写脚本的我来说

基于Flume的美团日志收集系统(一)架构和设计【转】

美团的日志收集系统负责美团的所有业务日志的收集,并分别给Hadoop平台提供离线数据和Storm平台提供实时数据流.美团的日志收集系统基于Flume设计和搭建而成. <基于Flume的美团日志收集系统>将分两部分给读者呈现美团日志收集系统的架构设计和实战经验. 第一部分架构和设计,将主要着眼于日志收集系统整体的架构设计,以及为什么要做这样的设计. 第二部分改进和优化,将主要着眼于实际部署和使用过程中遇到的问题,对Flume做的功能修改和优化等. 1 日志收集系统简介 日志收集是大数据的基石.

专訪阿里陶辉:大规模分布式系统、高性能server设计经验分享

http://www.csdn.net/article/2014-06-27/2820432 摘要:先后就职于在国内知名的互联网公司,眼下在阿里云弹性计算部门做架构设计与核心模块代码的编写,主要负责云server管理系统和存储系统的优化.陶辉就大规模分布式系统.高性能server设计分享了自己的看法. 关注陶辉非常长时间,初次对陶辉的了解还是在我们CSDN的博客上,从2007年開始写博客,一直到如今,假设不是对技术的追求和热爱,以及热爱分享的精神,我想不是非常多人能坚持下来,拥有多年大型互联网公

基于Flume的美团日志收集系统(一)架构和设计

来自:美团技术博客 http://tech.meituan.com/mt-log-system-arch.html 美团的日志收集系统负责美团的所有业务日志的收集,并分别给Hadoop平台提供离线数据和Storm平台提供实时数据流.美团的日志收集系统基于Flume设计和搭建而成. <基于Flume的美团日志收集系统>将分两部分给读者呈现美团日志收集系统的架构设计和实战经验. 第一部分架构和设计,将主要着眼于日志收集系统整体的架构设计,以及为什么要做这样的设计. 第二部分改进和优化,将主要着眼于