Happy DOMとは
Happy DOMはグラフィカルユーザーインターフェイスのないWebブラウザーのJavaScript実装です。
テストやスクレイピングなどに役立つWebブラウザーのエミュレートに利用できます。
JSDOMという同様のライブラリもありますが、Happy DOMのほうが数倍処理が速いため、最近はHappy DOMを使用する人が増えています。
| Operation | JSDOM | Happy DOM |
|---|---|---|
| Import / Require | 333 ms | 45 ms |
| Parse HTML | 256 ms | 26 ms |
| Serialize HTML | 65 ms | 8 ms |
| Render custom element | 214 ms | 19 ms |
| querySelectorAll('tagname') | 4.9 ms | 0.7 ms |
| querySelectorAll('.class') | 6.4 ms | 3.7 ms |
| querySelectorAll('[attribute]') | 4.0 ms | 1.7 ms |
| querySelectorAll('[class~="name"]') | 5.5 ms | 2.9 ms |
| querySelectorAll(':nth-child(2n+1)') | 10.4 ms | 3.8 ms |
Happy DOMの使い方
インストールは以下のコマンドで実行します。
npm i -D happy-dom
コードは以下の例のようになります。
ファイル名は仮でhappy.mjsにしました。
import { Window } from 'happy-dom'
const window = new Window()
const document = window.document
const body = document.body
const title = document.createElement('title')
title.textContent = 'Sample'
document.head.appendChild(title)
body.innerHTML = '<h1>Hello</h1>'
const h1 = body.querySelector('h1')
console.log(h1.textContent) // Hello
console.log(document.documentElement.outerHTML)
// <html><head><title>Sample</title></head><body><h1>Hello</h1></body></html>
あとはnodeコマンドで実行
node happy.mjs
JSDOMからの移行は簡単にできる
JSDOMの場合は以下のようにnew JSDOM()の中にwindowがあるので、これらの部分を書き換えるだけでJSDOMからHappy DOMに移行できます。
import { JSDOM } from 'jsdom'
const jsdom = new JSDOM()
const window = jsdom.window
特に理由がなければJSDOMよりHappy DOMを使用することをオススメします。
