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

[[182546]]

（1）渲染文本

總體而言，對于詞匯云的生成速度是比較令人滿意的。不過對于common-words即常用詞網(wǎng)站而言，這樣的速度還是太過緩慢。

作者使用SVG來渲染屏幕上的每個詞匯。單獨渲染這么多文本元素可能導(dǎo)致UI線程發(fā)生數(shù)秒鐘的停頓，而且根本沒有充足的CPU資源來完成文本布局計算。但好消息是，作者找到了另一種解決辦法。

相較于每次打開頁面時一次又一次計算詞匯布局，我決定只對布局進行一次計算，而后將結(jié)果保存在一個JSON文件當中。這能幫助作者專注于進行UI線程優(yōu)化。

為了避免UI發(fā)生長時間卡頓，需要以異步方式進行詞匯添加。在每個事件循環(huán)周期內(nèi)，會添加N個詞匯，同時允許瀏覽器處理用戶的命令與更新。在第二輪循環(huán)周期內(nèi)添加更多詞匯，并以此類推。為了實現(xiàn)這一目標，作者編寫了anvaka/rafor，這是一款面向循環(huán)迭代器的異步方案，能夠跨越多個事件循環(huán)周期并充分利用CPU負載。

（2）平移與縮放

此網(wǎng)站支持類似于谷歌地圖的SVG場景導(dǎo)航機制， 同時適用于移動設(shè)備及臺式電腦。這些特性都可通過panzoom庫加以實現(xiàn)。

（3）應(yīng)用結(jié)構(gòu)

在這里，作者使用vue.js作為渲染框架選項。這主要是因為其非常簡單且速度驚人。單一文件組件及熱重載機制可以獲得理想的開發(fā)速度。

應(yīng)用的整體狀態(tài)被存儲在單一對象當中，而各語言的對應(yīng)文件則會在用戶從下拉菜單中選定對應(yīng)選項時進行加載。

作為消息分派器，作者使用的是ngraph.events，這是一套以速度為主要訴求的小型消息傳遞庫。

作者還使用anvaka/query-state來將當前選中的語言存儲在查詢字符串當中。

• https://github.com/anvaka/query-state-允許將應(yīng)用狀態(tài)保存在查詢字符串之內(nèi)。支持雙向更新：查詢字符串〈--〉應(yīng)用狀態(tài)。
• https://github.com/anvaka/rafor- 數(shù)組之上的異步迭代方案，且不會阻塞UI線程。此模塊每個周期內(nèi)會采用部分工作量，這意味著始終有充裕的CPU時間以維持UI響應(yīng)。
• https://github.com/anvaka/simplesvg- 一套基于SVG DOM元素的簡單打包器，且操作方式亦非常便捷。
• https://github.com/anvaka/panzoom- 這套庫能夠在SVG場景下實現(xiàn)類似于谷歌地圖的平移與縮放效果。

【51CTO譯稿，合作站點轉(zhuǎn)載請注明原文譯者和出處為51CTO.com】