【技術(shù)實(shí)現(xiàn)步驟摘要】
本專利技術(shù)涉及網(wǎng)頁(yè)渲染方法，更具體地說(shuō)是指用于表格的網(wǎng)頁(yè)渲染方法、裝置、計(jì)算機(jī)設(shè)備及存儲(chǔ)介質(zhì)。
技術(shù)介紹
1、隨著數(shù)字化轉(zhuǎn)型的不斷推進(jìn)，各個(gè)行業(yè)都在生成大量的數(shù)據(jù)。如何在移動(dòng)端或桌面端高效且流暢地查看和編輯這些大數(shù)據(jù)量的表格，變得愈發(fā)重要。然而，當(dāng)數(shù)據(jù)量龐大并且表格需要支持復(fù)雜的dom(文檔對(duì)象模型，document?object?model)功能時(shí)，傳統(tǒng)的表格實(shí)現(xiàn)方式常常導(dǎo)致瀏覽器cpu(中央處理器，central?processing?unit)占用率升高，性能顯著下降。這種情況會(huì)造成用戶體驗(yàn)不佳，表現(xiàn)為頁(yè)面卡頓和交互延遲。
2、尤其是在數(shù)據(jù)頻繁更新的場(chǎng)景中，大數(shù)據(jù)量的表格進(jìn)行重繪和重新計(jì)算時(shí)，會(huì)消耗大量的系統(tǒng)資源，這不僅影響了表格的響應(yīng)速度，也使整個(gè)應(yīng)用的性能受到制約，給用戶帶來(lái)明顯的不適感。因此，優(yōu)化大數(shù)據(jù)表格的處理方式，以提升用戶交互體驗(yàn)，成為了一個(gè)亟待解決的技術(shù)挑戰(zhàn)。
3、因此，有必要設(shè)計(jì)一種新的方法，實(shí)現(xiàn)提升了表格在大規(guī)模數(shù)據(jù)場(chǎng)景下的性能和用戶體驗(yàn)，適用于數(shù)據(jù)量龐大、實(shí)時(shí)更新頻繁且交互要求高的前端應(yīng)用場(chǎng)景。
技術(shù)實(shí)現(xiàn)思路
1、本專利技術(shù)的目的在于克服現(xiàn)有技術(shù)的缺陷，提供用于表格的網(wǎng)頁(yè)渲染方法、裝置、計(jì)算機(jī)設(shè)備及存儲(chǔ)介質(zhì)。
2、為實(shí)現(xiàn)上述目的，本專利技術(shù)采用以下技術(shù)方案：用于表格的網(wǎng)頁(yè)渲染方法，包括：
3、獲取待展示數(shù)據(jù)；
4、獲取當(dāng)前顯示窗口高度，并根據(jù)所述當(dāng)前顯示窗口高度計(jì)算表格可視區(qū)域高度以及可顯示的數(shù)據(jù)
5、設(shè)置緩存區(qū)；
6、監(jiān)聽(tīng)用戶操作窗口的事件，并確定偏移量；
7、根據(jù)所述偏移量計(jì)算數(shù)據(jù)偏移行數(shù)，并確定待展示數(shù)據(jù)的渲染起始位置和待展示數(shù)據(jù)的渲染結(jié)束位置；
8、從待展示數(shù)據(jù)的渲染起始位置進(jìn)行待展示數(shù)據(jù)的渲染，并渲染至待展示數(shù)據(jù)的渲染結(jié)束位置，并將已渲染的數(shù)據(jù)緩存于緩存區(qū)；
9、采用平滑滾動(dòng)顯示已渲染的數(shù)據(jù)。
10、其進(jìn)一步技術(shù)方案為：所述獲取當(dāng)前顯示窗口高度，并根據(jù)所述當(dāng)前顯示窗口高度計(jì)算表格可視區(qū)域高度以及可顯示的數(shù)據(jù)行數(shù)，包括：
11、獲取當(dāng)前顯示窗口高度，并根據(jù)所述當(dāng)前顯示窗口高度計(jì)算表格高度；
12、將所述表格高度減去固定表頭的高度，以得到表格可視區(qū)域高度；
13、根據(jù)所述表格可視區(qū)域高度與表格每行的固定高度進(jìn)行求比值，以得到可顯示的數(shù)據(jù)行數(shù)。
14、其進(jìn)一步技術(shù)方案為：所述監(jiān)聽(tīng)用戶操作窗口的事件，并確定偏移量，包括：
15、當(dāng)監(jiān)聽(tīng)到鼠標(biāo)滾動(dòng)事件時(shí)，計(jì)算在可視區(qū)域內(nèi)的偏移量，以得到偏移量；當(dāng)監(jiān)聽(tīng)到滾動(dòng)條拖拽事件時(shí)，計(jì)算滾動(dòng)條的偏移量，以得到偏移量。
16、其進(jìn)一步技術(shù)方案為：所述當(dāng)監(jiān)聽(tīng)到鼠標(biāo)滾動(dòng)事件時(shí)，計(jì)算在可視區(qū)域內(nèi)的偏移量，以得到偏移量，包括：
17、當(dāng)監(jiān)聽(tīng)到鼠標(biāo)滾動(dòng)事件時(shí)，定義鼠標(biāo)滾動(dòng)偏移量，并在每次鼠標(biāo)滾動(dòng)時(shí)累加滾輪在垂直方向上的滾動(dòng)量，以得到最終鼠標(biāo)滾動(dòng)偏移量；
18、根據(jù)所述最終鼠標(biāo)滾動(dòng)偏移量進(jìn)行邊界檢查，以得到檢查結(jié)果；
19、根據(jù)所述檢查結(jié)果確定在可視區(qū)域內(nèi)的偏移量，以得到偏移量。
20、其進(jìn)一步技術(shù)方案為：所述當(dāng)監(jiān)聽(tīng)到滾動(dòng)條拖拽事件時(shí)，計(jì)算滾動(dòng)條的偏移量，以得到偏移量，包括：
21、記錄當(dāng)前滾動(dòng)條的頂部位置以及鼠標(biāo)按下時(shí)的垂直位置；
22、當(dāng)監(jiān)聽(tīng)到滾動(dòng)條拖拽事件時(shí)，獲取當(dāng)前鼠標(biāo)的垂直位置，以得到新垂直位置；
23、根據(jù)新垂直位置與鼠標(biāo)按下時(shí)的垂直位置的差值加上當(dāng)前滾動(dòng)條的頂部位置確定滾動(dòng)條偏移量；
24、根據(jù)所述滾動(dòng)條偏移量進(jìn)行邊界檢查，以得到檢查結(jié)果；
25、根據(jù)所述檢查結(jié)果確定偏移量。
26、其進(jìn)一步技術(shù)方案為：所述根據(jù)所述偏移量計(jì)算數(shù)據(jù)偏移行數(shù)，并確定待展示數(shù)據(jù)的渲染起始位置和待展示數(shù)據(jù)的渲染結(jié)束位置，包括：
27、根據(jù)所述偏移量和所述表格可視區(qū)域高度計(jì)算偏移比例；
28、根據(jù)所述偏移比例與表格的總數(shù)據(jù)量計(jì)算需要跳過(guò)的行數(shù)，以得到數(shù)據(jù)偏移行數(shù)；
29、根據(jù)當(dāng)前展示的數(shù)據(jù)記錄數(shù)量結(jié)合所述數(shù)據(jù)偏移行數(shù)計(jì)算待展示數(shù)據(jù)的渲染起始位置；
30、根據(jù)所述待展示數(shù)據(jù)的渲染起始位置以及可顯示的數(shù)據(jù)行數(shù)確定待展示數(shù)據(jù)的渲染結(jié)束位置。
31、其進(jìn)一步技術(shù)方案為：所述采用平滑滾動(dòng)顯示已渲染的數(shù)據(jù)，包括：
32、對(duì)表格可視化區(qū)域平滑滾動(dòng)，以顯示已渲染的數(shù)據(jù)，其中，滾動(dòng)距離為行高與數(shù)據(jù)偏移行數(shù)的乘積。
33、本專利技術(shù)還提供了用于表格的網(wǎng)頁(yè)渲染裝置，包括：
34、數(shù)據(jù)獲取單元，用于獲取待展示數(shù)據(jù)；
35、計(jì)算單元，用于獲取當(dāng)前顯示窗口高度，并根據(jù)所述當(dāng)前顯示窗口高度計(jì)算表格可視區(qū)域高度以及可顯示的數(shù)據(jù)行數(shù)；
36、設(shè)置單元，用于設(shè)置緩存區(qū)；
37、監(jiān)聽(tīng)單元，用于監(jiān)聽(tīng)用戶操作窗口的事件，并確定偏移量；
38、位置確定單元，用于根據(jù)所述偏移量計(jì)算數(shù)據(jù)偏移行數(shù)，并確定待展示數(shù)據(jù)的渲染起始位置和待展示數(shù)據(jù)的渲染結(jié)束位置；
39、渲染緩存單元，用于從待展示數(shù)據(jù)的渲染起始位置進(jìn)行待展示數(shù)據(jù)的渲染，并渲染至待展示數(shù)據(jù)的渲染結(jié)束位置，并將已渲染的數(shù)據(jù)緩存于緩存區(qū)；
40、顯示單元，用于采用平滑滾動(dòng)顯示已渲染的數(shù)據(jù)。
41、本專利技術(shù)還提供了一種計(jì)算機(jī)設(shè)備，所述計(jì)算機(jī)設(shè)備包括存儲(chǔ)器及處理器，所述存儲(chǔ)器上存儲(chǔ)有計(jì)算機(jī)程序，所述處理器執(zhí)行所述計(jì)算機(jī)程序時(shí)實(shí)現(xiàn)上述的方法。
42、本專利技術(shù)還提供了一種存儲(chǔ)介質(zhì)，所述存儲(chǔ)介質(zhì)存儲(chǔ)有計(jì)算機(jī)程序，所述計(jì)算機(jī)程序被處理器執(zhí)行時(shí)實(shí)現(xiàn)上述的方法。
43、本專利技術(shù)與現(xiàn)有技術(shù)相比的有益效果是：本專利技術(shù)通過(guò)獲取待展示數(shù)據(jù)和當(dāng)前窗口高度，計(jì)算可視區(qū)域的高度以確定可顯示的數(shù)據(jù)行數(shù)；監(jiān)聽(tīng)滾動(dòng)和拖拽事件，根據(jù)偏移量計(jì)算渲染起始位置并進(jìn)行數(shù)據(jù)渲染，同時(shí)將已渲染的數(shù)據(jù)緩存；具體通過(guò)動(dòng)態(tài)計(jì)算表格高度和可視區(qū)域，結(jié)合數(shù)據(jù)行數(shù)的管理，該方法能夠僅渲染當(dāng)前可視區(qū)域內(nèi)的數(shù)據(jù)，從而顯著降低了渲染負(fù)擔(dān)，按需加載的方式減少了內(nèi)存占用與處理時(shí)間，提高了性能，此外，設(shè)置緩存區(qū)可以快速響應(yīng)用戶操作，提升交互體驗(yàn)。整體上，這種方法特別適合于大規(guī)模數(shù)據(jù)場(chǎng)景，能夠?qū)崟r(shí)更新并滿足高效交互需求。
44、下面結(jié)合附圖和具體實(shí)施例對(duì)本專利技術(shù)作進(jìn)一步描述。
本文檔來(lái)自技高網(wǎng)...【技術(shù)保護(hù)點(diǎn)】
1.用于表格的網(wǎng)頁(yè)渲染方法，其特征在于，包括：
2.根據(jù)權(quán)利要求1所述的用于表格的網(wǎng)頁(yè)渲染方法，其特征在于，所述獲取當(dāng)前顯示窗口高度，并根據(jù)所述當(dāng)前顯示窗口高度計(jì)算表格可視區(qū)域高度以及可顯示的數(shù)據(jù)行數(shù)，包括：
3.根據(jù)權(quán)利要求1所述的用于表格的網(wǎng)頁(yè)渲染方法，其特征在于，所述監(jiān)聽(tīng)用戶操作窗口的事件，并確定偏移量，包括：
4.根據(jù)權(quán)利要求3所述的用于表格的網(wǎng)頁(yè)渲染方法，其特征在于，所述當(dāng)監(jiān)聽(tīng)到鼠標(biāo)滾動(dòng)事件時(shí)，計(jì)算在可視區(qū)域內(nèi)的偏移量，以得到偏移量，包括：
5.根據(jù)權(quán)利要求3所述的用于表格的網(wǎng)頁(yè)渲染方法，其特征在于，所述當(dāng)監(jiān)聽(tīng)到滾動(dòng)條拖拽事件時(shí)，計(jì)算滾動(dòng)條的偏移量，以得到偏移量，包括：
6.根據(jù)權(quán)利要求1所述的用于表格的網(wǎng)頁(yè)渲染方法，其特征在于，所述根據(jù)所述偏移量計(jì)算數(shù)據(jù)偏移行數(shù)，并確定待展示數(shù)據(jù)的渲染起始位置和待展示數(shù)據(jù)的渲染結(jié)束位置，包括：
7.根據(jù)權(quán)利要求6所述的用于表格的網(wǎng)頁(yè)渲染方法，其特征在于，所述顯示已渲染的數(shù)據(jù)，包括：
8.用于表格的網(wǎng)頁(yè)渲染裝置，其特征在于，包括：
9.一種計(jì)
10.一種存儲(chǔ)介質(zhì)，其特征在于，所述存儲(chǔ)介質(zhì)存儲(chǔ)有計(jì)算機(jī)程序，所述計(jì)算機(jī)程序被處理器執(zhí)行時(shí)實(shí)現(xiàn)如權(quán)利要求1至7中任一項(xiàng)所述的方法。
...【技術(shù)特征摘要】
1.用于表格的網(wǎng)頁(yè)渲染方法，其特征在于，包括：
2.根據(jù)權(quán)利要求1所述的用于表格的網(wǎng)頁(yè)渲染方法，其特征在于，所述獲取當(dāng)前顯示窗口高度，并根據(jù)所述當(dāng)前顯示窗口高度計(jì)算表格可視區(qū)域高度以及可顯示的數(shù)據(jù)行數(shù)，包括：
3.根據(jù)權(quán)利要求1所述的用于表格的網(wǎng)頁(yè)渲染方法，其特征在于，所述監(jiān)聽(tīng)用戶操作窗口的事件，并確定偏移量，包括：
4.根據(jù)權(quán)利要求3所述的用于表格的網(wǎng)頁(yè)渲染方法，其特征在于，所述當(dāng)監(jiān)聽(tīng)到鼠標(biāo)滾動(dòng)事件時(shí)，計(jì)算在可視區(qū)域內(nèi)的偏移量，以得到偏移量，包括：
5.根據(jù)權(quán)利要求3所述的用于表格的網(wǎng)頁(yè)渲染方法，其特征在于，所述當(dāng)監(jiān)聽(tīng)到滾動(dòng)條拖拽事件時(shí)，計(jì)算滾動(dòng)條的偏移量，以得到偏移量，包括：
...
【專利技術(shù)屬性】
技術(shù)研發(fā)人員：姬鵬鵬，
申請(qǐng)(專利權(quán))人：華潤(rùn)數(shù)字科技有限公司，
類型：發(fā)明
國(guó)別省市：
還沒(méi)有人留言評(píng)論。發(fā)表了對(duì)其他瀏覽者有用的留言會(huì)獲得科技券。