百度360必应搜狗淘宝本站头条
分布式事务框架grpc框架shiro框架java日志框架框架图
当前位置：网站首页 > 技术文章 > 正文

为何前端 4 大主流框架都选择拥抱 happy-dom?

ccwgpt 2024-10-23 09:17 43 浏览 0 评论

大家好，很高兴又见面了，我是"高级前端?进阶?"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发，您的支持是我不断创作的动力。

1.什么是 happy-dom

A JavaScript implementation of a web browser without its graphical user interface.

happy-dom 是没有图形用户界面的 Web 浏览器的 JavaScript 实现，包括来自 WHATWG DOM 和 HTML 的许多 Web 标准。

happy-dom 的典型特性包括：

  • 自定义元素（Web 组件）
  • 声明式 Shadow DOM
  • 支持 Mutation Observer
  • 支持 Tree Walker
  • 支持 Fetch API
  • 支持 File Reader、CSS Style Declaration、Form Data 等
  • 支持 Selection、Form Validity State、IFrames 等
  • 支持 Cookies、Clipboard 等等

happy-dom 的目标是模拟足够多的 Web 浏览器，以用于测试、抓取网站和服务器端渲染。happy-dom 非常注重性能，可以用作 JSDOM 的替代品。而且在性能上，happy-dom 几乎完爆了 JSDOM，比如对常见测试的几个维度的衡量数据：

  • Import / Require
  • 解析 HTML(Parse HTML)
  • 序列化 HTML(Serialize HTML)
  • 渲染自定义元素 (Render custom element)
  • 运行 querySelectorAll('tagname')
  • 运行 querySelectorAll(':nth-child(2n+1)')

下面是两者的对比数据图：

目前 happy-dom 已经被前端大多数明星框架采用，包括：Vitest、Bun、Jest、Testing Library、Google LitElement、Vue、React、Svelte、Angular 等等。

happy-dom 在 Github 通过 MIT 协议开源，有超过 2.8k 的 star、22.2k 的 fork、代码贡献者 100+、妥妥的前端优质开源项目。

2.如何使用 happy-dom

2.1 模拟 Window 类

Happy DOM 可以用作模拟浏览器，也可以直接使用 Window 类来快速设置 DOM，下面是如何使用 Window 类的简单示例：

import {Window} from 'happy-dom';
// 打开页面
const window = new Window({url: 'https://localhost:8080'});
const document = window.document;
document.body.innerHTML = '<div class="container"></div>';
const container = document.querySelector('.container');
const button = document.createElement('button');
container.appendChild(button);
// 输出内容为 "<div class="container"><button></button></div>"
console.log(document.body.innerHTML);
// 中止任何正在进行的操作（例如 fetch 和计时器）
await window.happyDOM.abort();
// 关闭页面 window
window.close();

从以上代码可以看出，常见的 DOM 操作方法和浏览器几乎完全一致。

2.2 模拟 Browser 类

下面是如何使用 Browser 类的两个简单示例：

import {Browser} from "happy-dom";

const browser = new Browser();
const page = browser.newPage();
page.url = 'https://example.com';
page.content = '<html><body>Hello world!</body></html>';
// 输出值 "Hello world!"
console.log(page.mainFrame.document.body.textContent);
await browser.close();

以上示例通过首先手动创建一个 Browser 实例，然后动态设置页面 URL 的方式来模拟页面打开和关闭流程。下面是另外一个示例，其通过一些设置更加精确的控制了 Browser 实例的一些行为：

import {Browser, BrowserErrorCaptureEnum} from 'happy-dom';
const browser = new Browser({settings: { errorCapture: BrowserErrorCaptureEnum.processLevel} });
const page = browser.newPage();
// 打开页面
await page.goto('https://github.com/capricorn86');
// 点击链接
page.mainFrame.document.querySelector('a[href*="capricorn86/happy-dom"]').click();
// 等待页面上的所有操作完成（fetch、计时器等）
await page.waitUntilComplete();
// 输出内容为 "GitHub - capricorn86/happy-dom: Happy DOM..."
console.log(page.mainFrame.document.title);
// 中止所有正在进行的操作并关闭浏览器
await browser.close();

参考资料

https://github.com/capricorn86/happy-dom

https://github.com/capricorn86/happy-dom/wiki/Getting-started

https://www.freecodecamp.org/news/dom-manipulation-best-practices/

https://www.drewis.cool/story/mocking-the-dom-is-a-mistake-post

相关推荐

腾讯开源框架TarsCpp-rpc设计分析-server(二)

2Tars协议2.1是什么借用官方说法：TARS编码协议是一种数据编解码规则，它将整形、枚举值、字符串、序列、字典、自定义结构体等数据类型按照一定的规则编码到二进制数据流中。对端接收到二进制数据流...

微服务调用为什么用RPC框架，http不更简单吗?

简单点，HTTP是协议，RPC是概念！实现RPC可以基于HTTP协议（Feign），TCP协议(Netty)，RMI协议（Soap），WebService（XML—RPC）框架。传输过程中，也因为序列...

go-zero:开箱即用的微服务框架（gin框架微服务）

go-zero是一个集成了各种工程实践的Web和rpc框架，它的弹性设计保障了大并发服务端的稳定性，并且已经经过了充分的实战检验。go-zero在设计时遵循了“工具大于约定和文档”的理...

SOFARPC :高性能、高扩展性、生产级的 Java RPC 框架

#暑期创作大赛#SOFARPC是一个高性能、高扩展性、生产级的JavaRPC框架。在蚂蚁金服，SOFARPC已经使用了十多年，已经发展了五代。SOFARPC致力于简化应用程序之间的RPC...

自研分布式高性能RPC框架及服务注册中心ApiRegistry实践笔记

痛点1.bsf底层依赖springcloud,影响bsf更新springboot新版本和整体最新技术版本升级。2.eureka已经闭源，且框架设计较重，同时引入eureka会自行引入较多sprin...

Rust语言从入门到精通系列 - Tonic RPC框架入门实战

Rust语言是一种系统级语言，被誉为“没有丧失性能的安全语言”。Rust语言的优势在于其内存安全机制，在编译时就能保证程序的内存安全。Tonic模块是Rust语言的一个RPC（RemoteProce...

腾讯开源框架TarsCpp-rpc设计分析-client(一)

前言Tars是腾讯开源的微服务平台，包含了一个高性能的rpc框架和服务治理平台，TarsCpp是其C++版本。对于以C++为主要开发语言，同时还想深入了解rpc和微服务框架具体实现的同学来说，Tars...

设计了一款TPS百万级别的分布式、高性能、可扩展的RPC框架

为啥要开发RPC框架事情是这样的，在开发这个RPC框架之前，我花费了不少时间算是对Dubbo框架彻底研究透彻了。冰河在撸透了Dubbo2.x和Dubbo3.x的源码之后，本来想给大家写一个Dubbo源...

rpc框架使用教程，超级稳定好用，大厂都在使用

rpc是什么远程调用协议如何使用导入依赖<dependency><groupId>org.apache.dubbo</groupId><art...

Layui 框架实战:动态加载 Select 与二级联动全解析

在现代Web开发中，下拉选择框（Select）是用户输入数据时不可或缺的组件。很多时候，我们需要的选项并非静态写死在HTML中，而是需要根据业务逻辑从后端动态获取。更有甚者，我们可能需要实现“...

15个能为你节省数百小时的前端设计神器，从UI库到文档生成

无论你是刚开始开发之旅的新手，还是疲于应付生产期限的资深程序员，有一个真理始终不变：正确的工具能彻底改变你的工作流程。多年来，我测试了数百个开发工具——有些实用，大多数平庸。但有一批免费网站经受住了时...

Layui与WinForm通用权限管理系统全解析

嘿，小伙伴们，今天咱们来聊聊Layui和WinForm这两个框架在通用权限管理系统中的应用。别担心，我会尽量用简单易懂的语言来讲解，保证让大家都能跟上节奏！首先说说Layui。Layui是一个前端UI...

纯Python构建精美UI!MonsterUI让前端开发效率飙升

“无需CSS知识，告别类名记忆，11行代码实现专业级卡片组件”在传统Web开发中，构建美观界面需要同时掌握HTML、CSS、JavaScript三剑客，开发者不得不在多种语言间频繁切换。即使使用Boo...

WebTUI:将终端用户界面(TUI)之美带到浏览器的CSS库

在当今Web技术飞速发展的时代，界面设计愈发复杂多样。然而，随着现代化工具的广泛使用，一些开发者开始回归极简风格，追求一种简洁而富有韵味的设计。WebTUI正是这样一款CSS库，它将经典的终...

人教版二年级下册生字描红汇总(拼音+笔顺+描红)，可打印!

可定制内容，评论区留言。本次整理的为人教版二年级下册所有生字，共计300个；写字是小学阶段一项重要的基本功训练，把汉字写得正确、工整、美观，可以提高运用汉字这一交际工具的准确性和效率。对小学生进行写字...

取消回复欢迎 你 发表评论:

一周热门
最近发表
标签列表