前端页面响应时间长简单定位分析

最新推荐文章于 2023-08-17 13:58:46 发布
最新推荐文章于 2023-08-17 13:58:46 发布
阅读量5.2k 收藏
点赞数
分类专栏： 性能测试思想 前端技术
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/haoluojie/article/details/52372435
版权

利用firebug-yslow进行分析，也可利用loadrunner的analysis的拆分细节图进行定位分析。

代理商号段新增、编辑、删除执行效率低下，根据页面细分图详细结果分析，95%以上的响应时间耗费在如下：

http://192.168.1.201:8055/pm_out/FrPsamRange/saveFrPsamRangeAction?rel=FrPsamRangeNext&navTabId=FrPsamRangeNext&callbackType=closeCurrent

"http://192.168.1.201:8055/pm_out/FrPsamRange/modifyFrPsamRangeActionNew?navTabId=FrPsamRangeNext&callbackType=closeCurrent"

http://192.168.1.201:8055/pm_out/FrPsamRange/deleteFrPsamRangeActionNew?navTabId=FrPsamRangeNext&callbackType=closeCurrent

 

以上问题借助Page Component Breakdown、Page Download TimeBreakdown、Time to First Buffer Breakdown等组件进行拆分分析

具体问题及数据见测试报告

haoluojie
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
基于web前端响应式企业网站设计与实现-毕业设计
09-07
在信息高速发展的这个时代，网络作为现今最为方便快捷的...分析并解决实现中的若干技术问题：介绍企业官网个性化页面的背景及 HTML5 响应式布局的一般原理；阐述整个企业官网的结构及工作原理；分析 实现中的难点和重点
传说中的军规：网站前端和后台性能优化的34条经验和方法
ligenyingsr的专栏
11-04 815
<br />1 减少HTTP请求数量 (Minimize HTTP Requests)<br /> <br />tag:content<br />80%的用户响应时间被花费在前端，而这其中的绝大多数时间是用于下载页面中的图片、样式表、脚本以及Flash这些组件。减少这些组件的数量就可以减少展示页面所需的请求数，而这是提高网页响应速度的关键。<br />朴素的页面设计当然是减少组件的一种途径，但有没有能兼顾丰富的页面内容和快速的响应速度的方法呢？下面就是一些不错的技巧，能在提供丰富的页面展现的同时，减少Htt
vue请求时间太长_接口处理请求时间过长，前台响应“服务器超时”的解决办法
weixin_45441470的博客
08-17 6647
这些方法可以根据具体需求和情况进行选择和组合使用，以提高前端的用户体验和接口的性能。同时，还需要考虑服务器端的性能和网络环境，以及前后端的协作来实现最佳的用户体验。
小白如何学Web前端 怎么解决网站响应时间过长
qq_43444478的博客
09-28 1078
　　小白如何学Web前端？怎么解决网站响应时间过长？在完成网页制作项目的时候，有人发现在这个过程中网页打开很慢，即网站响应时间过长。针对这个问题，下面就给大家分享几种比较好的解决方法。 　　网站响应时间是什么? 　　网站响应时间是指系统对请求作出响应的时间，通俗来讲就是我们把网址输入进浏览器然后敲回车键开始一直到浏览器把网站的内容呈现给用户的这段时间。网站响应时间是越短越好，因为网站页面打开速度越快，就意味着我们的用户可以更快的访问站点或者我们的服务器。一般我们网站的响应时间保持在100-1000m
Web前端性能优化的8条建议，你知道几条？
weixin_43703144的博客
08-04 156
一般网站优化都是优化后台，如接口的响应时间、SQL优化、后台代码性能优化、服务器优化等。高并发情况下，对前端Web优化也是非常重要的。 下面说说几种常见的优化措施，和千锋广州小编一起来看看吧。 1、HTML CSS JS位置 一般需要将CSS放页面最上面，即HEAD部分，而将JS代码放页面底部。因为页面需要加载为CSS才进行渲染，而JS如果不是在页面加载之前就要执行就要放到页面最底部，以免在页面展示之前因JS过多加载而影响页面渲染速度。 2、引用文件位置 有一些插件需要引用到远程的图片、CSS、JS、图标等
为什么我的接口响应时间这么长？记一次接口响应时间过长问题排查
weixin_44421461的博客
01-23 1535
点击上方“Java基基”，选择“设为星标”做积极的人，而不是积极废人！每天14:00更新文章，每天掉亿点点头发...源码精品专栏原创 | Java 2021超神之路，很肝~中文详细注释的开源项目RPC 框架 Dubbo 源码解析网络应用框架 Netty 源码解析消息中间件 RocketMQ 源码解析数据库中间件 Sharding-JDBC 和 MyCAT 源码解析作业调度中间件 Elast...
【web性能】获取web各个阶段响应时间：服务器响应时间、首页白屏时间、dom渲染完成时间等...
weixin_33691700的博客
01-14 1268
【web性能】Web performance 获取web各个阶段响应时间：DNS解析时间、TCP建立连接时间、首页白屏时间、dom渲染完成时间、页面onload时间等 准确地测量web应用程序的性能特性是使web应用程序更快的一个重要方面 那么我们怎么知道一个网站加载定的时间呢？ 我们可以添加时间戳标记 下面的JavaScript显示了一...
如何在浏览器查看渲染时间？
weixin_42364397的博客
05-21 9879
1、打开开发者工具（F12） 2、找到Performance =>点击录制按钮 3、F5刷新页面 =》点击关闭录制（同录制按钮） 4、找到Summary（console只上偏中部左侧位置） 蓝色：网路通信时间 黄色：js时间 紫色：重排的时间 绿色：重绘的时间 那个占比越大，那个花的时间越长，问题越严重。 记录读重排重绘笔记（地址） ...
解决ping 127.0.0.1 一般故障 问题
asdfgh0077的博客
12-08 4098
解决ping 127.0.0.1 一般故障 问题
从前端角度分析浏览器响应时间慢等情况
jjb_584520的博客
03-20 692
1、测试工具：httpWatch professional 测试角度： 1、浏览器处理速度依赖渲染引擎和脚本，不同的浏览器渲染引擎不一样。 2、css是渲染的重要参数，所以一般要放在前面 3、请求不能太多，小图片不能多 http请求数量优化方法： 1、减少重定向请求 2、减少预处理时间（time chart中的blocked） 3、减少TCP链接的时间 4、减少发送请求的时间 ...
IT-WEB前端-QQ空间前端代码-学习交流
04-26
已经写好了注释带响应式定位，和官方一摸一样，缺点是没有写接口需要自己写后端 主要文件img：qq空间图标，其他的就一个单页面，主要是搞前端的不会后端，能力不足， 希望各位大佬帮忙看看有所补充，欢迎私信和评论...
web前端网页设计资源合集
06-14
web前端网页设计作品 在信息高速发展的这个时代，网络作为现今最为方便快捷的媒介也越来越被 人们接受，并且融入我们的生活。在 2015 年时，随着 HTML5 在国内的兴起，也 在不断的推进着信息时代的发展，网站也逐渐...
初识前端
01-08
hello，欢迎大家来关注我的博客，这一章，我们来...前端的开发中，在页面的布局时， HTML将元素进行定义，CSS对展示的元素进行定位，再通过JavaScript实现相应的效果和交互。虽然表面看起来很简单，但这里面需要掌握
地图定位追踪APP单页面模板-适配移动端&PC端-HTML网站源码.zip
最新发布
04-01
您可以根据自己的需求对页面进行布局调整、颜色更改以及内容替换，轻松打造出符合您项目风格的网站。同时，我们的代码结构清晰、注释详细，方便您学习和理解HTML、CSS和JavaScript等前端技术。您可能面临着课程设计...
性能测试的指标（转）
晓飛的博客
06-09 1971
转载自alice_tl 性能测试的定义 转：观察系统在一个给定的环境和场景中的性能表现是否与预期目标一致，评判系统是否存在性能缺陷，并根据测试结果识别性能瓶颈，改善系统性能的完整的过程 性能测试的分类 基准测试：单用户，发单次请求，产出基准性能数据 负载测试：多用户，用户数渐增，持续同时发同一业务请求，产出最大TPS 压力测试：多用户，资源使用饱和，持续同...
页面响应时间长，排查步骤
weixin_44133661的博客
07-18 3007
页面刷新慢 1、在后台日志中找到查询慢的sql，确定是哪个库哪张表。（tail -f **.log > event.log） 2、在mysql中执行show processlist;（或者show full processlist;）查看是否有查询慢的sql，和日志里捞出来的sql一致。 show processlist;详解 最近排查一些MySQL的问题，会经常用到 show proces...
接口响应时间长，前端返回请求超时解决
当然是最帅气的茶茶丸了！哇耶~
03-10 6917
1. 全局设置 axios.defaults.timeout = 时间 // 单位为毫秒或2. 封装的http请求或3.
设置接口响应时间
qq_42655697的博客
03-17 4003
1.axios全局设置 axios.js中： 或者直接写：axios.defaults.timeout = 30 * 1000; // 30s 2.单独对某一个请求设置 3.webpack的dev的proxyTable的超时时间设置 dev: { // Paths assetsSubDirectory: 'static', // 静态资源文件夹 assetsPublicPath: '/', // 发布路径 // 代理配置表，在这里可以配置特定的请求代理到对应的API接
前端响应式开发学习路线
07-08
学习前端响应式开发需要一定的基础知识和技能，以下是一个学习路线的建议： 1. 掌握HTML和CSS基础：了解HTML标记语言的结构和语法，学习CSS样式的基本使用和选择器的应用。 2. 学习CSS布局技术：深入学习CSS布局的各种技术，如盒模型、浮动、定位、弹性布局、网格布局等，掌握它们的使用方法和特性。 3. 学习响应式设计原理：了解响应式设计的原理和概念，学习如何根据不同设备和屏幕尺寸调整页面布局和样式。 4. 掌握CSS媒体查询：学习使用CSS媒体查询来根据不同的屏幕尺寸和设备特性应用不同的样式。 5. 学习响应式图像处理：了解如何为不同屏幕尺寸提供适当大小和格式的图像，以优化页面加载速度和用户体验。 6. 学习响应式框架：熟悉流行的响应式框架，如Bootstrap、Foundation、Bulma等，学习它们的使用方法和组件库。 7. 学习移动优先设计：了解移动优先设计的概念和方法，学习如何从小屏幕开始设计和开发，并逐渐扩展到更大的屏幕尺寸。 8. 学习跨浏览器兼容性：了解不同浏览器之间的差异和兼容性问题，学习如何处理和解决这些问题。 9. 实践项目开发：在学习的过程中，尝试开发响应式的网站或应用项目，应用所学的知识和技术，同时不断练习和提升自己的技能。 10. 持续学习和实践：前端技术和框架在不断发展和更新，要保持学习的状态，关注最新的前端技术趋势和最佳实践，并不断地进行实践和项目开发。 请注意，这只是一个大致的学习路线，实际的学习过程中可能需要根据自己的情况和需求进行适当的调整和深入学习。同时，不断实践和构建项目是提升自己前端响应式开发能力的重要途径。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值