在一些網(wǎng)頁應(yīng)用中，有時會碰到一個超級巨大的列表，成千上萬行，這時大部份瀏覽器解析起來就非常痛苦了（有可能直接卡死）。
也許你們會說可以分頁或動態(tài)加載??？但是有可能需求不允許分頁，動態(tài)加載？網(wǎng)絡(luò)的延遲也會造成體驗不好。
那么適時候介紹本文的實現(xiàn)思路了。
首先上最終的效果：
主要思路如下：
首先，創(chuàng)建如上圖所示的三個DIV，scrollbar用于顯示具體的滾動條（CSS需要設(shè)置zindex，要顯示在demo-list的底層），real-panel用于計算列表的實際高度（每一個li的高度是固定的，有多少項數(shù)據(jù)也是知道的，由此可以計算出列表的實際高度），demo-list主要用于當(dāng)前滾動條高度對應(yīng)的實際數(shù)據(jù)（css需要設(shè)置zindex，顯示于scrollbar的上層，需要使用JS計算寬度等于real-panel的寬度，這樣就剛好覆蓋掉底層滾動條外的區(qū)域）。
然后，使用KO對數(shù)據(jù)實現(xiàn)綁定，由于KO的雙向綁定，我們可以不用再去實現(xiàn)滾動滾動條時數(shù)據(jù)變化時帶來的更新操作。
最后，就是兼容性了。本文的具體實現(xiàn)在IE6\7\8\9\10\11,FireFox,Chrome,Edge上效果完美。
下面貼代碼：flyweight.js
延伸閱讀
學(xué)習(xí)是年輕人改變自己的最好方式