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

简介:

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

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

一、页面开发最佳实践

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,如需转载请自行联系原作者

相关文章
|
25天前
|
机器学习/深度学习 存储 人工智能
RAG系统文本检索优化:Cross-Encoder与Bi-Encoder架构技术对比与选择指南
本文将深入分析这两种编码架构的技术原理、数学基础、实现流程以及各自的优势与局限性,并探讨混合架构的应用策略。
113 10
RAG系统文本检索优化:Cross-Encoder与Bi-Encoder架构技术对比与选择指南
|
5月前
|
机器学习/深度学习 人工智能 文件存储
Llama Nemotron:英伟达开源基于Llama架构优化的推理模型,253B参数持平DeepSeek R1!
NVIDIA推出的Llama Nemotron系列推理模型,基于Llama架构优化,包含Nano/Super/Ultra三款,在数学推理、编程和工具调用等任务中展现卓越性能。
155 5
Llama Nemotron:英伟达开源基于Llama架构优化的推理模型,253B参数持平DeepSeek R1!
|
3月前
|
前端开发 JavaScript 索引
前端性能优化:虚拟滚动技术原理与实战
前端性能优化:虚拟滚动技术原理与实战
468 80
|
3月前
|
缓存 监控 前端开发
前端性能优化:现代框架的关键策略
前端性能优化:现代框架的关键策略
205 74
|
3月前
|
缓存 前端开发 JavaScript
前端性能优化:打造流畅的用户体验
前端性能优化:打造流畅的用户体验
|
5月前
|
数据采集 运维 Serverless
云函数采集架构:Serverless模式下的动态IP与冷启动优化
本文探讨了在Serverless架构中使用云函数进行网页数据采集的挑战与解决方案。针对动态IP、冷启动及目标网站反爬策略等问题,提出了动态代理IP、请求头优化、云函数预热及容错设计等方法。通过网易云音乐歌曲信息采集案例,展示了如何结合Python代码实现高效的数据抓取,包括搜索、歌词与评论的获取。此方案不仅解决了传统采集方式在Serverless环境下的局限,还提升了系统的稳定性和性能。
146 0
|
7月前
|
缓存 前端开发 UED
如何优化前端性能以提高加载速度
前端性能优化对提升网站加载速度至关重要,直接影响用户体验、SEO排名和转化率。本文介绍了优化前端加载速度的关键技巧,包括最小化HTTP请求、使用CDN、优化图片、利用浏览器缓存、压缩文件和实现懒加载。通过这些方法,可以显著减少页面加载时间,提高网站的整体性能和用户满意度。
|
1月前
|
数据采集 机器学习/深度学习 运维
从数据感知到决策优化:MyEMS 开源能源管理系统的技术架构与实践效能解析
MyEMS 是一款开源能源管理系统,采用分层解耦与模块化设计,支持多能源协同监测与智能优化调度。系统具备数据采集、分析、预警、碳核算等功能,助力企业实现节能降耗、安全管控与低碳转型,已在百余家全球企业落地应用,具备自主可控、成本低、安全性强等优势,面向虚拟电厂、数字孪生等未来场景持续演进。
97 0
|
2月前
|
缓存 Java 数据库
Java 项目分层架构实操指南及长尾关键词优化方案
本指南详解基于Spring Boot与Spring Cloud的Java微服务分层架构,以用户管理系统为例,涵盖技术选型、核心代码实现、服务治理及部署实践,助力掌握现代化Java企业级开发方案。
137 2

热门文章

最新文章