【.com速译】在本系列文章的前一部分，我们选择了一个四叉树作为索引结构，将使用它总结了GitHub公共存储库中单词的出现频率。现在话不多说，让我们看看它的实际表现以及由此得出的具体结论。首先看一下JavaScriptlogo的四叉树结构：空心的矩形代表有可用空间的四边形。如果候选矩形小于任何空四边形，则代表可以将其立即放置在相应的四边形内。简单的四叉树索引可以提供合理的结果，并且一些视觉效果很容易实现。可以看到每个象限的边界——也就是文字不能放在四边形的位置：作者没有放出他使用的最终四叉树词云代码，因为作者觉得在其他场景下没有复用价值。网站是怎么建起来的？(1)Renderingtext总体而言，词云的生成速度还是比较令人满意的。但是对于常用词网站来说，这个速度还是太慢了。作者使用SVG渲染屏幕上的每个单词。单独渲染如此多的文本元素可能会使UI线程停顿几秒钟，而且根本没有足够的CPU资源来完成文本布局计算。不过好在笔者找到了另一种解决方法。我决定只计算一次布局并将结果保存在一个JSON文件中，而不是在每次打开页面时都一次又一次地计算词汇布局。这有助于作者专注于UI线程优化。为了避免UI长期滞后，需要异步添加词表。在每个事件循环周期中，添加N个词汇表，同时允许浏览器处理用户命令和更新。在第二个循环中添加更多单词，依此类推。为了实现这一目标，作者编写了anvaka/rafor，这是一种用于循环迭代器的异步解决方案，可以跨越多个事件循环周期并充分利用CPU负载。(2)平移和缩放本网站支持类似于谷歌地图的SVG场景导航机制，适用于移动设备和台式电脑。这些功能可以通过panzoom库来实现。(3)应用结构这里，笔者使用vue.js作为渲染框架的选择。这主要是由于它的简单性和令人难以置信的速度。单文件组件和热重载机制可以达到理想的开发速度。应用程序的整体状态存储在单个对象中，当用户从下拉菜单中选择相应的选项时，每种语言的相应文件都会加载。作为消息分发器，作者使用了ngraph.events，这是一组专注于速度的小型消息传递库。作者还使用anvaka/query-state将当前选择的语言存储在查询字符串中。一组工具https://github.com/anvaka/query-state-允许在查询字符串中保存应用程序状态。支持双向更新：查询字符串<-->申请状态。https://github.com/anvaka/rafor-在不阻塞UI线程的情况下对数组进行异步迭代。该模块每个周期都使用一部分工作负载，这意味着始终有充足的CPU时间来保持UI响应。https://github.com/anvaka/simplesvg-一套简单的基于SVGDOM元素的打包器，操作方法也很方便。https://github.com/anvaka/panzoom-这套库可以在SVG场景下实现类似谷歌地图的平移和缩放效果。为什么要采用词云的形式？事实上，很多朋友不喜欢词云表示，原因如下：它把词从上下文中剥离出来，所以good并不总是意味着good（比如notgooddoesn't的not部分不会显示).单词被缩放以适合图形显示，因此不能保证单个单词的显示大小。它会直接丢弃一些常用词（如a、the、not等）。不过笔者还是喜欢用各种算法将词汇填充到图中生成词汇云。大多数时候，艺术感是最重要的——不是吗？原标题：常用词原作者：anvaka文章审稿人：老曹译者：Nuka-Cola老曹专栏文章链接：http://zhuanlan.51cto.com/columnlist/laocao/原译者及出处为.com]
