專利名稱：一種構建支持大數(shù)據(jù)量高性能瀏覽器列表組件的方法
技術領域：
本方法涉及使用瀏覽器技術，具體地說是一種包括html標記，css， javascript等 展現(xiàn)大數(shù)據(jù)量的高性能頁面列表組件方法。
背景技術：
隨著網(wǎng)絡的普及，越來越多的應用采用瀏覽器操作和展示數(shù)據(jù)，同時也會遇到展 示大量列表數(shù)據(jù)的需求，比如需要在一個頁面上展現(xiàn)一萬條數(shù)據(jù)，這時瀏覽器渲染生成DOM 結構的時候就會持續(xù)消耗很長的CPU時間，內(nèi)存也會隨之增大很多，甚至有些時候會造成 瀏覽器的假死，給用戶帶來很差的用戶體驗。 普通列表組件是將所有數(shù)據(jù)一次性動態(tài)生成DOM結構的，占用大量CPU時間和內(nèi) 存，但是用戶所能看到的卻只有固定高度內(nèi)的內(nèi)容，超過這個高度就需要拉動滾動條，才能 看到下面的內(nèi)容，因此用戶沒有看到的內(nèi)容就渲染出來是一種浪費，而應該等到用戶拉動 滾動條時，才渲染展現(xiàn)出來。

發(fā)明內(nèi)容
本發(fā)明的目的是提供一種可支持大數(shù)據(jù)量的高性能瀏覽器列表組件。
本發(fā)明的目的是按以下方式實現(xiàn)的，步驟如下 首先根據(jù)每行的寬度和總條數(shù)計算出總高度，賦值給內(nèi)DIV的高度和外DIV高度， 將overflow設成hidden,這樣就因為內(nèi)DIV的高度而出來滾動條，但是渲染的條數(shù)只有外 DIV的高度除以每行的高度，當滾動條滾動的時候，根據(jù)滾動的高度計算出偏移的條數(shù)，再 經(jīng)渲染后就是應該看到的瀏覽內(nèi)容。 根據(jù)行高和視線范圍內(nèi)的高度，暫時渲染所見D0M，再根據(jù)滾動條的滾動范圍，渲 染其余進入實現(xiàn)內(nèi)的DOM。 本發(fā)明的優(yōu)異效果是，此方法可以有效提高用戶體驗，減少CPU占用時間，減少內(nèi) 存占有量，使大數(shù)據(jù)量在瀏覽器頁面瞬間展示，無須等待，面對大數(shù)據(jù)量的展現(xiàn)需求時，可 以快速展現(xiàn)，沒有延遲或假死現(xiàn)象。
具體實施例方式
首先根據(jù)每行的寬度和總條數(shù)計算出總高度，賦值給內(nèi)DIV的高度，外DIV固定高 度，overflow設成hidden,這樣就因為內(nèi)DIV的高度而出來滾動條，但是渲染的條數(shù)只有外 DIV的高度除以每行的高度，當滾動條滾動的時候，根據(jù)滾動的高度計算出偏移的條數(shù)，再 渲染應該看到的內(nèi)容。
權利要求
一種構建支持大數(shù)據(jù)量高性能瀏覽器列表組件的方法，其特征在于，步驟如下首先根據(jù)每行的寬度和總條數(shù)計算出總高度，賦值給內(nèi)DIV的高度和外DIV高度，將overflow設成hidden，這樣就因為內(nèi)DIV的高度而出來滾動條，但是渲染的條數(shù)只有外DIV的高度除以每行的高度，當滾動條滾動的時候，根據(jù)滾動的高度計算出偏移的條數(shù)，再經(jīng)渲染后就是應該看到的瀏覽內(nèi)容。
2. 根據(jù)權利要求1所述的方法，其特征在于，根據(jù)行高和視線范圍內(nèi)的高度，暫時渲染 所見DOM，再根據(jù)滾動條的滾動范圍，渲染其余進入實現(xiàn)內(nèi)的DOM。
全文摘要
本發(fā)明提供一種構建支持大數(shù)據(jù)量高性能瀏覽器列表組件的方法，步驟如下首先根據(jù)每行的寬度和總條數(shù)計算出總高度，賦值給內(nèi)DIV的高度和外DIV高度，將overflow設成hidden，這樣就因為內(nèi)DIV的高度而出來滾動條，但是渲染的條數(shù)只有外DIV的高度除以每行的高度，當滾動條滾動的時候，根據(jù)滾動的高度計算出偏移的條數(shù)，再經(jīng)渲染后就是應該看到的瀏覽內(nèi)容。此組件可以渲染大數(shù)據(jù)量數(shù)據(jù)，有效提高用戶體驗，減少瀏覽器占用CPU時間，減少內(nèi)存使用量，只展現(xiàn)視線內(nèi)的數(shù)據(jù)，根據(jù)滾動條的滾動再渲染其余進入視線內(nèi)的數(shù)據(jù)。
文檔編號G06F17/30GK101777069SQ20101001131
公開日2010年7月14日 申請日期2010年1月4日 優(yōu)先權日2010年1月4日
發(fā)明者曹祥茂, 王登武, 高傳集 申請人:山東浪潮齊魯軟件產(chǎn)業(yè)股份有限公司