產(chǎn)品分享社區(qū)
聲明:網(wǎng)站上的服務(wù)均為第三方提供,請(qǐng)用戶注意甄別服務(wù)質(zhì)量
性能升級(jí),為什么這么重要?
我們?cè)诖蜷_大型文件、處理復(fù)雜設(shè)計(jì)操作時(shí),可能都有過(guò)“卡頓”的痛苦經(jīng)歷。Pixso深知,一款高效、快速、穩(wěn)定的設(shè)計(jì)工具,可以讓設(shè)計(jì)師的工作更加順暢,進(jìn)而提升整體的工作效率。
為此,Pixso成立了專門的性能優(yōu)化小組,經(jīng)過(guò)長(zhǎng)達(dá)3個(gè)多月努力,進(jìn)行了地毯式的代碼重構(gòu),實(shí)現(xiàn)了產(chǎn)品性能的一次飛躍,讓你的創(chuàng)意流動(dòng)如水——文件打開速度顯著提升,流暢度提升30%以上,文件內(nèi)存占比更小,文件操作絲滑流暢。
相信很多產(chǎn)品設(shè)計(jì)師,都看過(guò)一篇《網(wǎng)頁(yè)設(shè)計(jì)95%是排版》的文章,可見(jiàn)字體排版舉足輕重。對(duì)于一款設(shè)計(jì)工具來(lái)說(shuō),文本模塊的性能更是重中之重。
本次性能優(yōu)化,我們重點(diǎn)優(yōu)化了文本模塊,對(duì)底層代碼100%重寫,使得文本模塊的質(zhì)量與效率更穩(wěn)定,能以更高的精度執(zhí)行各種文本修改和排版任務(wù)。這項(xiàng)更新讓文件打開速度更快,內(nèi)存縮小,極大地提升了設(shè)計(jì)效率和體驗(yàn)。
一起來(lái)見(jiàn)證兩大文本性能提升的狂飆!
首先是大文件的打開速度,優(yōu)化后的文本模塊可以更快地讀取和寫入文件,從而提升文件的加載和寫入速度。這里,我們隨機(jī)選取了10個(gè)大型設(shè)計(jì)文件,每個(gè)文件均到達(dá)10萬(wàn)+圖層,經(jīng)過(guò)不同環(huán)境下的多輪測(cè)試,平均加載時(shí)間僅需5秒,對(duì)比之前的Pixso版本,打開時(shí)間縮短一倍以上。
過(guò)去,畫布加載完成之后可能需要等待字體加載,性能優(yōu)化之后,即使是打開10萬(wàn)+圖層的Pixso文件,加載完成后文字就會(huì)同步顯示,完全不需要等待字體加載的時(shí)間,輕松開啟高效工作。
在設(shè)計(jì)過(guò)程中,很多設(shè)計(jì)師喜歡把很多組件庫(kù)放置在一個(gè)文件內(nèi),我們針對(duì)這個(gè)場(chǎng)景進(jìn)行了測(cè)試,將56個(gè)組件庫(kù)放置在一個(gè)頁(yè)面,合計(jì)23萬(wàn)個(gè)圖層,打開也只需要11.01秒,頁(yè)面的切換也非常順暢,幫助設(shè)計(jì)師更好地管理組件庫(kù)。
其次,文件打開時(shí)內(nèi)存較比以往降低40%。面對(duì)大量文本處理或大型設(shè)計(jì)文件時(shí),優(yōu)化后的文本模塊可以更有效地管理內(nèi)存,降低運(yùn)行內(nèi)存占比。我們隨機(jī)上傳了10個(gè)設(shè)計(jì)項(xiàng)目 ,優(yōu)化前后運(yùn)行內(nèi)存占比均降低40%左右。
同時(shí),更小的內(nèi)存帶來(lái)了更加順暢的協(xié)作體驗(yàn),我們邀請(qǐng)了30人團(tuán)隊(duì)在線實(shí)時(shí)協(xié)作,同時(shí)編輯1個(gè)10000+圖層的文件,可以看到協(xié)作畫面非常流暢,不會(huì)出現(xiàn)任何卡頓的現(xiàn)象。
Pixso文本模塊的優(yōu)化和升級(jí),對(duì)于經(jīng)常處理大型設(shè)計(jì)文件的設(shè)計(jì)師無(wú)疑是一項(xiàng)重大的改進(jìn)。強(qiáng)化文本模塊,是Pixso打造更高效、便捷的云端設(shè)計(jì)工具體驗(yàn)的同時(shí),協(xié)助設(shè)計(jì)師們提升設(shè)計(jì)效率和創(chuàng)造力。
對(duì)一款云端設(shè)計(jì)工具來(lái)說(shuō),渲染引擎相當(dāng)于核心CPU,如果CPU的算力不夠強(qiáng)大,堆砌再多的功能和硬件,只會(huì)暴露自身的缺陷,影響整體運(yùn)行的流暢度。
早在去年10月開始,Pixso就采用最新的WebAssembly解碼格式,對(duì)產(chǎn)品的渲染引擎進(jìn)行持續(xù)優(yōu)化,提供更加流暢的產(chǎn)品體驗(yàn)。
面對(duì)縮放、拖拽、頁(yè)面切換等高頻操作,引擎優(yōu)化前后的感知非常明顯。我們將日常高頻操作進(jìn)行拆解,測(cè)試了141項(xiàng)數(shù)據(jù),其中98.9%可以達(dá)到峰值性能,即使面對(duì)10萬(wàn)圖層的設(shè)計(jì)文件,Pixso也能保持流暢的高頻編輯,帶來(lái)更加流暢、穩(wěn)定的協(xié)作體驗(yàn)。
升級(jí)后的渲染引擎能更快地渲染大量圖層,例如圖層的批量縮放場(chǎng)景,我們可以在畫板選中3000+圖層,并同時(shí)對(duì)畫板中所有元素進(jìn)行縮放,可以看到過(guò)程非常順滑,絲毫不會(huì)卡頓,提升設(shè)計(jì)師的工作效率。
將56個(gè)規(guī)范的組件庫(kù)整合到一個(gè)畫面,涵蓋1000+畫板,接近20萬(wàn)個(gè)圖層,內(nèi)存占比接近1GB,使用Pixso可以流暢的切換頁(yè)面,任意放大縮小查看細(xì)節(jié),不需要任何的等待。
優(yōu)化后的渲染引擎帶來(lái)更快的響應(yīng)速度,無(wú)論是復(fù)雜的設(shè)計(jì)元素,還是精細(xì)的字體、顏色,Pixso都能更真實(shí)、精確地呈現(xiàn),日常操作更加流暢順滑,產(chǎn)品的穩(wěn)定性同步提升。
總體來(lái)說(shuō),隨著以上兩大性能的升級(jí),更利于大型設(shè)計(jì)團(tuán)隊(duì)、大廠的體驗(yàn)設(shè)計(jì)部門、企業(yè)級(jí)組件庫(kù)的搭建與交付、團(tuán)隊(duì)或企業(yè)資產(chǎn)遷移等業(yè)務(wù)場(chǎng)景,提升設(shè)計(jì)師的工作效率和體驗(yàn),讓大型設(shè)計(jì)團(tuán)隊(duì)和企業(yè)能更好地滿足他們的業(yè)務(wù)需求。
設(shè)計(jì)工具不僅提供完善的功能模塊,更是設(shè)計(jì)師表達(dá)創(chuàng)意、呈現(xiàn)設(shè)計(jì)的重要媒介。在此期間,Pixso定向邀請(qǐng)了用戶參與測(cè)試,以了解性能升級(jí)后Pixso的實(shí)際表現(xiàn)。
來(lái)自頭部智能制造企業(yè)設(shè)計(jì)師顧女士說(shuō),“總體來(lái)說(shuō)還是挺滿意的,尤其是打開公司的組件庫(kù),文件非常大,現(xiàn)在速度快了很多,操作也比之前流暢,感覺(jué)又可以往組件庫(kù)加內(nèi)容了。”
同時(shí),該企業(yè)的研發(fā)人員告訴我們,“打開、協(xié)作、切圖都更快了,之前大文件預(yù)置屬性切圖要分批導(dǎo)出,現(xiàn)在幾萬(wàn)圖層一下就導(dǎo)出來(lái)了,直接一步到位?!?/span>
隨著公網(wǎng)版本的上線,我們也收到了一些用戶的反饋,“看到Pixso性能升級(jí)了,趕緊打開幾個(gè)大文件試了下,進(jìn)步挺明顯的,無(wú)論是文件的加載速度還是操作性能,整個(gè)過(guò)程都非常流暢,國(guó)產(chǎn)之光。”
感謝用戶長(zhǎng)期的信賴、積極反饋和響應(yīng),給予了Pixso不斷優(yōu)化的動(dòng)力。
AI設(shè)計(jì)協(xié)同時(shí)代,優(yōu)秀的設(shè)計(jì)工具是促進(jìn)設(shè)計(jì)行業(yè)共同成長(zhǎng)的關(guān)鍵所在。此次優(yōu)化,不僅展示了Pixso產(chǎn)研團(tuán)隊(duì)對(duì)于細(xì)節(jié)的重視和不懈追求,同時(shí)也是提供優(yōu)質(zhì)產(chǎn)品的承諾。
設(shè)計(jì)師的時(shí)間是寶貴的,Pixso將繼續(xù)專注于性能優(yōu)化,為您的創(chuàng)新之路提供更快、更流暢的支持。Pixso,與你一起,創(chuàng)新無(wú)限。