【51CTO.com快譯】在本系列文章的上一部分中，我們選定了四叉樹作為索引結構，并將借此對GitHub各公開資源庫內的詞匯出現頻率進行歸納。下面我們閑言少敘，一同來看其實際表現以及由此得到的具體結論。

[[182546]]

（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】