随笔分类 -  前端性能测试

Android、iOS手机性能测试
摘要:Prometheus介绍 Prometheus 是一款用于事件监控告警的开源免费应用程序, 采用Go编写。 Prometheus 工作时通过HTTP的方式周期性抓取被监控组件的性能数据,任意想要被监控的组件只需要提供对应的HTTP接口即可接入监控,不需要额外的SDK支持或者其他的集成过程,输出被监控 阅读全文
posted @ 2021-07-27 22:05 Syw_文 阅读(848) 评论(0) 推荐(0) 编辑
摘要:操作步骤: 1、进入网站找到对应的模板 2、在grafana中导入模板即可使用 输入网址:https://grafana.com/grafana/dashboards 数据源 >prometheus >选择一个模板进入 阅读全文
posted @ 2021-07-20 17:27 Syw_文 阅读(198) 评论(0) 推荐(0) 编辑
摘要:1.后端性能测试 后端性能测试,是通过性能测试工具模拟大量的并发用户请求,然后获取系统性能的各项指标,并且验证各项指标是否符合预期的性能需求的测试手段。 2.前端性能测试 通常来讲,前端性能关注的是浏览器端的页面渲染时间、资源加载顺序、请求数量、前端缓存使用情况、资源压缩等内容,希望借此找到页面加载 阅读全文
posted @ 2021-07-13 10:57 Syw_文 阅读(1615) 评论(0) 推荐(0) 编辑
摘要:性能测试的三个核心原理是什么? 1.基于协议。性能测试的对象是网络分布式架构的软件,而网络分布式架构的核心是网络协议2.多线程。人的大脑是单线程的,电脑的cpu是多线程的。性能测试就是利用多线程的技术模拟多用户去负载3.模拟真实场景。用户的访问时间,访问频率都不是固定的。 性能测试的核心关注点是什么 阅读全文
posted @ 2020-11-14 16:51 Syw_文 阅读(436) 评论(0) 推荐(1) 编辑
摘要:《如何做好性能压测》系列专题分享的第四期,该专题将从性能压测的设计、实现、执行、监控、问题定位和分析、应用场景等多个纬度对性能压测的全过程进行拆解,以帮助大家构建完整的性能压测的理论体系,并提供有例可依的实战。 该系列专题分享由阿里巴巴 PTS 团队出品,欢迎在文末处加入性能压测交流群,参与该系列的 阅读全文
posted @ 2020-04-26 13:30 Syw_文 阅读(966) 评论(0) 推荐(0) 编辑
摘要:Chrome Devtools 优点: 支持移动端H5在PC端远程调试,能够对具体的移动端设备进行测试 集成了page speed 提供network面板,展示瀑布流视图,各种资源清晰罗列,还提供缩略图,方便查看图片的大小、尺寸和冗余或缺失。 可模拟网速、设置device分辨率来测试实际的弱网环境显 阅读全文
posted @ 2020-04-15 15:44 Syw_文 阅读(567) 评论(0) 推荐(0) 编辑
摘要:渲染事件 CSS阻塞 CSS会阻塞渲染树的构建,不阻塞DOM构建,但是在CSSOM构建完成之前,页面不会开始渲染(一片空白),与js不一样,js虽然会阻塞后续DOM构建,但是前面已经就绪的内容会进行渲染。CSS虽然不阻塞DOM构建,但是会阻塞后面js的执行,从而间接阻塞完整DOM的构建,举个例子: 阅读全文
posted @ 2019-12-05 20:32 Syw_文 阅读(2105) 评论(0) 推荐(0) 编辑
摘要:文档解析 在Chrome开发者工具performence栏中可以看到parsing阶段: HTML parsing(HTML解析)的任务是根据HTML源文件生成parse tree 可以参照《编译原理》理解。对应到词法分析、语法分析。 webkit使用了两种非常有名的解析器生成器:用于创建词法分析器 阅读全文
posted @ 2019-12-05 20:19 Syw_文 阅读(192) 评论(0) 推荐(0) 编辑
摘要:在前面小节,我们对网页渲染过程做了介绍,其中最后两步就是layout与paint,当渲染对象被创建并添加到树中,它们并没有位置和大小,计算这些值的过程称为layout或reflow。绘制阶段,遍历渲染树并调用渲染对象的paint方法将它们的内容显示在屏幕上,绘制使用UI基础组件。 何时发生? 由两者 阅读全文
posted @ 2019-12-05 19:58 Syw_文 阅读(322) 评论(0) 推荐(0) 编辑
摘要:缓存一词原本来源于计算机系统结构,提供“缓存”的目的是为了让数据访问的速度适应CPU的处理速度,其基于的原理是内存中“程序执行与数据访问的局域性行为”,即一定程序执行时间和空间内,被访问的代码集中于一部分。 如今缓存的概念已被扩充,不仅在CPU和主内存之间有Cache,而且在内存和硬盘之间也有Cac 阅读全文
posted @ 2019-12-05 19:46 Syw_文 阅读(156) 评论(0) 推荐(0) 编辑
摘要:网络延迟 产生延迟的四种因素: 分别对应: 处理延迟: 处理分组首部、检查位错误及确定分组目标所需的时间 队列延迟: 到来的分组排队等待处理的时间 发送延迟: 把消息中的所有比特转移到链路中需要的时间,是消息长度和链路速率的函数 传输延迟: 消息从发送端到接收端需要的时间,是信号传播距离和速度的函数 阅读全文
posted @ 2019-12-03 20:41 Syw_文 阅读(590) 评论(0) 推荐(0) 编辑
摘要:这是一个古老的问题,即我们输入URL后按下回车到网页测呈现都发生了什么? 加载过程到显示如下: 1.根据域名,进行DNS域名解析; 2.拿到解析的IP地址,建立TCP连接; 3.向IP地址,发送HTTP请求; 4.服务器处理请求; 5.返回响应结果; 6.关闭TCP连接; 7.浏览器解析HTML; 阅读全文
posted @ 2019-11-28 21:10 Syw_文 阅读(785) 评论(0) 推荐(0) 编辑
摘要:TCP属于OSI七层模型中的传输层协议,位于网络边缘,提供端到端的可靠数据传输,其有着承上启下的作用,协议数据单元为报文段(Message Segment)。 TCP需要提供以下功能: 分组和复用 应用报文的差错检测(包括出错、丢失、重复、失序、超时等) 提供端到端的流量控制 提供拥塞控制 运输连接 阅读全文
posted @ 2019-11-28 20:06 Syw_文 阅读(398) 评论(0) 推荐(0) 编辑
摘要:Content Distribute Network(内容分发网络)是构建在网络之上的内容分发网络,依靠部署在各地的边缘服务器,通过中心平台的负载均衡、内容分发、调度等功能模块,使用户就近获取所需内容,降低网络拥塞,提高用户访问响应速度和命中率。 在之前的带宽与延迟章节,我们就提到了CDN,在该章节 阅读全文
posted @ 2019-11-28 19:50 Syw_文 阅读(226) 评论(0) 推荐(0) 编辑
摘要:https://github.com/laoqiren/web-performance 待全面学习 阅读全文
posted @ 2019-11-26 21:28 Syw_文 阅读(181) 评论(0) 推荐(0) 编辑
摘要:图像优化 在Web应用中,图片占据了很大一部分流量,所以对图像的优化必不可少。 图片格式 图片格式有许多,不同的格式在是否支持透明,是否支持动画,压缩方式,兼容性等方面存在差别。先放一张来自谷歌开发者文档的图: 矢量图像(待查什么是矢量图像) 概念:也称为面向对象的图像或绘图图像,在数学上定义为一系 阅读全文
posted @ 2019-11-26 21:27 Syw_文 阅读(865) 评论(0) 推荐(0) 编辑
摘要:一、静态资源 包括:html,CSS,js以外,还包括各种 图片资源、音频资源、字体资源等,由于有限的带宽和延迟影响,所以需要对资源做一些优化。 注:都可对如上的静态资源进行压缩,且加缓存来实现 二、资源压缩 概念:减小资源大小的过程叫做资源压缩。针对不同类型的资源有不同的压缩技术。本文主要总结文本 阅读全文
posted @ 2019-11-26 21:03 Syw_文 阅读(1424) 评论(0) 推荐(0) 编辑
摘要:提到前端性能优化时,我们首先会联想到文件的合并、压缩,文件缓存和开启服务器端的 gzip 压缩等,这使得页面加载更快,用户可以尽快使用我们的 Web 应用来达到他们的目标。 资源预加载:是另一个性能优化技术,我们可以使用该技术来预先告知浏览器某些资源可能在将来会被使用到。 引用 Patrick Ha 阅读全文
posted @ 2019-11-26 20:16 Syw_文 阅读(967) 评论(0) 推荐(0) 编辑
摘要:提到前段性能优化,不可避免的都会想到如下的解决方案: (1)减少HTTP请求(合并css、js,雪碧图/base64图片、CSS Sprites, JS、CSS源码压缩、图片大小控制合适;网页Gzip,CDN托管,data缓存 ,图片服务器。) (2)压缩(css、js、图片等前端资源皆可压缩,通常 阅读全文
posted @ 2019-11-26 18:55 Syw_文 阅读(191) 评论(0) 推荐(0) 编辑
摘要:CSS会阻塞渲染树的构建,不阻塞DOM构建,但是在CSSOM构建完成之前,页面不会开始渲染(一片空白),CSSOM构建完成后,页面将会显示出内容。 DOM(Document Object Model)是一个与语言无关的、用来操作XMl和HTML文档的应用程序接口。在浏览器环境下,我们是通过Javas 阅读全文
posted @ 2019-11-26 18:51 Syw_文 阅读(869) 评论(0) 推荐(0) 编辑