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

[[182546]]

（1）渲染文本

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

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

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

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

（2）平移與縮放

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

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

在這里，作者使用vue.js作為渲染框架選項(xiàng)。這主要是因?yàn)槠浞浅：唵吻宜俣润@人。單一文件組件及熱重載機(jī)制可以獲得理想的開發(fā)速度。

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

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

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

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

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