当前位置: 首页 > article >正文

性能优化一条龙

性能优化

根据实际情况做性能优化的流程和分析。

性能优化的话,可以从很多方面,ui优化,组件优化,打包体积优化,页面优化等,但我们要监控这个页面哪些指标需要优化,比如FP,FCP,FMP,如果是fp时间过长,就要从网络层面进行优化,现在普遍的都是http1.1的请求方式,就要去考虑要不要升级到http2,采用一种多路复用的能力,或者再上一层,可以考虑dns解析的速度是否过慢,可以考虑是否用dns缓存或者dns预解析去解决问题,然后做一些预加载的过程。如果是fcp时间过长,那就是说浏览器渲染第一块时间过长,我们浏览器接收的包的体积过大,导致我们解析过慢,我们考虑一下是否要进行拆包处理,也要对图片进行一些压缩操作,大概能想到的,也就这两种。如果是fmp时间过长,那就是说浏览器绘制时间过长,这要从代码层面去解决问题,可以通过ssr,在服务端进行渲染,然后返回,其实压缩图片体积,也能优化FMP的时间。

FP:first paint 白屏时间,如果是fp时间过长,就要从网络层面进行优化,现在普遍的都是http1.1的请求方式,就要去考虑要不要升级到http2,采用一种多路复用的能力,或者再上一层,可以考虑dns解析的速度是否过慢,可以考虑是否用dns缓存或者dns预解析去解决问题,然后做一些预加载的过程。

FCP:如果是fcp时间过长,那就是说浏览器渲染第一块时间过长,我们浏览器接收的包的体积过大,导致我们解析过慢,我们考虑一下是否要进行拆包处理,也要对图片进行一些压缩操作,大概能想到的,也就这两种。

FMP:如果是fmp时间过长,那就是说浏览器绘制时间过长,这要从代码层面去解决问题,可以通过ssr,在服务端进行渲染,然后返回,其实压缩图片体积,也能优化FMP的时间。

多路复用:http1.1中,浏览器同一时间只能发送一个请求。当一个请求占用通道时,其他请求只能等待,即使他能立即响应,消耗了很多等待时间。h2中通过多路复用的方式解决了对头阻塞的问题。提高了传输效率,h1.1是通过文本方式进行传输的,而http2引入了帧和流的概念,链接成功后,一条链接上,可以以二进制的方式发送多条消息,彼此之间互不影响,这就解决了对头阻塞的问题。

DNS解析

就是当你进行请求的时候,服务器会把你的域名解析成ip,这个过程就是dns的解析过程,优化dns过慢的问题,可以通过cdn服务进行dns负载均衡,或者进行dns缓存,dns预解析,都能提高速度。

cdn服务进行dns负载均衡:即cnd服务器会将用户请求导向最近的cdn服务站,然后当进行dns解析时,cdn服务站会返回距离最近的服务站的ip地址,从而加速内容的运输。

dns缓存:对请求的域名和ip结果在本地进行缓存,以便在将来的DNS查询中重复请求。

dns预解析:预解析是一种浏览器技术,它可以在后台对网页中的域名进行解析,以便提前获取域名对应的IP地址或其他资源,从而加速网页的加载速度。预解析可以通过

标签来实现。

ssr服务端渲染

这个晚些会单出一个文档,这里就放一个链接了

深入浅出 SSR 及 Nuxt.js 初体验 - 掘金


http://www.kler.cn/news/161576.html

相关文章:

  • Spring Boot的日志
  • 【PyTorch】模型的基本操作
  • html电子签名
  • vue+echarts实现桑吉图的效果
  • 策略模式终极解决方案之策略机
  • Jquery easyui异步提交表单的两种方式
  • Vue练习 v-model 指令在状态和表单输入之间创建双向绑定
  • Vue3集成ThreeJS实现3D效果,threejs+Vite+Vue3+TypeScript 实战课程【一篇文章精通系列】
  • stm32f103使用hal库函数读写内部flash
  • 【分布式微服务专题】从单体到分布式(二、SpringCloud整合Nacos)
  • TR转发路由器测评—云企业网实现跨地域跨VPC的网络互通测评实战【阿里云产品测评】
  • tomcat环境搭建
  • 深入理解Dubbo-1.初识Dubbo
  • Csharp(C#)无标题栏窗体拖动代码
  • 推荐5款很牛的Paas平台编译构建工具
  • .netcore 操作aspose.words导出pdf
  • selenium 执行js后拿不到返回值的原因
  • IT基础监控方案:5台服务器和20台网络设备监控
  • UnityShader自定义cginc文件
  • Intellij idea 快速定位到文件的开头或者结尾的几种方式
  • 预测:2024年的安防监控行业将迎来怎样的变化?
  • 使用postman请求x5接口
  • C语言指针详解上
  • 【推荐系统】了解推荐系统的生态(重点:推荐算法的主要分类)
  • 【Java基础篇 | 面向对象】—— 聊聊什么是接口(上篇)
  • 智能优化算法应用:基于鹰栖息算法无线传感器网络(WSN)覆盖优化 - 附代码
  • 2.HTML进阶
  • 为什么伦敦银交易中支撑和阻力位这么重要?
  • 展开说说:Android之广播接收者
  • 连接服务器的ssh终端自动断开解放方法