The Secret Behind eo2suite’s Lightning-Fast Document Loading: Optimizing the Text Rendering Engine

Hello everyone, I’m a programmer who’s been navigating the coding world for many years. Today, I want to share the story behind eo2suite’s document loading speed optimization, especially how we drastically improved the text rendering engine to achieve that “instant document opening” experience.

Traditional Rendering: The Heavy Burden of Font Loading

As we all know, eo2suite is a powerful Office suite that handles all sorts of complex documents. And within these documents, text is the most crucial element. In the earlier versions of eo2suite, our text rendering engine relied on the robust [FreeType](https://freetype.org/) library.

Here’s a simplified overview of how [FreeType](https://freetype.org/) works:

1. **Font Loading**: When a document is opened, it parses the font information used in the document and attempts to load the corresponding font files. These font files can range from a few MBs to tens of MBs, which undoubtedly adds a burden to document loading. Especially in situations with poor network conditions or limited device performance, waiting for font loading can be frustrating.
2. **Glyph Retrieval**: After the font is loaded, [FreeType](https://freetype.org/) looks up the glyph information (the actual shapes of the characters we see) in the font file, based on their Unicode values, and calculates the necessary data for rendering.
3. **Canvas Drawing**: Finally, combined with text styles and font sizes, the glyph is rendered onto the page using the `canvas.drawImage` API.

This approach has the advantage of rendering accurately, perfectly representing the font designer’s intentions. However, its disadvantage is also obvious: **Font loading is time-consuming and is a major bottleneck impacting document opening speed.**

Taking a Different Path: The Rise of HTML Canvas

To solve this issue, we started delving deeper into the capabilities of HTML5 canvas. We discovered that the `canvas.measureText` API can provide us with the text metrics (TextMetrics) of a character in a certain font, including character width, height, baseline offset, and more. **This provided us with a brand new approach to rendering text without relying on font files at all!**

Here’s our optimization strategy:

1. **Speed Mode**: We introduced “Speed Mode.” In this mode, instead of loading font files, we use the `canvas.measureText` API to obtain the text metrics of characters and then directly render the text onto the page using the `canvas.fillText` API. This method eliminates the significant time spent loading font files, significantly improving document opening speed.**You can think of this process like this:** Previously, we needed to find a book (font file) from the bookshelf, then flip to the corresponding page (glyph information), and then draw the text on paper based on the content of the book. Now, we only need to know the “space” each character occupies (TextMetrics) and then we can write directly on the paper. Isn’t that much faster?
2. **Accurate Mode**: To accommodate certain special cases, we retained the traditional “Accurate Mode.” When a document contains WordArt or other effects that require glyph shapes for proper rendering, we automatically switch to “Accurate Mode.” In addition, if a user inserts WordArt in “Speed Mode,” we will automatically switch back to “Accurate Mode,” ensuring that all content is displayed correctly.

**Two modes working in tandem, balancing speed and precision.**

Significant Results from Optimization

With these changes, the document opening speed has taken a qualitative leap, especially in situations with poor network conditions or limited device performance. Users no longer have to wait for a long time for the document to load and can start reading and editing immediately.

Conclusion and Future Prospects

This optimization of the text rendering engine is a reflection of our continuous pursuit of excellence and perfection. We believe that through constant technological innovation, we can bring better product experiences to users. In the future, we will continue to explore new technologies to further enhance document processing efficiency, making eo2suite your best partner for work and study.

I hope today’s sharing has been enlightening. If you are interested in the technical details of eo2suite, please follow my blog, and I’ll see you next time!