happy-dom は今でも高速なのか

happy-dom は jsdom に比べて高速、というのを昔聞いたことがあった
あれから happy-dom は機能追加されているし、jsdom も高速化している可能性があるので、現在でも高速なのか調べてみた
npm が yarn の登場によって高速化したように jsdom も高速化しているかもしれない

odan

https://github.com/capricorn86/happy-dom/wiki/#performance によるとどうやらこのリポジトリが使われたらしい

happy-dom: 9.20.3
jsdom: 22.0.0

実行してみたところエラーが発生した

HappyDOM -> Render custom element': 16.069916009902954ms
DOMException: Failed to perform request to "https://github.githubassets.com/assets/frameworks-639c0d972c797d73248a7cb7d5eb6465.css". Status code: 404
    at ResourceFetch.fetch (/Users/odan/source/github.com/capricorn86/happy-dom-performance-test/node_modules/happy-dom/lib/fetch/ResourceFetch.js:22:19)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async HTMLLinkElementUtility.loadExternalStylesheet (/Users/odan/source/github.com/capricorn86/happy-dom-performance-test/node_modules/happy-dom/lib/nodes/html-link-element/HTMLLinkElementUtility.js:34:24)

odan

CSS ファイルへのリクエストで404になっているので、一時的にコメントアウトする

diff --git a/lib/data/HTMLPage.js b/lib/data/HTMLPage.js
index 8686484..6bec1d2 100644
--- a/lib/data/HTMLPage.js
+++ b/lib/data/HTMLPage.js
@@ -13,9 +13,9 @@ module.exports = `
 
 
 
-  <link crossorigin="anonymous" media="all" integrity="sha512-Y5wNlyx5fXMkiny31etkZZI6h/vQA2f8Oqn61SkO4FGvcpgku+bqaHF2DvNehalEzRgTcNuX03cwv8sYzvwRTw==" rel="stylesheet" href="https://github.githubassets.com/assets/frameworks-639c0d972c797d73248a7cb7d5eb6465.css" />
+  <!-- <link crossorigin="anonymous" media="all" integrity="sha512-Y5wNlyx5fXMkiny31etkZZI6h/vQA2f8Oqn61SkO4FGvcpgku+bqaHF2DvNehalEzRgTcNuX03cwv8sYzvwRTw==" rel="stylesheet" href="https://github.githubassets.com/assets/frameworks-639c0d972c797d73248a7cb7d5eb6465.css" /> -->
   
-    <link crossorigin="anonymous" media="all" integrity="sha512-o9e5w2B8rwFvsC/mi5Nqnmxkh88DHBOz8CcMU3cWhWcVf3rkCEzigIGZoOhdRyjp8seSeJmr2pV+qENmeb6Clg==" rel="stylesheet" href="https://github.githubassets.com/assets/github-a3d7b9c3607caf016fb02fe68b936a9e.css" />
+  <!--  <link crossorigin="anonymous" media="all" integrity="sha512-o9e5w2B8rwFvsC/mi5Nqnmxkh88DHBOz8CcMU3cWhWcVf3rkCEzigIGZoOhdRyjp8seSeJmr2pV+qENmeb6Clg==" rel="stylesheet" href="https://github.githubassets.com/assets/github-a3d7b9c3607caf016fb02fe68b936a9e.css" /> -->

どうやらテストデータは https://github.com/capricorn86/happy-dom の HTML ファイルらしい

odan

実行結果
happy-dom: 9.20.3
jsdom: 22.0.0

JSDOM -> Import: 215.7141250371933ms
JSDOM -> Parse HTML: 118.52224999666214ms
JSDOM -> Serialize HTML: 24.78424996137619ms
JSDOM -> querySelectorAll('li') found 78 elements: 4.349458992481232ms
JSDOM -> querySelectorAll('.flex-shrink-0') found 42 elements: 4.530708968639374ms
JSDOM -> querySelectorAll('[aria-label]') found 80 elements: 3.1072499752044678ms
JSDOM -> querySelectorAll('[class~="flex-shrink-0"]') found 42 elements: 3.2970840334892273ms
JSDOM -> querySelectorAll(':nth-child(2n+1)') found 926 elements: 8.437875032424927ms
JSDOM -> Render custom element': 109.77562499046326ms
HappyDOM -> Import: 78.07516700029373ms
HappyDOM -> Parse HTML: 26.802166998386383ms
HappyDOM -> Serialize HTML: 5.665959000587463ms
HappyDOM -> querySelectorAll('li') found 78 elements: 0.9698750376701355ms
HappyDOM -> querySelectorAll('.flex-shrink-0') found 42 elements: 3.3958749771118164ms
HappyDOM -> querySelectorAll('[aria-label]') found 80 elements: 1.0347089767456055ms
HappyDOM -> querySelectorAll('[class~="flex-shrink-0"]') found 42 elements: 0.7923749685287476ms
HappyDOM -> querySelectorAll(':nth-child(2n+1)') found 926 elements: 1.8147079944610596ms
HappyDOM -> Render custom element': 15.433000028133392ms

odan

アプデ後の実行結果
happy-dom: 14.5.1
jsdom: 24.0.0

JSDOM -> Import: 163.9236660003662ms
JSDOM -> Parse HTML: 124.09987497329712ms
JSDOM -> Serialize HTML: 26.423707962036133ms
JSDOM -> querySelectorAll('li') found 78 elements: 4.750792026519775ms
JSDOM -> querySelectorAll('.flex-shrink-0') found 42 elements: 6.024749994277954ms
JSDOM -> querySelectorAll('[aria-label]') found 80 elements: 2.918166995048523ms
JSDOM -> querySelectorAll('[class~="flex-shrink-0"]') found 42 elements: 3.126915991306305ms
JSDOM -> querySelectorAll(':nth-child(2n+1)') found 926 elements: 11.791916012763977ms
JSDOM -> Render custom element': 117.92366600036621ms
HappyDOM -> Import: 69.30845898389816ms
HappyDOM -> Parse HTML: 38.51700001955032ms
HappyDOM -> Serialize HTML: 3.443875014781952ms
HappyDOM -> querySelectorAll('li') found 78 elements: 1.531125009059906ms
HappyDOM -> querySelectorAll('.flex-shrink-0') found 42 elements: 1.8909170031547546ms
HappyDOM -> querySelectorAll('[aria-label]') found 80 elements: 1.6153330206871033ms
HappyDOM -> querySelectorAll('[class~="flex-shrink-0"]') found 42 elements: 1.3087080121040344ms
HappyDOM -> querySelectorAll(':nth-child(2n+1)') found 926 elements: 2.4986250400543213ms
HappyDOM -> Render custom element': 27.86420899629593ms

少し遅くなってるけどたしかに happy-dom のほうが速そう

odan

実行環境

$ npx envinfo --system --binaries

  System:
    OS: macOS 14.1
    CPU: (10) arm64 Apple M1 Pro
    Memory: 271.44 MB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.12.1 - ~/.local/share/asdf/installs/nodejs/18.12.1/bin/node
    Yarn: 1.22.19 - ~/.local/share/asdf/installs/nodejs/18.12.1/bin/yarn
    npm: 8.19.2 - ~/.local/share/asdf/plugins/nodejs/shims/npm
    pnpm: 8.10.5 - ~/.local/share/asdf/installs/nodejs/18.12.1/bin/pnpm
    bun: 1.1.1 - /opt/homebrew/bin/bun

odan

happy-dom benchmark で調べても他の人のパフォーマンス比較が見つからないのはちょっと気になる

happy-dom の中の人が作成したベンチマークなので注意して結果を受け取る必要がある

このスクラップは2024/04/06にクローズされました