性能优化一条龙

性能优化

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

性能优化的话,可以从很多方面,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 初体验 - 掘金

相关推荐
崔庆才丨静觅9 小时前
hCaptcha 验证码图像识别 API 对接教程
前端
passerby60619 小时前
完成前端时间处理的另一块版图
前端·github·web components
掘了10 小时前
「2025 年终总结」在所有失去的人中,我最怀念我自己
前端·后端·年终总结
崔庆才丨静觅10 小时前
实用免费的 Short URL 短链接 API 对接说明
前端
崔庆才丨静觅10 小时前
5分钟快速搭建 AI 平台并用它赚钱!
前端
崔庆才丨静觅10 小时前
比官方便宜一半以上!Midjourney API 申请及使用
前端
Moment10 小时前
富文本编辑器在 AI 时代为什么这么受欢迎
前端·javascript·后端
崔庆才丨静觅11 小时前
刷屏全网的“nano-banana”API接入指南!0.1元/张量产高清创意图,开发者必藏
前端
剪刀石头布啊11 小时前
jwt介绍
前端
爱敲代码的小鱼11 小时前
AJAX(异步交互的技术来实现从服务端中获取数据):
前端·javascript·ajax