我在开发一个终端仿真器,但是前端的性能问题一直困扰着我。大家都知道终端窗口中每个字符都可以有不同的样式(颜色,背景,粗体,下划线等)。所以我的想法是在视窗中为每个字符使用元素,并在必要时应用内联样式,以获得所需的控制程度。问题是在刷新时性能非常糟糕。Chrome在我的电脑上每秒处理约120次,Firefox处理约80次,而Internet Explorer只有6次。因此,在尝试了HTML后,我尝试使用画布,但画布上的文本速度非常慢。我在网上读到缓存有帮助,因此我为每个字符实现了一个缓存,并可以使用某些组合操作将颜色应用于位图字体。但这比DOM慢得多。然后我回到DOM并尝试使用document.createDocumentFragment,但它的性能略逊于标准方法。现在我不知道从哪里开始优化。我可以跟踪每个字符的更改情况,但当终端输入很多时仍会遇到这种缓慢的情况。
我对DOM还不熟悉,可能会做错什么...
非常感谢任何帮助!
这里有一个带有几个测试用例的jsperf:
<span>
标记。例如,如果样式从不更改,则一个<span>
标记就足够了。如果样式更改一次,然后恢复到原始样式,则需要三个<span>
标签。 - Tyler Crompton