当前位置:首页 » 网页前端 » 高并发前端怎么优化
扩展阅读
webinf下怎么引入js 2023-08-31 21:54:13
堡垒机怎么打开web 2023-08-31 21:54:11

高并发前端怎么优化

发布时间: 2023-01-15 17:48:54

‘壹’ 前端网站常规优化方案

1、减少请求次数

2、减小资源大小

3、提高响应和加载速度

4、优化资源加载时机

5、优化加载方式

1、合并、压缩、混淆html/css/js文件(webpack实现,减小资源大小)

2、Nginx开启Gzip,进一步压缩资源(减小资源大小)

3、图片资源使用CDN加速(提高加载速度)

4、符合条件的图标做base64处理(减小资源大小)

5、样式表放首部,JS放尾部(JS单线程,会阻塞页面;资源加载方式)

6、设置缓存(强缓存和协商缓存,提高加载速度)

7、link或者src添加rel属性,设置prefetch或preload可预加载资源。(加载时机)

8、如果使用了UI组件库,采用按需加载(减小资源大小)

9、SPA项目,通过import或者require做路由按需(减小资源大小)加载

10、服务端渲染SSR,加快首屏渲染,利于SEO

11、页面使用骨架屏,提高首页加载速度(提高加载速度)

12、使用 JPEG 2000, JPEG XR, and WebP 的图片格式来代替现有的jpeg和png,当页面图片较多时,这点作用非常明显

13、使用图片懒加载-lazyload

‘贰’ 如何对前端性能进行优化

前端开发代码优化、可维护性、浏览器兼容性是非常重要的课题。从实际的工程应用角度出发,最常遇见的前端优化问题。前端性能进行优化规则,基本可以涵盖现在前端大部分的性能优化原则了,很多更加geek和精细优化方法都是从这些原则里面延伸出来的。

前端性能进行优化都有哪些规则

  1. 减少HTTP请求次数

    尽量合并图片、CSS、JS。比如加载一个页面有5个css文件的话,把这个5个文件合成一个的话,就只需要发出一次http请求,节省网络请求时间,加快页面的加载。

2. 使用CDN

网站上静态资源即css、js全都使用cdn分发,包括图片

3. 避免空的src和href

当link标签的href属性为空、script标签的src属性为空的时候,浏览器渲染的时候会把当前页面的URL作为它们的属性值,从而把页面的内容加载进来作为它们的值。所以要避免犯这样的疏忽。

4. 为文件头指定Expires

Exipres是用来设置文件的过期时间的,一般对css、js、图片资源有效。 他可以使内容具有缓存性,这样下回再访问同样的资源时就通过浏览器缓存区读取,不需要再发出http请求。如下例子:

新浪微博的这个css文件的Expires时间是2016-5-04 09:14:14.

5. 使用gzip压缩内容

gzip能够压缩任何一个文本类型的响应,包括html,xml,json。大大缩小请求返回的数据量。

6. 把CSS放到顶部

网页上的资源加载时从上网下顺序加载的,所以css放在页面的顶部能够优先渲染页面,让用户感觉页面加载很快。

7. 把JS放到底部

加载js时会对后续的资源造成阻塞,必须得等js加载完才去加载后续的文件 ,所以就把js放在页面底部最后加载。

8. 避免使用CSS表达式

举个css表达式的例子

font-color: expression( (new Date()).getHours()%3 ? “#FFFFFF" : “#AAAAAA" );

这个表达式会持续的在页面上计算样式,影响页面的性能。并且css表达式只被IE支持。

9. 将CSS和JS放到外部文件中

目的是缓存文件,可以参考原则4。 但有时候为了减少请求,也会直接写到页面里,需根据PV和IP的比例权衡。

10. 权衡DNS查找次数

减少主机名可以节省响应时间。但同时,需要注意,减少主机会减少页面中并行下载的数量。

IE浏览器在同一时刻只能从同一域名下载两个文件。当在一个页面显示多张图片时,IE 用户的图片下载速度就会受到影响。所以新浪会搞N个二级域名来放图片。

下面是新浪微博的图片域名,我们可以看到他有多个域名,这样可以保证这些不同域名能够同时去下载图片,而不用排队。不过如果当使用的域名过多时,响应时间就会慢,因为不用响应域名时间不一致。

11. 精简CSS和JS

这里就涉及到css和js的压缩了。比如下面的新浪的一个css文件,把空格回车全部去掉,减少文件的大小。现在的压缩工具有很多,基本主流的前端构建工具都能进行css和js文件的压缩,如grunt,glup等。

12. 避免跳转

有种现象会比较坑爹,看起来没什么差别,其实多次了一次页面跳转。比如当URL本该有斜杠(/)却被忽略掉时。例如,当我们要访问http:// .com时,实际上返回的是一个包含301代码的跳转,它指向的是http:// .com/(注意末尾的斜杠)。在nginx服务器可以使用rewrite;Apache服务器中可以使用Alias 或者 mod_rewrite或者the DirectorySlash来避免。

另一种是不用域名之间的跳转, 比如访问http:// .com/bbs跳转到http:// bbs..com/。那么可以通过使用Alias或者mod_rewirte建立CNAME(保存一个域名和另外一个域名之间关系的DNS记录)来替代。

13. 删除重复的JS和CSS

重复调用脚本,除了增加额外的HTTP请求外,多次运算也会浪费时间。在IE和Firefox中不管脚本是否可缓存,它们都存在重复运算JavaScript的问题。

14. 配置ETags

它用来判断浏览器缓存里的元素是否和原来服务器上的一致。比last-modified date更具有弹性,例如某个文件在1秒内修改了10次,Etag可以综合Inode(文件的索引节点(inode)数),MTime(修改时间)和Size来精准的进行判断,避开UNIX记录MTime只能精确到秒的问题。 服务器集群使用,可取后两个参数。使用ETags减少Web应用带宽和负载

15. 可缓存的AJAX

异步请求同样的造成用户等待,所以使用ajax请求时,要主动告诉浏览器如果该请求有缓存就去请求缓存内容。如下代码片段, cache:true就是显式的要求如果当前请求有缓存的话,直接使用缓存

$.ajax({ url : 'url', dataType : "json", cache: true, success : function(son, status){ }

16. 使用GET来完成AJAX请求

当使用XMLHttpRequest时,浏览器中的POST方法是一个“两步走”的过程:首先发送文件头,然后才发送数据。因此使用GET获取数据时更加有意义。

17. 减少DOM元素数量

这是一门大学问,这里可以引申出一堆优化的细节。想要具体研究的可以看后面推荐书籍。总之大原则减少DOM数量,就会减少浏览器的解析负担。

18. 避免404

比如外链的css、js文件出现问题返回404时,会破坏浏览器的并行加载。

19. 减少Cookie的大小

Cookie里面别塞那么多东西,因为每个请求都得带着他跑。

20. 使用无cookie的域

比如CSS、js、图片等,客户端请求静态文件的时候,减少了 Cookie 的反复传输对主域名的影响。

21. 不要使用滤镜

IE独有属性AlphaImageLoader用于修正7.0以下版本中显示PNG图片的半透明效果。这个滤镜的问题在于浏览器加载图片时它会终止内容的呈现并且冻结浏览器。在每一个元素(不仅仅是图片)它都会运算一次,增加了内存开支,因此它的问题是多方面的。

完全避免使用AlphaImageLoader的最好方法就是使用PNG8格式来代替,这种格式能在IE中很好地工作。如果你确实需要使用AlphaImageLoader,请使用下划线_filter又使之对IE7以上版本的用户无效。

22. 不要在HTML中缩放图片

比如你需要的图片尺寸是50* 50

那就不用用一张500*500的大尺寸图片,影响加载

23. 缩小favicon.ico并缓存

‘叁’ 常用的前端性能优化方法有哪些

常用的优化有两部分
第一:面向内容的优化
1. 减少 HTTP 请求
2. 减少 DNS 查找
3. 避免重定向
4. 使用 Ajax 缓存
5. 延迟载入组件

6. 预先载入组件
7. 减少 DOM 元素数量
8. 切分组件到多个域

9. 最小化 iframe 的数量
10. 不要出现http 404 错误
第二:面向 Server
1. 缩小 Cookie
2. 针对 Web 组件使用域名无关性的

‘肆’ 电子商务网站中高负载,高并发指的到底是什么解决思路有哪些

电子商务网站高负载,简单可以分为前端和后台:
前端主要是图片(应该没有文件下载吧),因为是电子商务网站,少不了大量的图片,用户集中的情况下,网页加载就会变的极其缓慢。
解决思路:1、压缩图片,使产品图不失真的情况下尽可能的减少体积,节省宽带。2、增大服务器带宽。3、优化网页代码,尽量采用异步加载方式。4、CDN
后台则是数据处理和数据库负载,电子商务网站后台除了庞大的用户数据要处理意外,还有大量订单,和结算数据。
解决思路:增大数据库服务器配置。
高并发,是所有访问量大的网站都会遇到的问题,并发数是指同一时刻,服务器能接受多少次同时访问,比如服务器配置并发数为200,则这一刻只能允许200个用户同时访问,超过并发数,轻则用户打不开网站,严重的则是服务器宕机。
解决思路:1、CDN。2、增加服务器配置
注:CDN是现在网站普遍使用的加速方案,对减轻服务器负载,避免高并发,缓解恶意攻击都有很好的效果,其主要原理就是将服务器上的数据分发给多个服务器,用户访问的是CDN服务器,从而减轻和保护了网站服务器,也就是常说的云服务器。

‘伍’ php 高并发解决思路解决方案

php 高并发解决思路解决方案,如何应对网站大流量高并发情况。本文为大家总结了常用的处理方式,但不是细节,后续一系列细节教程给出。希望大家喜欢。

一 高并发的概念

在互联网时代,并发,高并发通常是指并发访问。也就是在某个时间点,有多少个访问同时到来。

二 高并发架构相关概念

1、QPS (每秒查询率) : 每秒钟请求或者查询的数量,在互联网领域,指每秒响应请求数(指 HTTP 请求)

2、PV(Page View):综合浏览量,即页面浏览量或者点击量,一个访客在 24 小时内访问的页面数量

--注:同一个人浏览你的网站的同一页面,只记做一次 pv

3、吞吐量(fetches/sec) :单位时间内处理的请求数量 (通常由 QPS 和并发数决定)

4、响应时间:从请求发出到收到响应花费的时间

5、独立访客(UV):一定时间范围内,相同访客多次访问网站,只计算为 1 个独立访客

6、带宽:计算带宽需关注两个指标,峰值流量和页面的平均大小

7、日网站带宽: PV/统计时间(换算到秒) * 平均页面大小(kb)* 8

三 需要注意点:

1、QPS 不等于并发连接数(QPS 是每秒 HTTP 请求数量,并发连接数是系统同时处理的请求数量)

2、峰值每秒请求数(QPS)= (总 PV 数*80%)/ (六小时秒数*20%)【代表 80%的访问量都集中在 20%的时间内】

3、压力测试: 测试能承受的最大并发数 以及测试最大承受的 QPS 值

4、常用的性能测试工具【ab,wrk,httpload,Web Bench,Siege,Apache JMeter】

四 优化

1、当 QPS 小于 50 时

优化方案:为一般小型网站,不用考虑优化

2、当 QPS 达到 100 时,遇到数据查询瓶颈

优化方案: 数据库缓存层,数据库的负载均衡

3、当 QPS 达到 800 时, 遇到带宽瓶颈

优化方案:CDN 加速,负载均衡

4、当 QPS 达到 1000 时

优化方案: 做 html 静态缓存

5、当 QPS 达到 2000 时

优化方案: 做业务分离,分布式存储

五、高并发解决方案案例:

1、流量优化

防盗链处理(去除恶意请求)

2、前端优化

(1) 减少 HTTP 请求[将 css,js 等合并]

(2) 添加异步请求(先不将所有数据都展示给用户,用户触发某个事件,才会异步请求数据)

(3) 启用浏览器缓存和文件压缩

(4) CDN 加速

(5) 建立独立的图片服务器(减少 I/O)

3、服务端优化

(1) 页面静态化

(2) 并发处理

(3) 队列处理

4、数据库优化

(1) 数据库缓存

(2) 分库分表,分区

(3) 读写分离

(4) 负载均衡

5、web 服务器优化

(1) nginx 反向代理实现负载均衡

(2) lvs 实现负载均衡

‘陆’ 前端怎么优化大数据页面

来源:前端的性能优化都有哪些东西?作者:野次前端性能优化是个巨大的课题,如果要面面俱到的