优化浏览器文本渲染答案

【问题标题】：Optimize browser text-rendering优化浏览器文本渲染
【发布时间】：2013-08-07 03:32:57
【问题描述】：

我必须为浏览器创建一个日志查看器，这些日志文件可能非常大（200MB 甚至更多）。因为使用了语法高亮，所以需要非常快速地渲染它们。是否有可用于加快渲染过程的新技术（webgl 或 canvas）？有没有优化文本渲染的技巧？

连接不是瓶颈，因为文件是通过高速内网传输的。

【问题讨论】：

日志文件包含什么？如果它只是要突出显示某些单词的基本上纯文本（带有明显的换行符），那么将其放在 pre 标记中并使用尽可能短的语法进行突出显示，例如 <b>...</b>，应该几乎与呈现纯文本一样快.另一方面，如果是table，那么table-layout: fixed 是必须的，并且您需要仔细考虑列宽。

【解决方案1】：

Canvas 绝对不是解决方案。一般来说，在画布上渲染文本非常慢。

最好的解决方案是动态标记（语法突出显示）仅屏幕上可见的文本（加上在任一方向上的页面价值）。这样做需要一个自定义的 JS 解决方案，但它应该是完全可行的。

这似乎是谷歌浏览器在他们的开发者工具中对很长的 JS/CSS/HTML 文件的语法高亮所做的。这些文件的某些部分在查看器滚动到它们之前不会被标记。

【讨论】：