【51CTO.com快译】在本系列文章的上一部分中，我们选定了四叉树作为索引结构，并将借此对GitHub各公开资源库内的词汇出现频率进行归纳。下面我们闲言少叙，一同来看其实际表现以及由此得到的具体结论。
（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场景下实现类似于谷歌地图的平移与缩放效果。
【51CTO译稿，合作站点转载请注明原文译者和出处为51CTO.com】
