2020 年，网页终端渲染器比较： hterm vs xterm.js

[codehz]

总所周知 xterm.js 是目前网页终端渲染领域的事实标准，几乎所有基于 web 的终端用的都是 xterm.js ，而相比之下 Google 出品的 hterm 就没多少人在用，那么问题就来了，hterm 和 xterm.js 到底有哪些差距 /差别呢？

于是我做了一个网页用于直观的比较两者差异，希望能对想要搞网页终端的开发者提供参考 https://codehz.github.io/hterm-vs-xterm/

• 本来是想做成 iframe 两侧放的，然后发现键盘操作和焦点似乎会有问题，所以就设计成开新页面的模式了

这个网页没有提供终端的测试后端，因此你需要自行运行服务器，幸运的是，我已经提供了一个适用于 Mac/Windows/Linux/FreeBSD 的简单服务器实现，可以通过 npm i -g ptyd 来安装。

就我本地测试的结果而言，有以下几个方面的结论

首先是大家最为关心的渲染性能，毫无疑问，xterm.js 的 webgl 渲染器遥遥领先，在特定情况下他的生成速度只有 2-8 毫秒，但是接下来的结果却是出乎了我的意料: hterm 的 DOM 渲染器在特定情况下快于 xterm.js 的 canvas 渲染器，而 xterm.js 的 dom 渲染器则是最慢的一个。

大体上可以这样排序：xterm.js(DOM) << xterm.js(canvas) ≈ hterm.js(DOM) << xterm.js(webgl)

其次是兼容性，比如 CJK 支持，这方面 xterm.js 也是遥遥领先，输入法完全木有问题，而 hterm 的 CJK 支持就仅限于显示中文，输入法还是会出现不少 bug，但是 hterm 在 chrome os 上，输入中文则完全没有问题（

然后终端特性方面，我用了 vttest，结果就是两者都没通过，而且基本上都错在类似的地方））

接下来就是字体了，hterm 在字体存在问题（比如等宽字体出现个别不等宽文字的时候）就会整行鬼畜掉，而 xterm.js 相对好一些（ DOM 渲染器），但是我这边 webgl 渲染器在部分字体上出现蜜汁偏移的问题。。

然后就是嵌入的难度，这方面我觉得 xterm.js 相对比较好，当然 hterm 也没有复杂到哪里去，特别是我给他写了一个 typescript 定义之后。当然了，如果要封装成 web component 的话，两者都要做不少 dirty hack 才能达成，这方面，hterm 更易于 hack （果然是谷歌的风格）

还有就是移动端兼容：hterm 勉强能用（需要配合特定输入法如 Hacker's Keyboard，中文似乎还行，但是一定得切回去），xterm.js 则是基本不能用，总是会变成词编辑模式导致没法正常输入，当然了，xterm.js 也在积极解决这个问题，希望以后能兼容吧。总体来说我建议还是别在移动端用网页终端，还是上原生 app 吧。

最后，为了完成这个测试，我顺便给 hterm 做了一个 esm 包装（其实就是替换 var hterm 成 export const hterm 而已（但是这样就可以直接被打包器识别了），以及也给他写了一个简单的 typescript 定义，总算是把 hterm 拉到和 xterm.js 同一水平线上了（之前 npm 上的包都是过时的，而且也不是很方便使用）