背景

在開發(fā)IM的項目過程中，經(jīng)常會有出現(xiàn)一些需要計算DOM高度，然后超出若干行隱藏等需求。很多時候，需要計算高度的DOM元素都是動態(tài)生成的，我們無法在數(shù)據(jù)渲染前獲取到它的高度。

如果沒有任何交互，我們可以通過CSS來實現(xiàn)這個需求。但是，如果我們需要使用JavaScript來實現(xiàn)一些交互（比如消息渲染時，超過2行顯示某個特定按鈕等），則只能通過JavaScript來進行實現(xiàn)。我在這里介紹一種通過JavaScript來對元素高度進行計算的方法，希望能夠給大家提供一些思路。

技術(shù)方案

根據(jù)前端的基本常識，在內(nèi)存中未渲染的DOM元素是無法獲取到高度的，因此我們有兩個方向來解決這個難題：

通過字數(shù)對行數(shù)進行估算。

將元素渲染后進行高度測算 。

實現(xiàn)方案

以下的實現(xiàn)方案將根據(jù)上面所選擇的技術(shù)方案來進行實現(xiàn)。

通過字數(shù)進行估算

方案

此方案無需多言，就是通過字的總數(shù)、行高和每一行能夠容下的字的個數(shù)進行估算等。在項目最開始時，我采用的就是這個方案。具體實現(xiàn)代碼較為簡單，因此不在本文中提供示例。

優(yōu)點

此方案實現(xiàn)簡單，基本不需要任何技術(shù)成本。

缺點

只適用于等寬文字，如果出現(xiàn)富文本（比如有emoji或者圖片表情等高度不一致）的情況，則無法適用。如果字體為非等寬字體或者存在\n之類的換行符或者是\t之類的制表符時，估算的準確度也會下降。

在DOM渲染后進行操作

方案

顧名思義，此方案就是先不考慮DOM元素行數(shù)邏輯，直接將所有的DOM節(jié)點全部渲染到頁面中，渲染完成后再對進行后續(xù)邏輯判斷。獲取高度后頁面行數(shù)計算將在后面統(tǒng)一講解。

優(yōu)點

此方案通過直接在實際場景的頁面上渲染后進行高度計算，因此計算精準，不存在任何偏差。同時，此方案實現(xiàn)起來也較為簡單，只需要將業(yè)務(wù)邏輯執(zhí)行時間后延，并不需要開發(fā)額外的代碼。

缺點

該方案缺點也比較明顯，由于是先渲染后處理，因此頁面DOM元素會出現(xiàn)重繪和重排，導(dǎo)致頁面閃動，從而影響用戶的體驗。

鏡像計算

方案

該方案的靈感來自于上一個方案。因為在實際的頁面中進行計算能夠保證頁面高度計算沒有任何誤差，因此我們需要一個實際的場景，讓瀏覽器來幫助我們進行高度計算。同時，我們又不能在具體的功能頁面中先渲染后計算，因此我們可以直接創(chuàng)建一個與實際頁面中一模一樣的容器來進行高度計算。這樣我們既能夠精確計算，又能夠不影響用戶體驗。

具體實現(xiàn)的代碼可以參考如下示例：

export default function getLines(element = 'div', style = {}, html = '') {let node = document.createElement(element);//創(chuàng)建一個新容器let length;each(style, (element, index) => {node.style[index] = element;//將傳入的style遍歷后賦值給新容器});node.innerHTML = html;document.body.appendChild(node);//需要將新容器掛載到DOM中,瀏覽器才會進行高度計算let height = global.getComputedStyle(node).height;document.body.removeChild(node);//需要將鏡像DOM進行移除if (height.indexOf('px') > 0) {length = parseInt(height.split('px')[0]);} else {length = 0;}return length; } 復(fù)制代碼

優(yōu)點

該方案基本上繼承了第二個方案的所有優(yōu)點——精確計算，無誤差，并且避免了出現(xiàn)頁面閃動的情況。

缺點

此方案仍然存在一些問題，將新容器掛載到document元素上時，可能會引發(fā)DOM元素的重新渲染，極低概率會影響頁面布局。同時，屬性值等需要自己手動傳入，而不是利用現(xiàn)成的容器，比較費時費力。

方案再優(yōu)化

利用現(xiàn)有DOM容器

使用cloneNode方法來對現(xiàn)有的容器進行clone，我們可以省去輸入樣式的麻煩，同時能夠精確保證兩個容器完全一致。

隱藏鏡像DOM

在實踐過程中，在append以后立刻remove鏡像DOM節(jié)點，不會對頁面產(chǎn)生任何影響。如果擔心添加時會給頁面造成閃動效果，可以給鏡像DOM添加上position:fixed;visibility:hidden;z-index:-999;屬性，能夠讓鏡像DOM在append到頁面時，不會影響當前頁面的任何布局。

為什么我們不使用display:none來實現(xiàn)上述效果呢？因為在使用了該屬性后，window.getComputedStyle獲取的高度將變?yōu)閍uto。同理，如果元素的display屬性為inline時，也會出現(xiàn)類似的效果，因此我們需要將display指定為block或者inline-block。

理論上我們的容器都應(yīng)該為塊級元素，否則計算高度的意義也就不存在了。因此在容器clone時只需要留意即可，不需要重新指定。

兩個優(yōu)化點經(jīng)過實踐已經(jīng)證明可行，具體代碼就不附上了，如果有需要的可以給我留言~~

通過高度來計算行數(shù)

目前，通過高度來計算行數(shù)并沒有什么比較好的方法，一般是通過line-height兩個屬性來進行計算。

如果line-height為倍數(shù)的話，則還需要font-size屬性來確定具體高度。

具體算法為：總高度 / 每一行高度 = 行數(shù)

而每一行高度則通過line-height或者line-height* font-size確定。

總結(jié)

獲取動態(tài)元素的高度一直都是IM項目中的一個重要需求，自己在這個方面也踩了許多坑，因此寫了這一篇博客來進行記錄，同時其他人如果看到了也可以避免一些常見問題。

由于此方案較為繁瑣，同時容易留下不少坑，不太推薦使用此方法，還是建議通過產(chǎn)品方案等其他手段規(guī)避此方案。

總結(jié)

以上是生活随笔為你收集整理的IM应用中如何计算富文本的高度的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。