這個表格功能很多，做到現在說實話感覺已經死了。走不動了，單元格的操作很多。用的是Element-Ui組件庫。盡管很多功能已經實作但是隨著功能的完善，頁面就不行了，回應時間太慢了。
image.png993×382 19.6 KB
頁面如上。
求大神指點~~
uj5u.com熱心網友回復：
https://lky5230.github.io/me/#/database這個50列*500行也很流暢，功能也很多，看看這個組件的dom結構，整體是v-if區域渲染的
uj5u.com熱心網友回復：
很簡單啦，根據表格行在不在頁面視口處，用 v-if 控制uj5u.com熱心網友回復：
分頁已經做了，分頁沒有截圖上來uj5u.com熱心網友回復：
遇到同樣的問題了，請問樓主是如何優化的uj5u.com熱心網友回復：
謝謝大佬~~我正在查這個uj5u.com熱心網友回復：
用web worker 試試，知乎專欄
石墨表格之 Web Worker 應用實戰
石墨表格作為一款全功能的在線表格系統，除了支持多人協作編輯以外，它還包含了復雜的資料計算：公式、條件格式、篩選、排序、復制粘貼等等。比如排序，并不僅僅是只按照資料大小排序就完成了，它還包括公式的平移…
A Vue.js plugin to use webworkers
https://github.com/israelss/vue-worker
uj5u.com熱心網友回復：
怎么解決的，分享一下唄uj5u.com熱心網友回復：
謝謝~~問題基本解決了 ，專案工期緊張~技術很早就定型了，沒法兒在改了。uj5u.com熱心網友回復：
大神，請問是怎么做到的，方便看一下代碼嗎？遇到同樣的問題了uj5u.com熱心網友回復：
真的么？我告訴你哈~~ 你把所有的console 刪掉就好了:joy:。同時合理化拆分組件，for回圈少用~~
uj5u.com熱心網友回復：
大佬~~這個是element-ui做的么？具體我還沒來及細看~最近專案上線~有點忙uj5u.com熱心網友回復：
uj5u.com熱心網友回復：
銀盒寶成？杭州的？上次過去面試沒過uj5u.com熱心網友回復：
大佬，問下你這個200行資料，實際頁面dom 只有15行，上下滾動的時候，資料變動，怎么實作的uj5u.com熱心網友回復：
https://github.com/livelyPeng/pl-table 完美解決萬級資料渲染卡頓問題，流暢渲染萬級資料并不會影響到element el-table的原有功能uj5u.com熱心網友回復：
謝謝~~ 非常Nice 尤其是功能上由于之前沒做過表格的~所以多看看別人的學習一下
uj5u.com熱心網友回復：
新人一個:joy: vue檔案 https://github.com/lky5230/me/tree/master/src/components/databaseuj5u.com熱心網友回復：
隨著表格的完善，已經不再單向追求功能實作，有時間去思考和整理。下面是我這次得到的幾點1，在做這類東西的時候一定要和后端溝通好，做好資料除錯，不然后期坑很多地 。（由于是專案重構，資料什么的都已經定死了，而且核心宗旨是前端給出框架，一切后端資料生成，注意是一切。一切，一切）
2 ，談談優化，一開始提出這個問題的時候確實是console惹得禍，是自己沒注意它的位置，導致頁面出來1W多次，當時沒注意，然后各種查，各種嘗試，谷歌的除錯器也用了，最后~~~ 盡管這樣稀里糊涂的解決了，但是我們對自己的要求提升了，進行了反思。是不是邏輯嵌套有問題呢？組件合理使用？for回圈的使用情況？于是乎重新梳理了一遍，把嵌套回圈，全部提出來，個別的組件有必要的全部提出來了，邏輯不合理的地方重新梳理。
3，如果時間合理盡量原生，盡管代碼量多，但是在功能實作上，肯定比Element-Ui 舒服。
最后：能不搞表格盡量別搞真的煩 如果搞一定商量好資料結構，必須搞好~~
uj5u.com熱心網友回復：
只能一步步地查了，性能問題原因很多，去看performance火焰圖吧uj5u.com熱心網友回復：
不至于吧~上次是多久？uj5u.com熱心網友回復：
，純div做的，它解決卡頓是讓視口部分的dom v-if渲染出來
uj5u.com熱心網友回復：
用chrome performance看一下記憶體和性能吧，不知道你的代碼怎么寫的和單元格操作怎么系結的，大概提幾點可優化的地方吧1.單元格操作過多，是否是在每個單元格上都系結了事件，可以分類別直接代理到根節點回應，減少事件的注冊
2.看資料也不是太多，看看賦值的時候有什么記憶體泄露，還是說頻繁操作了dom之類的
uj5u.com熱心網友回復：
厲害了，請問你的github地址是？uj5u.com熱心網友回復：
樣式不像element的uj5u.com熱心網友回復：
互效果就是合并單元格。每一個單元格可編輯，操縱dom是有的。uj5u.com熱心網友回復：
https://github.com/livelyPeng/pl-table 完美解決萬級資料渲染卡頓問題，流暢渲染萬級資料并不會影響到element el-table的原有功能轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/129577.html
標籤：其他技術討論專區
上一篇：本人之前在網上學習ps的視頻資料，真實有效，有想要的
下一篇：求《Transductive Unbiased Embedding for Zero-Shot Learning》代碼