0

I have to create a log-viewer for the browser and these log-files can be very big (200MB and more). Because syntax highlighting is used, they need to be rendered very fast. Are there new technologies (webgl or canvas) that can be used to speed the rendering process up? Are there tricks to optimize text rendering?

The connection is not the bottle neck, because the files are transfaired through a high speed intranet.

NaN
  • 3,501
  • 8
  • 44
  • 77
  • What do the log files contain? If it’s just basically plain text (with significant line breaks) where some words are to be highlighted, then putting that inside `pre` markup and using shortest possible syntax for highlighting, like `...`, should be almost as fast as rendering plain text. If, on the other hand, it’s a `table`, then `table-layout: fixed` is a must, and you need to consider the columns widths carefully. – Jukka K. Korpela Aug 06 '13 at 08:21

1 Answers1

1

Canvas is absolutely not the solution. Rendering text on canvas is very slow in general.

The best solution is most likely to dynamically markup (syntax highlight) only the text visible on the screen (plus about a page's worth in either direction). Doing that will need a custom JS solution, but it should be totally doable.

This seems to be what Google Chrome does with the syntax highlighting in their developer tools for very long JS/CSS/HTML files. Portions of those files are not marked up until the viewer scrolls to them.

Simon Sarris
  • 62,212
  • 13
  • 141
  • 171