开发者社区域名解析DNS DNS最佳实践文章正文

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

2022-12-07 206

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

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

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

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

5bc6accb114c4082ab34a8a9d8b9f12d~tplv-k3u1fbpfcp-zoom-in-crop-mark_4536_0_0_0.webp.jpg 2. 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

文章标签：

云解析DNS

前端开发

网络协议

关键词：

前端页面

云解析DNS性能

云解析DNS页面

前端页面性能

前端性能

yestodorrow

卓伊凡

8月前

前端开发安全开发工具

【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex

卓伊凡

411 90 92

【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex

全干程序员demo

6月前

存储前端开发 JavaScript

调用DeepSeek API增强版纯前端实现方案，支持文件上传和内容解析功能

本方案基于DeepSeek API增强版，提供纯前端实现的文件上传与内容解析功能。通过HTML和JavaScript，用户可选择文件并调用API完成上传及解析操作。方案支持多种文件格式（如PDF、TXT、DOCX），具备简化架构、提高响应速度和增强安全性等优势。示例代码展示了文件上传、内容解析及结果展示的完整流程，适合快速构建高效Web应用。开发者可根据需求扩展功能，满足多样化场景要求。

全干程序员demo

2101 64 65

1892286422419957

4月前

IDE 前端开发开发工具

用通义灵码IDE做产品高保真原型和前端页面

通义灵码IDE助力高效开发，告别传统Axure原型图的繁琐沟通。通过该工具可直接生成高保真产品原型与前端页面，大幅提升客户确认效率及满意度。现已将相关演示发布至B站（https://www.bilibili.com/video/BV18qT7ziEb7/?vd_source=dc6a6864c895818db6ce4170d50b3557），欢迎体验！用直观操作代替反复说明，让交付更流畅。

1892286422419957

333 1 1

卓伊凡

9月前

Dart 前端开发

【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈

卓伊凡

293 75 75