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