从前端资源的dns/tcp的角度看页面性能

简介: 从前端资源的dns/tcp的角度看页面性能

通过资源加载中的dns/tcp,来看lcp和fcp和loading time。 不一定是dns/tcp和lcp或者fcp有直接关系。就是想看看到底数据箱体在什么范围区间内。


  1. DNS 根据实际生产数据,将14天内页面所有资源加载的dns数据进行绘制得到以下图表。

5bc6accb114c4082ab34a8a9d8b9f12d~tplv-k3u1fbpfcp-zoom-in-crop-mark_4536_0_0_0.webp.jpg2. TCP

03ab19d149364f7aa11396b0b3ca45f4~tplv-k3u1fbpfcp-zoom-in-crop-mark_4536_0_0_0.webp.jpg

3 LOAD

4ddbb8e5999e4ea4b922748dc8936fb1~tplv-k3u1fbpfcp-zoom-in-crop-mark_4536_0_0_0.webp.jpg

4.LCP

22e2cd9fa8e64546a680bb2ad2f2e9ad~tplv-k3u1fbpfcp-zoom-in-crop-mark_4536_0_0_0.webp.jpg

5.FCP

0182c66db71c49acae1fc6340b83cc64~tplv-k3u1fbpfcp-zoom-in-crop-mark_4536_0_0_0.webp.jpg

总图

fa32f67278a748609440e099bcba78b3~tplv-k3u1fbpfcp-zoom-in-crop-mark_4536_0_0_0.webp.jpg

仅看最近7天的数据

99bf0e8ac16c4ae3904361ae0b83ffab~tplv-k3u1fbpfcp-zoom-in-crop-mark_4536_0_0_0.webp.jpg

仅看最近3天的数据


559f5d52a4ba464fb2594402b59d9fdc~tplv-k3u1fbpfcp-zoom-in-crop-mark_4536_0_0_0.webp.jpg


29m的数据

83a85703e764487f827a1c887cb0f578~tplv-k3u1fbpfcp-zoom-in-crop-mark_4536_0_0_0.webp.jpg


目录
相关文章
|
6天前
|
机器学习/深度学习 前端开发 算法
利用深度学习技术提升前端图像处理性能
本文将探讨如何利用深度学习技术在前端图像处理中提升性能。通过结合深度学习算法和前端技术,我们可以实现更高效的图像处理功能,提升用户体验和系统性能。
|
6天前
|
前端开发 数据可视化 JavaScript
前端vite+vue3——可视化页面性能耗时指标(fmp、fp)
前端vite+vue3——可视化页面性能耗时指标(fmp、fp)
57 6
|
5天前
|
Web App开发 存储 缓存
第八篇 提升网页性能:深入解析HTTP请求优化策略(三)
第八篇 提升网页性能:深入解析HTTP请求优化策略(三)
|
5天前
|
消息中间件 前端开发 JavaScript
第七篇 提升网页性能:深入解析HTTP请求优化策略(二)
第七篇 提升网页性能:深入解析HTTP请求优化策略(二)
|
6天前
|
前端开发 Android开发 iOS开发
【Flutter前端技术开发专栏】Flutter在Android与iOS上的性能对比
【4月更文挑战第30天】Flutter 框架实现跨平台移动应用,通过一致的 UI 渲染(Skia 引擎)、热重载功能和响应式框架提高开发效率和用户体验。然而,Android 和 iOS 的系统差异、渲染机制及编译过程影响性能。性能对比显示,iOS 可能因硬件优化提供更流畅体验,而 Android 更具灵活性和广泛硬件支持。开发者可采用代码、资源优化和特定平台优化策略,利用性能分析工具提升应用性能。
【Flutter前端技术开发专栏】Flutter在Android与iOS上的性能对比
|
4天前
|
前端开发 JavaScript Java
Java网络商城项目 SpringBoot+SpringCloud+Vue 网络商城(SSM前后端分离项目)五(前端页面
Java网络商城项目 SpringBoot+SpringCloud+Vue 网络商城(SSM前后端分离项目)五(前端页面
Java网络商城项目 SpringBoot+SpringCloud+Vue 网络商城(SSM前后端分离项目)五(前端页面
|
5天前
|
编解码 前端开发 JavaScript
第六篇 提升网页性能:深入解析HTTP请求优化策略(一)
第六篇 提升网页性能:深入解析HTTP请求优化策略(一)
|
6天前
|
缓存 自然语言处理 JavaScript
万字长文深度解析JDK序列化原理及Fury高度兼容的极致性能实现
Fury是一个基于JIT动态编译的高性能多语言原生序列化框架,支持Java/Python/Golang/C++/JavaScript等语言,提供全自动的对象多语言/跨语言序列化能力,以及相比于别的框架最高20~200倍的性能。
168504 2
|
6天前
|
开发框架 前端开发 定位技术
【Flutter 前端技术开发专栏】Flutter 中的插件市场与开源资源利用
【4月更文挑战第30天】Flutter插件市场和开源资源加速开发进程。pub.dev是官方插件库,提供大量第三方插件,节约时间和保证质量。选择插件时关注功能需求、评价及维护状况。开源资源作为学习、解决问题和创新的平台,需注意版权、代码质量和兼容性。案例分析展示插件应用,开源社区促进交流与技术进步,未来市场将持续发展。善用资源,提升开发效率与项目竞争力。
【Flutter 前端技术开发专栏】Flutter 中的插件市场与开源资源利用
|
6天前
|
XML JSON 前端开发
【Flutter前端技术开发专栏】Flutter中的图片、视频与网络资源加载
【4月更文挑战第30天】Flutter是谷歌的开源前端框架,因其高性能、流畅UI和多端运行能力受开发者喜爱。本文聚焦于Flutter中的资源加载:使用`Image`组件加载静态、网络和本地图片;通过`video_player`库加载和播放视频;利用`http`包进行网络资源请求。掌握这些技巧将有助于提升Flutter应用的开发效率和质量。
【Flutter前端技术开发专栏】Flutter中的图片、视频与网络资源加载

相关产品

  • 云解析DNS
  • 推荐镜像

    更多