我的编程空间,编程开发者的网络收藏夹
学习永远不晚

EventLoop如何测试Node或页面的性能

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号立即预约

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

EventLoop如何测试Node或页面的性能

这篇文章主要介绍“EventLoop如何测试Node或页面的性能”,在日常操作中,相信很多人在EventLoop如何测试Node或页面的性能问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”EventLoop如何测试Node或页面的性能”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!

Event Loop

Event Loop 机制大家应该都有了解。我先重复总结一下。

Node.js 和 Javascript 的 Event Loop 不太一样,直观上是多了 setImmediateprocess.nextTick 两个 API。其次是由于运行时不一样,Html Standrad 里面会考虑多页面、DOM操作等不同来源会有不同的 task queue 。而 Node.js Event Loop 中需要考虑的没这么多。

按照我的理解,双方在概念上是一致的,可以如此概括(或者看这里):

  • task queue 任务队列。一些事件等会被定义为任务,很多时候会被称为 MacroTask(宏任务)与 MicroTask 进行对应。每次会获取队头的 task 进行执行。

  • microtask queue 微任务队列。会有一个微任务队列,一个 Task 内一般会执行清空微任务队列。

  • 如此往复。

性能测量

在上面的了解之后,有一个简单的对性能进行测量的方法:每秒内完成了多少次 Event Loop 循环,或者说执行了多少个 MacroTask,这样我们大致就能知道代码中同步的代码的执行情况。

测试函数

class MacroTaskChecker {    constructor(macroTaskDispatcher, count = 1000, cb = () => { }) {        this.macroTaskDispatcher = macroTaskDispatcher        this.COUNT = count        this.cb = cb    }    start(cb) {        this.cb = cb || this.cb        this.stop = false        const scope = () => {            let count = this.COUNT            const startTime = performance.now()            const fn = () => {                count--                if (count > 0) this.macroTaskDispatcher(fn)                else {                    const endTime = performance.now()                    // 执行 COUNT 次宏任务之后 计算平均每秒执行了多少个                    this.cb({                        avg: this.COUNT / (endTime - startTime) * 1000,                        timestamp: endTime                    })                    !this.stop && this.macroTaskDispatcher(scope)                }            }            this.macroTaskDispatcher(fn)        }        scope()    }    stop() {        this.stop = true    }}

之后,执行一些死循环去测试是否能检测到密集同步代码执行。

function meaninglessRun(time) {    console.time('meaninglessRun')    for (let i = time; i--; i > 0) {        // do nothing    }    console.timeEnd('meaninglessRun')}setTimeout(() => {    meaninglessRun(1000 * 1000 * 1000)}, 1000 * 5)setTimeout(() => {    checker.stop()    console.log('stop')}, 1000 * 20)

setTimeout

const checker = new MacroTaskChecker(setTimeout, 100)checker.start(v => console.log(`time: ${v.timestamp.toFixed(2)} avg: ${v.avg.toFixed(2)}`))

从输出中能明显看到同步阻塞的时候avg是下降的。不过在 browser 和 node.js 上测试两边会有明显差距。

// node.jstime: 4837.47 avg: 825.14time: 4958.18 avg: 829.83meaninglessRun: 918.626mstime: 6001.69 avg: 95.95time: 6125.72 avg: 817.18time: 6285.07 avg: 635.16// browsertime: 153529.90 avg: 205.21time: 154023.40 avg: 204.46meaninglessRun: 924.463mstime: 155424.00 avg: 71.62time: 155908.80 avg: 208.29time: 156383.70 avg: 213.04

虽然达成我们的目的,但是使用 setTimeout 是不完全能准确记录下每一个任务的。根据 HTML Standrad 和 MDN 的说法,setTimeout 最少的会等待4ms。从这个角度看 browser avg * 4ms \approx≈ 1000ms。而 node.js 应该是没有遵循 browser 那边的约定,但是也没有执行到记录每一个loop。

setImmediate

如果使用 node.js 的 setImmediate

const checker = new MacroTaskChecker(setImmediate, 1000 * 10)

可以看到执行次数大概高出  Node.js setTimeout 一个量级:

time: 4839.71 avg: 59271.54time: 5032.99 avg: 51778.84meaninglessRun: 922.182mstime: 6122.44 avg: 9179.95time: 6338.32 avg: 46351.38time: 6536.66 avg: 50459.77

按照 Node.js 文档中的解释,setImmediate 会在每一个 loop (phase) 的 check 阶段执行。使用 setImmediate 应该是能准确记录每一次 Loop 的。我这台机器大概是 40000 到 60000 之间的循环次数。

window.postMessage

在 browser 上由于没有 setImmediate 我们可以按照 MDN 上的指引使用 window.postMessage 实现一个。

如果想在浏览器中实现 0ms 延时的定时器,你可以参考这里所说的 window.postMessage()

const fns = []window.addEventListener("message", () => {    const currentFns = [...fns]    fns.length = 0    currentFns.forEach(fn => fn())}, true);function messageChannelMacroTaskDispatcher(fn) {    fns.push(fn)    window.postMessage(1)}

可以看到和 node.js setImmediate 量级是一致的。

time: 78769.70 avg: 51759.83time: 78975.60 avg: 48614.49meaninglessRun: 921.143 mstime: 80111.50 avg: 8805.14time: 80327.00 avg: 46425.26time: 80539.10 avg: 47169.81

MessageChannel

browser

理论上 browser 使用 MessageChannel 应该也是可以的,还避免了无效的消息被其他 window.addEventListener("message", handler) 接收:

const { port1, port2 } = new MessageChannel();const fns = []port1.onmessage = () => {    const currentFns = [...fns]    fns.length = 0    currentFns.forEach(fn => fn())};function messageChannelMacroTaskDispatcher(fn) {    fns.push(fn)    port2.postMessage(1)}

不是很懂为啥会比 window.postMessage 频繁一点,同时启动两个 checker 的话可以看到 log 是成对出现的,也就是说一个loop内大家都只执行了一次。我猜测是 window.postMessage 的实现方式消耗会大一些。

time: 54974.80 avg: 68823.12time: 55121.00 avg: 68493.15meaninglessRun: 925.160888671875 mstime: 56204.60 avg: 9229.35time: 56353.00 avg: 67430.88time: 56503.10 avg: 66666.67// 一起执行 wp=window.postMessage mc=MessageChannelwp time: 43307.90 avg: 25169.90mc time: 43678.40 avg: 27005.13wp time: 43678.60 avg: 26990.55mc time: 44065.80 avg: 25833.12wp time: 44066.00 avg: 25819.78mc time: 44458.40 avg: 25484.20

node

在 node.js 上也有 MessageChannel ,是否也可以用来测量loop次数呢?

mc time: 460.99 avg: 353930.80mc time: 489.52 avg: 355088.11mc time: 520.30 avg: 326384.64mc time: 551.78 avg: 320427.29

量级很不正常。理论上不应该超过 setImmediate 的。如果同时启动 setImmediatesetTimeout 的 checker:

...(messagechannel) time: 1231.10 avg: 355569.31(messagechannel) time: 1260.14 avg: 345825.77(setImmediate) time: 1269.95 avg: 339.27(setTimeout) time: 1270.09 avg: 339.13(messagechannel) time: 1293.80 avg: 298141.74(messagechannel) time: 1322.50 avg: 349939.04...

很明显跟不是宏任务了。我猜测 MessageChannel 在 node.js 被归入到跟 socket 等同级别了,就是超出阈值之后的任务会移动到下一个loop中。

到此,关于“EventLoop如何测试Node或页面的性能”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注编程网网站,小编会继续努力为大家带来更多实用的文章!

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

EventLoop如何测试Node或页面的性能

下载Word文档到电脑,方便收藏和打印~

下载Word文档

猜你喜欢

EventLoop如何测试Node或页面的性能

这篇文章主要介绍“EventLoop如何测试Node或页面的性能”,在日常操作中,相信很多人在EventLoop如何测试Node或页面的性能问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”EventLoop如何
2023-07-05

什么是EventLoop?怎么测试Node或页面的性能

Event Loop 机制大家应该都有了解。本文利用 EventLoop 去做一个有趣的检测node或页面性能的代码,顺便介绍了一下EventLoop,希望对大家有所帮助!
2023-05-14

JMH性能测试,试试你代码的性能如何

最近在研究一些基础组件实现的时候遇到一个问题,关于不同技术的运行性能比对该如何去实现。
JMH代码Java2024-12-02

详解如何测试gitee的性能

随着开源越来越普及,gitee作为国内领先的代码托管平台也受到了广泛的关注。一些开发者在使用gitee进行项目管理中,不可避免地会遇到一些性能问题,因此了解如何测试gitee的性能对于项目管理是很有必要的。一、性能测试的背景性能测试是在特定
2023-10-22

微服务性能是如何测试的?

微服务,通常指的是一个支持持续开发、系统可扩展、应用程序解耦和多语言编程的架构平台。

如何进行C++代码的性能测试?

如何进行C++代码的性能测试?概述:在软件开发过程中,性能测试是一项非常重要的任务。对于C++代码来说,性能测试可以帮助开发人员了解代码的执行效率,找到性能瓶颈,并对其进行优化。本文将介绍一些常用的C++代码性能测试方法和工具,帮助开发人员
如何进行C++代码的性能测试?
2023-11-02

美国服务器的性能如何测试

要测试美国服务器的性能,可以使用以下几种方法:使用在线工具:有一些在线工具可以帮助测试服务器的性能,例如Speedtest.net、Pingdom等。这些工具可以测量服务器的下载速度、上传速度、延迟等指标。使用性能测试工具:有一些专门的性能
美国服务器的性能如何测试
2024-04-03

海外服务器的性能如何测试

要测试海外服务器的性能,可以使用一些专门的工具和方法,如下所示:网络速度测试:使用网站或应用程序如Speedtest.net来测试服务器的下载速度、上传速度和延迟。这可以帮助您了解服务器在海外网络环境下的表现。Ping测试:可以使用Ping
海外服务器的性能如何测试
2024-04-16

美国服务器的性能如何测试

正文美国服务器性能测试方法选择测试工具。定义测试参数。选择测试位置。创建测试脚本。运行测试并监视指标。分析结果并优化服务器性能。定期监控。额外考虑因素:竞争对手分析。用户反馈。行业基准。
美国服务器的性能如何测试
2024-04-11

在AmazonAurora中如何实现数据库的性能测试和基准测试

AmazonAurora数据库性能测试和基准测试指南本文提供在Aurora中进行性能测试和基准测试的综合指南,涵盖方法、工具选择、指标监控、结果分析和优化措施。通过这些步骤,您可以评估Aurora的性能、识别瓶颈并实施优化,确保数据库满足应用程序需求和行业基准。
在AmazonAurora中如何实现数据库的性能测试和基准测试
2024-04-12

在AmazonAurora中如何实现数据库的性能测试和基准测试

在Amazon Aurora中实现数据库的性能测试和基准测试可以通过以下步骤进行:定义测试目标:确定要测试的性能指标,例如吞吐量、响应时间等。创建测试环境:在Amazon Aurora中创建一个测试数据库实例,并确保该实例具有与生产环境相似
在AmazonAurora中如何实现数据库的性能测试和基准测试
2024-04-09

使用R语言如何测试电脑的性能

本篇文章为大家展示了使用R语言如何测试电脑的性能,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。什么是R语言R语言是用于统计分析、绘图的语言和操作环境,属于GNU系统的一个自由、免费、源代码开放的软件
2023-06-14

编程热搜

  • Python 学习之路 - Python
    一、安装Python34Windows在Python官网(https://www.python.org/downloads/)下载安装包并安装。Python的默认安装路径是:C:\Python34配置环境变量:【右键计算机】--》【属性】-
    Python 学习之路 - Python
  • chatgpt的中文全称是什么
    chatgpt的中文全称是生成型预训练变换模型。ChatGPT是什么ChatGPT是美国人工智能研究实验室OpenAI开发的一种全新聊天机器人模型,它能够通过学习和理解人类的语言来进行对话,还能根据聊天的上下文进行互动,并协助人类完成一系列
    chatgpt的中文全称是什么
  • C/C++中extern函数使用详解
  • C/C++可变参数的使用
    可变参数的使用方法远远不止以下几种,不过在C,C++中使用可变参数时要小心,在使用printf()等函数时传入的参数个数一定不能比前面的格式化字符串中的’%’符号个数少,否则会产生访问越界,运气不好的话还会导致程序崩溃
    C/C++可变参数的使用
  • css样式文件该放在哪里
  • php中数组下标必须是连续的吗
  • Python 3 教程
    Python 3 教程 Python 的 3.0 版本,常被称为 Python 3000,或简称 Py3k。相对于 Python 的早期版本,这是一个较大的升级。为了不带入过多的累赘,Python 3.0 在设计的时候没有考虑向下兼容。 Python
    Python 3 教程
  • Python pip包管理
    一、前言    在Python中, 安装第三方模块是通过 setuptools 这个工具完成的。 Python有两个封装了 setuptools的包管理工具: easy_install  和  pip , 目前官方推荐使用 pip。    
    Python pip包管理
  • ubuntu如何重新编译内核
  • 改善Java代码之慎用java动态编译

目录