github热度最高的语言是什么，用wordcloud制作流程解析（下）
【】在本系列文章的上一部分中，我们选定了四叉树作为索引结构，并将借此对GitHub各公开资源库内的词汇出现频率进行归纳。下面我们闲言少叙，一同来看其实际表现以及由此得到的具体结论。
首先来看JavaScript logo的四叉树结构：
空白矩形代表的是具备可用空间的四边形。如果候选矩形小于其中任意空白四边形，则代表可以将其立即放置在对应四边形之内。 通过简单的四叉树索引能够提供合理的结果，也很容易实现某些视觉层面的效果。大家可以看到各象限的边界——即无法将文本放置如所在四边形的位置：
作者并没有发布自己使用的最终四叉树词汇云代码，因为作者觉得在其它场景下并没有复用价值。
网站是如何构建完成的？
（1）渲染文本
总体而言，对于词汇云的生成速度是比较令人满意的。不过对于common-words即常用词网站而言，这样的速度还是太过缓慢。
作者使用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- 一套基于SVG DOM元素的简单打包器，且操作方式亦非常便捷。
- https://github.com/anvaka/panzoom- 这套库能够在SVG场景下实现类似于谷歌地图的平移与缩放效果。
为什么采取词汇云的形式？ 事实上，出于以下几个理由，很多朋友并不太喜欢词汇云这种表现形式：将词汇从上下文中剥离出来，因此good并不总是代表好的意思（例如not good中的not部分并不会被显示出来）。对词汇进行缩放以适应图形显示，因此各词汇的显示大小无法保证。其会直接舍弃部分常用词汇（例如a、the、not等）。 不过作者还是非常喜欢利用各类算法将词汇填充进图形内以生成词汇云。很多时候，艺术感才是最重要的——不是吗？
原文标题：Common Words
原文作者：anvaka
文章审核人：老曹 译者：核子可乐
老曹专栏文章链接：http://zhuanlan./columnlist/laocao/
【译稿，合作站点转载请注明原文译者和出处为.com】