在IM會話消息列表體驗優(yōu)化事項中我們對“上拉加載”、“下拉加載”、“下拉刷新”的技術(shù)特點和使用場景做了分析，然后對于下拉加載精確回滾這個場景，提出了三種解決方案：“定時器方案”、“等待圖片/視頻資源onload完成方案”、“反向渲染方案”；這三種方案各有利弊，希望能對讀者帶來一些啟發(fā)和幫助。?
1、場景分析
在IM系統(tǒng)中，核心事件都是圍繞著“聊天”這個主題展開的，在聊天的過程中，獲悉用戶的需求，再通過系統(tǒng)集成的各種工具，幫助用戶完成訴求；“聊天”在IM業(yè)務(wù)中就是“會話消息”，當(dāng)客服與用戶之間存在大量聊天消息的時候，如何更好的去加載用戶歷史消息，提升客服查看消息體驗，是一個值得研究的方向。
由于聊天室的特殊布局，歷史消息加載需要用到虛擬滾動的方式去實現(xiàn)，如果想要更好的性能，還需要使用虛擬列表技術(shù)，而虛擬滾動技術(shù)又分為“上拉加載”和“下拉加載”，在移動端領(lǐng)域，還需要“下拉刷新”，如何選擇合適的技術(shù)方案是我們接下來需要討論的問題。
2、虛擬滾動技術(shù)調(diào)研
虛擬滾動技術(shù)的使用場景主要是在布局空間較小，不方便添加分頁器的頁面，例如移動端列表頁，IM系統(tǒng)左側(cè)進(jìn)線會話列表，會話消息列表，右側(cè)功能區(qū)域訂單/商品查詢列表等。
例如：會話進(jìn)線列表，商品查詢列表可以用到上拉加載，會話消息列表需要用到下拉加載，在移動端，頁面刷新還需要用到下拉刷新。
下拉加載、上拉加載、下拉刷新方案對比：
技術(shù)方案 | 觸發(fā)方式 | 應(yīng)用場景 | 技術(shù)特點/難點 |
下拉加載 | 滾動到頁面頂部觸發(fā) | 會話消息列表數(shù)據(jù)加載 | 需要解決回滾定位不準(zhǔn)的問題，還需要關(guān)注頁面圖片/視頻資源的對滾動定位的影響 |
上拉加載 | 滾動到頁面底部觸發(fā) | 訂單/商品列表數(shù)據(jù)加載，select下拉框，移動端列表頁面 | 需要計算滾動到頁面底部，加載滾動體驗較好，更符合用戶的視覺感受 |
下拉刷新 | 拖動頁面頂部向下移動一定距離觸發(fā) | H5頁面刷新 | 需要處理好下拉橡皮筋效果，成功后刷新頁面 |
上面對我們系統(tǒng)中需要用到的加載/刷新技術(shù)做了簡單的實現(xiàn)和應(yīng)用場景對比，其中上拉加載，下拉刷新不作為此次討論的重點，且社區(qū)中實現(xiàn)的方案和博客也較多，我們此次重點討論的是下拉加載在IM會話消息中的應(yīng)用和體驗優(yōu)化。
3、下拉加載在會話消息的應(yīng)用
3.1 會話消息歷史數(shù)據(jù)下拉加載流程
歷史數(shù)據(jù)拉取會經(jīng)歷三個過程：
- 用戶滾動消息到頁頂，觸發(fā)加載機制，在拉取數(shù)據(jù)的過程中，頂部展示一個“數(shù)據(jù)正在加載中”的loading文案，告知用戶需要等待加載結(jié)果的完成；
- 數(shù)據(jù)返回之后，會被置于原數(shù)據(jù)的頂部（array.unshift(newArray)），渲染后原來的內(nèi)容就會被新的內(nèi)容壓到頁面底部；
- 為了提高用戶的體驗，還需要將頁面滾動到滾動條最后停留的位置（加載前最后一條消息位置）
3.2 如何實現(xiàn)下拉加載
// 監(jiān)聽會話消息區(qū)域添加滾動監(jiān)聽事件
const listenScrollEvent = () => {
chatMsgContainer.value.addEventListener('scroll', scrolHandle)
}
// 滾動邏輯處理回調(diào)函數(shù)
const scrolHandle = throttle(event => {
const { scrollHeight, scrollTop } = chatMsgContainer.value || {}
const { target } = event || {}
// 記錄下當(dāng)前會話滾動位置，切換會話的時候需要回滾到最后停留的位置
userInfo.value.scrollPosition = scrollHeight - scrollTop || 0
// 超出一屏，滾動到頂部，且沒有拉取完所有的數(shù)據(jù)
if (
target.scrollTop === 0 &&
target.scrollHeight > target.clientHeight &&
!userInfo.value?.isComplete
) {
handleScrollEvent(event) // 拉取歷史消息
}
}, 300)
- 監(jiān)聽數(shù)據(jù)變化執(zhí)行回滾動作
// 消息滾動
const handleMessageScroll = (len: number, oldLen: number) => {
if (!len) return
let msgScrollTimer = null
let targetDom = null
nextTick(() => {
// 獲取到加載后最后一條數(shù)據(jù)位置
const recentlyMsg = messagePools[len - 1]
// 計算新加載數(shù)據(jù)條數(shù)
const calcMsgLenDiff = len - oldLen
// 首次加載數(shù)據(jù)的時候讓滾動條滾動到最底部
if (len <= LIMIT_MESSAGE) {
// msgid是會話中的唯一標(biāo)識，可以用此作為唯一ID
targetDom = document.querySelector(recentlyMsg.msgid)
// true 元素的頂部將對齊到可滾動祖先的可見區(qū)域的頂部。對應(yīng)于scrollIntoViewOptions: {block: "start", inline: "nearest"}
firstDom?.scrollIntoView?.(true)
} else if (calcMsgLenDiff <= 1 && !recentlyMsg?.isHistory) {
// 這里用來處理用戶/客服發(fā)送消息滾動邏輯
handleUserOrCustomerMsg()
} else if (calcMsgLenDiff >= 1) {
// 拉取歷史消息邏輯
// 獲取到加載前最后一條數(shù)據(jù)位置
const prevLastMsg = messagePools[calcMsgLenDiff - 1]
targetDom = document.querySelector(prevLastMsg.msgid)
targetDom?.scrollIntoView?.()
}
userInfo.value.isShowLoading = false
})
}
// 監(jiān)聽會話消息數(shù)據(jù)變化
watch(
() => messagePools.length,
(len, oldLen) => {
handleMessageScroll(len, oldLen)
},
{
immediate: true
}
)
如果只是按照上面的方式去處理，當(dāng)頁面中存在圖片/視頻的情況下，由于圖片/視頻渲染慢于普通文本，在加載圖片/視頻類型的消息的時候，回滾的位置就會有偏差，不能準(zhǔn)確的回滾到預(yù)期的位置，我們對以下三種方案進(jìn)行了對比實現(xiàn)，最終選擇了反向渲染加載的方案，如下：
3.2.1 setTimeout延時回滾方案
- 優(yōu)點：簡單易實現(xiàn)，只需要設(shè)置一個合適的定時器時間，對于大部分場景都能回滾正確；
- 缺點：可靠性較低，資源加載慢的情況下，也會出現(xiàn)回滾不準(zhǔn)確的情況，且setTimeout會帶來頁面閃爍的問題；
// 消息滾動
const handleMessageScroll = (len: number, oldLen: number) => {
if (!len) return
let msgScrollTimer = null
let targetDom = null
nextTick(() => {
// 獲取到加載后最后一條數(shù)據(jù)位置
const recentlyMsg = messagePools[len - 1]
// 計算新加載數(shù)據(jù)條數(shù)
const calcMsgLenDiff = len - oldLen
// 首次加載數(shù)據(jù)的時候讓滾動條滾動到最底部
if (len <= LIMIT_MESSAGE) {
...
// 針對圖片/視頻渲染慢的場景做個補償
msgScrollTimer = setTimeout(() => {
clearTimeout(msgScrollTimer)
firstDom?.scrollIntoView?.(true)
}, SCROLL_THRESHOLD)
} else if (calcMsgLenDiff <= 1 && !recentlyMsg?.isHistory) {
// 這里用來處理用戶/客服發(fā)送消息滾動邏輯
handleUserOrCustomerMsg()
} else if (calcMsgLenDiff >= 1) {
// 拉取歷史消息邏輯
// ...
// 針對圖片/視頻渲染慢的場景做個補償
msgScrollTimer = setTimeout(() => {
clearTimeout(msgScrollTimer)
targetDom?.scrollIntoView?.()
}, SCROLL_THRESHOLD)
}
userInfo.value.isShowLoading = false
})
}
3.2.2 監(jiān)聽img/vedio的onload事件方案
- 優(yōu)點：可以回滾的精準(zhǔn)度較高，沒有頁面閃爍的問題；
- 缺點：如果不是虛擬列表，每次滾動的時候可能會有大量的DOM節(jié)點查詢操作，造成頁面滾動卡頓；
const allImgOrVedioLoaded = async() => {
const imgNodes = document.querySelectorAll('.messageWrapper img') || []
const vedioNodes = document.querySelectorAll('.messageWrapper vedio') || []
const promises = [...imgNodes, ...vedioNodes]
// 等待所有的資源加載完成，無論成功還是失敗
return await Promise.allSettled(
promises.map(source => {
new Promise(resolve => {
source.addEventListener('load', () => resolve(source))
})
})
)
}
// 消息滾動
const handleMessageScroll = (len: number, oldLen: number) => {
if (!len) return
let msgScrollTimer = null
let targetDom = null
nextTick(() => {
...
// 等待img/vedio所有資源加載完成，執(zhí)行回滾操作
allImgOrVedioLoaded().then(() => {
firstDom.scrollIntoView(true)
})
} else if (calcMsgLenDiff <= 1 && !recentlyMsg?.isHistory) {
// 這里用來處理用戶/客服發(fā)送消息滾動邏輯
handleUserOrCustomerMsg()
} else if (calcMsgLenDiff >= 1) {
// 拉取歷史消息邏輯
// ...
// 等待img/vedio所有資源加載完成，執(zhí)行回滾操作
allImgOrVedioLoaded().then(() => {
targetDom.scrollIntoView()
})
}
userInfo.value.isShowLoading = false
})
}定時器/onload方案下拉加載回滾流程圖：
3.2.3 反向渲染加載方案
前面我們有提到過“上拉加載”，當(dāng)滾動到底部加載新的一頁的數(shù)據(jù)，數(shù)據(jù)從底部添加，無需執(zhí)行回滾動作，整體的體驗更加流暢自然。
既然“上拉加載”有這么多好處，那我們可不可以使用這樣的方式來模仿我們的“下拉加載”呢？顯然是可以的，我們頁面布局在使用flex布局的情況下，可以反轉(zhuǎn)主軸，這樣我們就可以像“上拉加載”一樣，觸發(fā)到頁面底部的時候，就去拉取新的歷史數(shù)據(jù)，且反向渲染只是數(shù)據(jù)的反轉(zhuǎn)，并不會帶來視覺上的反轉(zhuǎn)；
display: flex;
flex-direction: column-reverse;
3.3 帶來的效果
4、總結(jié)
在IM應(yīng)用中，會話消息列表扮演著很重要的角色，是用戶與客服溝通結(jié)果最終呈現(xiàn)的地方，所以想要提升頁面的加載性能和用戶體驗，下拉加載性能和體驗一直是一個重要的指標(biāo)，當(dāng)然對于大列表組件最好結(jié)合使用虛擬列表技術(shù)，盡量少的DOM渲染和盡量精準(zhǔn)的滾動效果才能給客服帶來最極致的體驗。
最后做個總結(jié)：在IM會話消息列表體驗優(yōu)化事項中我們對“上拉加載”、“下拉加載”、“下拉刷新”的技術(shù)特點和使用場景做了分析，然后對于下拉加載精確回滾這個場景，提出了三種解決方案：“定時器方案”、“等待圖片/視頻資源onload完成方案”、“反向渲染方案”；這三種方案各有利弊，希望能對讀者帶來一些啟發(fā)和幫助。
