Google Docs表面引擎[关闭]答案

【问题标题】：Google Docs surface engine [closed]Google Docs表面引擎[关闭]
【发布时间】：2012-09-13 10:05:28
【问题描述】：

是否有任何链接可以更深入地了解有关 Google 文档布局引擎的详细信息？如果它使用 webgl，或 canvas 元素 2d 上下文，或任何东西。我知道谷歌是从头开始计算字符宽度的。

我正在阅读有关 Bespin 的信息，它说它存在一些性能问题，所以我想知道谷歌做了什么让它变得更快。我只是找不到有关他们如何做的任何细节。

只有当它是开源的...

顺便说一句，我试过 benjamn / kix-standalone 但来自 github 的源代码根本不可读：

function $a(a) { 
    return Wa(a) == Ta 
} 
function ab(a) { 
    var b = Wa(a); 
    return b == Ta || b == Ra && typeof a.length == Sa <br/>
}

【问题讨论】：

我去年在这个话题上做了一些研究。我喜欢你的问题，我会尽快回答。暂时看一下Surface
感谢您抽出宝贵时间 :)

标签： javascript text documentation editor

【解决方案1】：

Google Docs 在隐藏的输入元素中和/或通过键盘和鼠标事件捕获您的所有输入，然后通过完全用 Javascript 实现的自定义表面和布局引擎将文档的内容布局到您的屏幕上。

从文本到光标本身的所有内容都由 DOM 元素组成。例如，光标不是由浏览器直接呈现，而是由位于正确位置的 1 像素宽的 div 呈现。您可以使用 Chrome 的 Inspect 功能查看由 Google Docs 创建的 DOM，以查看该引擎的运行结果。有关更多详细信息，另请参阅 Google 文档产品经理的这篇博文：http://googledrive.blogspot.ca/2010/05/whats-different-about-new-google-docs.html。正如您在问题中提到的，这种类型的光标定位所需的字符宽度是动态计算的。

为了更深入地了解，看看一个类似（尽管显然更简单）项目的实现可能会有所帮助：Ritzy 是一个新的开源富文本编辑器，它包含一个自定义 javascript 表面和布局引擎，就像谷歌文档。它的 DOM 操作使用Facebook React。据我所知，这是该技术的第一个开源实现。它包含类似 Google 文档的字符宽度和光标定位计算（请参阅 TextFontMetrics.js），可以作为有用的学习工具。

免责声明：我是上述项目的作者。

【讨论】：