性能工具之常见压力工具是否能模拟前端

本文涉及的产品
云解析 DNS,旗舰版 1个月
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
性能测试 PTS,5000VUM额度
简介: 【6月更文挑战7天】性能工具之常见压力工具是否能模拟前端

一、前言

前几天在整理前端的性能分析时,觉得有个问题点似乎从来没人说起过。

就是压力测试的工具,是否可以模拟出前端的完整的请求链?比如说,loadrunner/Jmeter 等压力工具。

我们都知道,现在的很多性能测试都从接口开始做了,而前端的性能成了一个独立的一部分。

在早期的性能测试工具中,一直秉承的理念是“模拟真实用户的行为”。

而纵观现在的性能测试策略和方法,离真实的用户越来越远的感觉。

所以现在提出了另一个思路:全链路性能测试。而这一观念的改变中基于架构的转变来的。但是从实际的操作上来说,性能测试策略、场景等一些本质的东西并没有发生变化。

鉴于一些项目的经验,以后我会从全链路的思路上来做更多的整理和分析。

今天我只想说一个点就是压力工具有哪些前端的动作没有模拟得到?

二、浏览器的渲染原理

我们先来看一下浏览器的渲染过程:
image.png

是 webkit 内核的工作过程。从 HTML 解析到 Display 的整个过程中,大家可以清晰的看到前端在干什么事情。显然,这些在浏览器端做的事情压力工具都是不可能做得到的。比如说:HTML解析、DOMtree 创建、CSS 解析、渲染树、绘制等等,这些压力工具都是不会干的。

那压力工具能干什么呢?

我们换个姿势来看。
image.png

从在浏览器中输入 URL 到开始加载这个过程,浏览器做的动作,压力工具是都不会模拟到的。
但是从 redirect 开始、AppCache、DNS 解析、TCP 创建、请求的发送、响应的接收,这个过程中压力工具不可避免要做的事情。
接下来的本地的这些处理的动作是压力工具都不干的了。
这下似乎明白了吧。

那我们再换个姿势看一下:
image.png
一个 URL 请求发送了之后,有更多的细分资源需要一一处理。而这些资源的处理就会一遍遍在走着请求的发送、响应的接收这个循环。因为 AppCache、DNS 解析、TCP 创建这些部分是可以复用的(这句话有歧义,大家自行揣摩)。

另外,在 RFC2616 中的 8.1.1 节明确说明了限制浏览器的并发。大概翻译如下,有兴趣的去读下原文:

  1. 少开 TCP 链接,可以节省路由和主机(客户端、服务端、代理、网关、通道、缓存)的 CPU 资源和内存资源。
  2. HTTP 请求和响应可以通过 Pipelining 在一个连接上发送。Pipelining 允许客户端发出多个请求而不用等待每个返回,一个 TCP 连接更为高效。
  3. 通过减少打开的 TCP 来减少网络拥堵,也让 TCP 有充足的时间解决拥堵。
  4. 后续请求不用在 TCP 三次握手上再花时间,延迟降低。
  5. 因为报告错误时,没有关闭 TCP 连接的惩罚,而使 HTTP 可以升级得更为优雅(原文使用 gracefully)。
  6. 如果不限制的话,一个客户端发出很多个链接到服务器,服务器的资源可以同时服务的客户端就会减少。

我们常见的浏览器有如下的并发限制。
image.png
在压力工具中,并没有参数来控制这个并发值,如果是在同一个线程中,就是并行着执行下去。

我们再细分一下一个请求的具体的动作。
image.png

每个请求,都在这样的循环中消耗着时间。进队列-等-阻塞-发请求-等TTFB-下载
而这个过程是压力工具可以模拟得到的。
所以,如果要分析前端的性能的话,我们最好可以区分开哪些时间消耗在了前端,哪些时间消耗在了后端。
这样才可以把性能时间拆分更细化。

三、总结

目前的压力工具大部分是针对服务端,即模拟「网络 API 请求」,而前端程序基本上是由一系列的「用户交互事件」所驱动,其业务状态是一颗 DOM 树。

通常来讲,前端性能关注的是浏览器端的页面渲染时间、资源加载顺序、请求数量、前端缓存使用情况、资源压缩等内容,希望借此找到页面加载过程中比较耗时的操作和资源,然后进行有针对性的优化,最终达到优化终端用户在浏览器端使用体验的目的。

目前获取和衡量一个页面的性能,主要可以通过以下几个方面:Performance Timing API、Prpfile 工具、页面埋点计时、资源加载时序图分析;

  • Performance Timing API 是一个支持 Internet Explorer 9 以上版本及 WebKit;
    内核浏览器中用于记录页面加载和解析过程中关键时间点的机制,它可以详细记录每个页面资源从开始加载到解析完成这一过程中具体操作发生的时间点,这样根据开始和结束时间戳就可以计算出这个过程所花的时间了;
  • Profile 是 Chrome 和 Firefox 等标准浏览器提供的一种用于测试页面脚本运行时系统内存和 CPU 资源占用情况的 API;
  • 通过脚本埋点计时的方式来统计没部分代码的运行时间;
  • 借助浏览器或其他工具的资源加载时序图来帮助分析页面资源加载过程中的性能问题。这种方法可以粗粒度地宏观分析浏览器的所有资源文件请求耗时和文件加载顺序情况。
目录
相关文章
|
2月前
|
前端开发
Github项目分享——免费的画图工具drow,最新前端面试题整理
Github项目分享——免费的画图工具drow,最新前端面试题整理
|
3天前
|
前端开发 JavaScript 开发工具
前端开发最佳实践与工具推荐
【7月更文挑战第22天】前端开发是一个充满挑战和机遇的领域,掌握最佳实践和高效工具是提升开发效率、保证项目质量的关键。通过遵循版本控制、构建和部署、编写高质量代码、性能优化和安全性等最佳实践,并结合代码编辑工具、版本控制工具、包管理工具、构建工具、调试工具等实用工具,我们可以更好地完成前端开发任务,提升个人和团队的竞争力。
|
22天前
|
前端开发 JavaScript
前端模拟接口工具推荐——Apifox(mock数据)【图解教程】
前端模拟接口工具推荐——Apifox(mock数据)【图解教程】
158 1
|
24天前
|
Web App开发 缓存 前端开发
前端性能优化技巧与工具
【6月更文挑战第30天】前端性能优化旨在提升Web应用速度和响应性,关乎用户体验、转化率及SEO。关键技巧包括减少HTTP请求、压缩资源、利用缓存、异步加载和优化DOM操作。工具如Lighthouse、PageSpeed Insights、Webpack Bundle Analyzer及Chrome DevTools提供性能分析和优化建议。优化是持续的过程,适应复杂Web需求。
|
29天前
|
移动开发 前端开发 JavaScript
前端学习加速器:高效软件工具与实用设置攻略
前端学习加速器:高效软件工具与实用设置攻略
前端学习加速器:高效软件工具与实用设置攻略
|
29天前
|
存储 JavaScript 前端开发
vue 快速入门+vite前端构建工具
vue 快速入门+vite前端构建工具
35 0
|
2月前
|
资源调度 JavaScript 前端开发
Vite:下一代前端构建工具的快速上手
Vite 是由 Vue.js 的作者尤雨溪开发的下一代前端构建工具,它以其快速的冷启动、按需编译和热更新能力而受到广泛关注。Vite 通过利用浏览器原生的 ES 模块导入功能,提供了几乎即时的开发环境启动速度和高度优化的开发体验。
55 2
|
2月前
|
Web App开发 缓存 前端开发
如何优化前端网页加载速度:最佳实践和工具推荐
本文探讨了如何通过采用最佳实践和利用先进的工具来优化前端网页加载速度。从压缩资源到使用CDN,从减少HTTP请求到利用缓存策略,我们将介绍一系列提高网页性能的技术手段。同时,我们还将推荐一些广受好评的工具,帮助开发者更轻松地实施这些优化策略。
|
27天前
|
前端开发 JavaScript 数据库
如何实现前后端分离-----前端笔记
如何实现前后端分离-----前端笔记
|
27天前
|
前端开发 安全 NoSQL
技术笔记:Security前端页面配置
技术笔记:Security前端页面配置