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

简介:

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

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

一、页面开发最佳实践

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

相关文章
|
7月前
|
人工智能 自然语言处理 开发工具
统一多模态 Transformer 架构在跨模态表示学习中的应用与优化
本文介绍统一多模态 Transformer(UMT)在跨模态表示学习中的应用与优化,涵盖模型架构、实现细节与实验效果,探讨其在图文检索、图像生成等任务中的卓越性能。
统一多模态 Transformer 架构在跨模态表示学习中的应用与优化
|
7月前
|
算法 物联网 定位技术
蓝牙室内定位技术解决方案:核心技术架构与优化实践
本文探讨了蓝牙iBeacon与Lora结合的室内定位技术,分析其在复杂室内环境中的优势与挑战。通过三层架构实现高精度定位,并提出硬件、算法与部署优化方向,助力智慧仓储、医疗等场景智能化升级。
399 0
蓝牙室内定位技术解决方案:核心技术架构与优化实践
|
4月前
|
机器学习/深度学习 数据可视化 网络架构
PINN训练新思路:把初始条件和边界约束嵌入网络架构,解决多目标优化难题
PINNs训练难因多目标优化易失衡。通过设计硬约束网络架构,将初始与边界条件内嵌于模型输出,可自动满足约束,仅需优化方程残差,简化训练过程,提升稳定性与精度,适用于气候、生物医学等高要求仿真场景。
547 4
PINN训练新思路:把初始条件和边界约束嵌入网络架构,解决多目标优化难题
|
4月前
|
运维 Prometheus 监控
别再“亡羊补牢”了!——聊聊如何优化企业的IT运维监控架构
别再“亡羊补牢”了!——聊聊如何优化企业的IT运维监控架构
208 8
|
4月前
|
缓存 运维 监控
Redis 7.0 高性能缓存架构设计与优化
🌟蒋星熠Jaxonic,技术宇宙中的星际旅人。深耕Redis 7.0高性能缓存架构,探索函数化编程、多层缓存、集群优化与分片消息系统,用代码在二进制星河中谱写极客诗篇。
|
5月前
|
存储 前端开发 安全
实现“永久登录”:针对蜻蜓Q系统的用户体验优化方案(前端uni-app+后端Laravel详解)-优雅草卓伊凡
实现“永久登录”:针对蜻蜓Q系统的用户体验优化方案(前端uni-app+后端Laravel详解)-优雅草卓伊凡
270 5
|
6月前
|
机器学习/深度学习 存储 人工智能
RAG系统文本检索优化:Cross-Encoder与Bi-Encoder架构技术对比与选择指南
本文将深入分析这两种编码架构的技术原理、数学基础、实现流程以及各自的优势与局限性,并探讨混合架构的应用策略。
464 10
RAG系统文本检索优化:Cross-Encoder与Bi-Encoder架构技术对比与选择指南
|
8月前
|
前端开发 JavaScript 索引
前端性能优化:虚拟滚动技术原理与实战
前端性能优化:虚拟滚动技术原理与实战
1115 80
|
8月前
|
缓存 监控 前端开发
前端性能优化:现代框架的关键策略
前端性能优化:现代框架的关键策略
426 74
|
10月前
|
数据采集 运维 Serverless
云函数采集架构:Serverless模式下的动态IP与冷启动优化
本文探讨了在Serverless架构中使用云函数进行网页数据采集的挑战与解决方案。针对动态IP、冷启动及目标网站反爬策略等问题,提出了动态代理IP、请求头优化、云函数预热及容错设计等方法。通过网易云音乐歌曲信息采集案例,展示了如何结合Python代码实现高效的数据抓取,包括搜索、歌词与评论的获取。此方案不仅解决了传统采集方式在Serverless环境下的局限,还提升了系统的稳定性和性能。
302 0

热门文章

最新文章

  • 1
    前端如何存储数据:Cookie、LocalStorage 与 SessionStorage 全面解析
    785
  • 2
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(九):强势分析Animation动画各类参数;从播放时间、播放方式、播放次数、播放方向、播放状态等多个方面,完全了解CSS3 Animation
    356
  • 3
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(八):学习transition过渡属性;本文学习property模拟、duration过渡时间指定、delay时间延迟 等多个参数
    275
  • 4
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(七):学习ransform属性;本文学习 rotate旋转、scale缩放、skew扭曲、tanslate移动、matrix矩阵 多个参数
    242
  • 5
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(六):全方面分析css的Flex布局,从纵、横两个坐标开始进行居中、两端等元素分布模式;刨析元素间隔、排序模式等
    356
  • 6
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(五):背景属性;float浮动和position定位;详细分析相对、绝对、固定三种定位方式;使用浮动并清除浮动副作用
    502
  • 7
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(四):元素盒子模型;详细分析边框属性、盒子外边距
    314
  • 8
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(三):元素继承关系、层叠样式规则、字体属性、文本属性;针对字体和文本作样式修改
    167
  • 9
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(二):CSS伪类:UI伪类、结构化伪类;通过伪类获得子元素的第n个元素;创建一个伪元素展示在页面中;获得最后一个元素;处理聚焦元素的样式
    313
  • 10
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(一):CSS发展史;CSS样式表的引入;CSS选择器使用,附带案例介绍
    314