大型网站前端架构的设计与优化

简介:

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

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

一、页面开发最佳实践

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

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

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

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

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

3.缓存Ajax

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

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

1
2
3
4
5
6
添加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我们要注意以下几点,来提高请求的响应速度:

1
2
3
4
去除没有必要的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等文件应该部署在专门的服务器上,和请求动态内容的服务器分离,并且使用不同的域名,如专门的二级域名。

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

五、反向代理技术

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

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



本文转自邴越博客园博客,原文链接:http://www.cnblogs.com/binyue/p/4410046.html,如需转载请自行联系原作者

相关文章
|
1月前
|
前端开发 JavaScript UED
优化前端性能的关键技巧
在当今数字化时代,网站和应用程序的性能对用户体验至关重要。本文将介绍一些优化前端性能的关键技巧,包括减少HTTP请求、使用CDN加速、精简代码等方面的实用建议,帮助开发者提升前端性能,提供更流畅的用户体验。
|
1月前
|
缓存 前端开发 JavaScript
揭秘前端性能优化:从代码到用户体验的全面升级
揭秘前端性能优化:从代码到用户体验的全面升级
19 0
|
1月前
|
Web App开发 缓存 前端开发
前端性能优化方案有哪些?
前端性能优化方案有哪些?
72 1
|
1月前
|
前端开发 JavaScript UED
使用React Hooks优化前端应用性能
本文将深入探讨如何使用React Hooks来优化前端应用的性能,重点介绍Hooks在状态管理、副作用处理和组件逻辑复用方面的应用。通过本文的指导,读者将了解到如何利用React Hooks提升前端应用的响应速度和用户体验。
|
2月前
|
缓存 负载均衡 算法
后端架构设计中的优化技巧
【2月更文挑战第9天】 后端架构设计是一个复杂而关键的工作,不仅需要考虑系统的可靠性和扩展性,还需要保证系统的高性能。本文将介绍一些后端架构设计中的优化技巧,包括数据库设计、缓存优化、负载均衡等方面的内容,帮助开发者在设计后端架构时更好地提升系统性能。
35 1
|
2月前
|
前端开发 JavaScript 安全
从前端性能优化角度谈JavaScript代码压缩与混淆
本文从前端性能优化的角度出发,探讨了JavaScript代码压缩与混淆的重要性及实现方式,通过分析不同压缩混淆工具的特点和效果,为开发者提供了实用的指导和建议。
|
6天前
|
缓存 前端开发 UED
优化前端性能的六大技巧
在当今互联网高速发展的时代,优化前端性能是每个开发者都必须重视的任务。本文将介绍六大实用的技巧,帮助开发者提升前端应用的性能,提升用户体验。
|
7天前
|
存储 缓存 前端开发
前端如何利用indexDB进行数据优化
使用IndexedDB作为浏览器内置的客户端数据库,用于存储大量数据和实现离线支持。它能缓存常用数据,减少服务器请求,提高用户体验。IndexedDB支持数据索引、复杂查询及版本管理,允许离线操作并同步到服务器。但需熟悉其异步API,可借助Dexie.js、localForage等库简化使用。
|
10天前
|
机器学习/深度学习 前端开发 算法
使用机器学习优化前端用户体验
在当今高度竞争的互联网市场中,用户体验是至关重要的。本文将探讨如何利用机器学习技术来优化前端用户体验,从而提高用户满意度和留存率。我们将介绍如何利用机器学习算法分析用户行为数据,优化网站性能和内容推荐,以及如何实时调整界面设计和交互方式,从而实现个性化、智能化的用户体验。
|
11天前
|
前端开发 算法 JavaScript
如何优化前端性能:探索图片压缩与延迟加载技术
本文深入探讨了前端性能优化中的关键问题:图片压缩与延迟加载技术。通过介绍图片压缩的原理和方法,并结合实例说明了如何有效减少图片大小、提升加载速度;同时,详细解析了延迟加载技术的实现原理及其在提高页面加载性能中的作用,为前端开发者提供了实用的优化方案。