V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
GeekHub
codehz
V2EX  ›  前端开发

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

  •  
  •   codehz · 229 天前 · 1124 次点击
    这是一个创建于 229 天前的主题,其中的信息可能已经有所发展或是发生改变。

    总所周知 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 上的包都是过时的,而且也不是很方便使用)

    目前尚无回复
    关于   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   4448 人在线   最高记录 5168   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 59ms · UTC 08:47 · PVG 16:47 · LAX 01:47 · JFK 04:47
    ♥ Do have faith in what you're doing.