背景
???由于是公司項(xiàng)目，所以不方便給出代碼或者視頻，只能列一些自己畫(huà)的流程圖。
???大致情況如上，前端有7個(gè)顯示區(qū)。在對(duì)其進(jìn)行滾動(dòng)翻頁(yè)的時(shí)候，存在以下問(wèn)題：
1. 連續(xù)滾輪翻頁(yè)，每次所有顯示區(qū)刷新完，進(jìn)行下一次翻頁(yè)用時(shí)較久。（說(shuō)人話就是，平均耗時(shí)翻頁(yè)時(shí)間長(zhǎng)）
2. 連續(xù)滾輪翻頁(yè)，會(huì)出現(xiàn)一下子翻不動(dòng)，然后連續(xù)刷新很多層的情況。且有的顯示區(qū)更新快，有的層更新更新很慢。
分析
???通過(guò)分析代碼，調(diào)查log發(fā)現(xiàn)，翻頁(yè)切換平均耗時(shí)在600ms。其主要的業(yè)務(wù)邏輯如下：
1.前端線程發(fā)送同步翻頁(yè)命令給后端
2.后端進(jìn)行處理，共7個(gè)顯示區(qū)。前三個(gè)每個(gè)耗時(shí)30ms左右，后4個(gè)業(yè)務(wù)處理平均需要100ms。在后端處理過(guò)程中，已完成的場(chǎng)景數(shù)據(jù)，已經(jīng)異步發(fā)送給前端。
3.前端等到后端處理完數(shù)據(jù)，根據(jù)接收數(shù)據(jù)，進(jìn)行前端繪制，耗時(shí)110ms左右。
問(wèn)題
主要問(wèn)題有三個(gè)：
1.后端處理邏輯耗時(shí)太長(zhǎng)了，特別是后4個(gè)場(chǎng)景。
2.前端等到后端邏輯處理完，才可以UI渲染，中間白白等待，耗時(shí)過(guò)長(zhǎng)
3.在前端連續(xù)翻頁(yè)情況下，有可能出現(xiàn)，第一次翻頁(yè)的場(chǎng)景還沒(méi)渲染完（只渲染了幾個(gè)區(qū)域，或者一個(gè)都沒(méi)有），就開(kāi)始發(fā)送下一次渲染。造成“卡很久，然后一下次渲染好幾幀的現(xiàn)象”。
解決
優(yōu)化有3點(diǎn)：
1.以空間換時(shí)間。把耗時(shí)的即時(shí)計(jì)算操作，提前計(jì)算好，存儲(chǔ)在內(nèi)存中。那么在翻頁(yè)過(guò)程中，就只是拷貝數(shù)據(jù)。
2.將圖像刷新從同步改成異步。
2.1前端發(fā)送命令變成異步（這里最初同步是有一些業(yè)務(wù)需求，需要改造）
2.2我們的后端框架的刷新邏輯由兩部分組成：數(shù)據(jù)序列化+發(fā)送。如果采用同步，后面4個(gè)場(chǎng)景的序列化的總時(shí)間，大概需要200ms。如下圖所示。如果采用異步，那前端阻塞的時(shí)間，就幾乎可以忽略不急
3.同步機(jī)制
???前兩點(diǎn)優(yōu)化以后，翻頁(yè)速度非?？?。主要耗時(shí)只在后端序列化+發(fā)送數(shù)據(jù)+前端處理，可以達(dá)到200ms左右一次翻頁(yè)。但存在異步刷新的問(wèn)題。具體情況如下：
1.第一次翻頁(yè)后，后端發(fā)送給前端數(shù)據(jù)，前端還只收到前兩個(gè)場(chǎng)景的數(shù)據(jù)，并渲染。
2.前端收到翻頁(yè)指令，接著發(fā)送翻頁(yè)。后端發(fā)送7個(gè)場(chǎng)景，因?yàn)榍皫讉€(gè)場(chǎng)景，數(shù)據(jù)少，很快又發(fā)到了前端。
3.前端渲染第二次翻頁(yè)的前幾個(gè)數(shù)據(jù)
4.前端渲染第一次和第二次的剩余數(shù)據(jù)。
解決：文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-743819.html
后端在收到翻頁(yè)指令以后，先等待自己上一次所有場(chǎng)景都刷新完，再接著序列化、發(fā)送。這樣前端數(shù)據(jù)就能最大程度的進(jìn)行渲染了，不會(huì)出現(xiàn)錯(cuò)位。
總結(jié)
最后的流程圖如下，從最初600ms左右延遲的卡頓翻頁(yè)，如今變成200ms左右的穩(wěn)定翻頁(yè)，優(yōu)化效果非常不錯(cuò)。
文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-743819.html
到了這里，關(guān)于記一次翻頁(yè)性能優(yōu)化的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
