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

简介:

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

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

一、页面开发最佳实践

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月前
|
消息中间件 存储 缓存
十万订单每秒热点数据架构优化实践深度解析
【11月更文挑战第20天】随着互联网技术的飞速发展,电子商务平台在高峰时段需要处理海量订单,这对系统的性能、稳定性和扩展性提出了极高的要求。尤其是在“双十一”、“618”等大型促销活动中,每秒需要处理数万甚至数十万笔订单,这对系统的热点数据处理能力构成了严峻挑战。本文将深入探讨如何优化架构以应对每秒十万订单级别的热点数据处理,从历史背景、功能点、业务场景、底层原理以及使用Java模拟示例等多个维度进行剖析。
55 8
|
1月前
|
缓存 前端开发 JavaScript
利用代码分割优化前端性能:策略与实践
在现代Web开发中,代码分割是提升页面加载性能的有效手段。本文介绍代码分割的概念、重要性及其实现策略,包括动态导入、路由分割等方法,并探讨在React、Vue、Angular等前端框架中的具体应用。
|
14天前
|
弹性计算 运维 监控
阿里云云服务诊断工具:合作伙伴架构师的深度洞察与优化建议
作为阿里云的合作伙伴架构师,我深入体验了其云服务诊断工具,该工具通过实时监控与历史趋势分析,自动化检查并提供详细的诊断报告,极大提升了运维效率和系统稳定性,特别在处理ECS实例资源不可用等问题时表现突出。此外,它支持预防性维护,帮助识别潜在问题,减少业务中断。尽管如此,仍建议增强诊断效能、扩大云产品覆盖范围、提供自定义诊断选项、加强教育与培训资源、集成第三方工具,以进一步提升用户体验。
663 243
|
7天前
|
机器学习/深度学习 算法 数据可视化
基于深度混合架构的智能量化交易系统研究: 融合SSDA与LSTM自编码器的特征提取与决策优化方法
本文探讨了在量化交易中结合时序特征和静态特征的混合建模方法。通过整合堆叠稀疏降噪自编码器(SSDA)和基于LSTM的自编码器(LSTM-AE),构建了一个能够全面捕捉市场动态特性的交易系统。SSDA通过降噪技术提取股票数据的鲁棒表示,LSTM-AE则专注于捕捉市场的时序依赖关系。系统采用A2C算法进行强化学习,通过多维度的奖励计算机制,实现了在可接受的风险水平下最大化收益的目标。实验结果显示,该系统在不同波动特征的股票上表现出差异化的适应能力,特别是在存在明确市场趋势的情况下,决策准确性较高。
31 5
基于深度混合架构的智能量化交易系统研究: 融合SSDA与LSTM自编码器的特征提取与决策优化方法
|
19天前
|
存储 机器学习/深度学习 人工智能
【AI系统】计算图优化架构
本文介绍了推理引擎转换中的图优化模块,涵盖算子融合、布局转换、算子替换及内存优化等技术,旨在提升模型推理效率。计算图优化技术通过减少计算冗余、提高计算效率和减少内存占用,显著改善模型在资源受限设备上的运行表现。文中详细探讨了离线优化模块面临的挑战及解决方案,包括结构冗余、精度冗余、算法冗余和读写冗余的处理方法。此外,文章还介绍了ONNX Runtime的图优化机制及其在实际应用中的实现,展示了如何通过图优化提高模型推理性能的具体示例。
48 4
【AI系统】计算图优化架构
|
8天前
|
机器学习/深度学习 前端开发 算法
婚恋交友系统平台 相亲交友平台系统 婚恋交友系统APP 婚恋系统源码 婚恋交友平台开发流程 婚恋交友系统架构设计 婚恋交友系统前端/后端开发 婚恋交友系统匹配推荐算法优化
婚恋交友系统平台通过线上互动帮助单身男女找到合适伴侣,提供用户注册、个人资料填写、匹配推荐、实时聊天、社区互动等功能。开发流程包括需求分析、技术选型、系统架构设计、功能实现、测试优化和上线运维。匹配推荐算法优化是核心,通过用户行为数据分析和机器学习提高匹配准确性。
37 3
|
1月前
|
前端开发 安全 UED
2024年前端性能优化新策略
2024年前端性能优化策略涵盖代码分割与环境变量管理。代码分割通过动态导入和按需加载CSS减少初始加载时间;环境变量管理则确保敏感信息安全,简化多环境配置。结合最新工具和技术,可大幅提升Web应用性能与用户体验。
|
27天前
|
监控 Serverless 云计算
探索Serverless架构:开发实践与优化策略
本文深入探讨了Serverless架构的核心概念、开发实践及优化策略。Serverless让开发者无需管理服务器即可运行代码,具有成本效益、高可扩展性和提升开发效率等优势。文章还详细介绍了函数设计、安全性、监控及性能和成本优化的最佳实践。
|
24天前
|
缓存 监控 前端开发
探索前端性能优化:关键策略与代码实例
本文深入探讨前端性能优化的关键策略,结合实际代码示例,帮助开发者提升网页加载速度和用户体验,涵盖资源压缩、懒加载、缓存机制等技术。
|
28天前
|
搜索推荐 前端开发 定位技术
前端开发人员SEO优化技术方案
不同的搜索引擎提供了服务后台常见功能来优化网站搜索
49 2