本技術(shù)涉及計(jì)算機(jī)，特別涉及一種頁(yè)面實(shí)現(xiàn)方法、裝置、電子設(shè)備及存儲(chǔ)介質(zhì)。

背景技術(shù)：

1、vue是一種前端框架，它以數(shù)據(jù)驅(qū)動(dòng)和組件化的思想構(gòu)建，用于幫助開(kāi)發(fā)者開(kāi)發(fā)用戶界面。當(dāng)頁(yè)面結(jié)構(gòu)較為復(fù)雜時(shí)，直接創(chuàng)建和修改vue中的真實(shí)dom節(jié)點(diǎn)會(huì)嚴(yán)重拖慢前端性能，因此，vue在2.0版本引入了虛擬dom節(jié)點(diǎn)。當(dāng)虛擬dom節(jié)點(diǎn)的屬性被更新時(shí)，會(huì)觸發(fā)vue的diff算法校驗(yàn)，即先比對(duì)新舊虛擬dom節(jié)點(diǎn)的差異，然后，只更新實(shí)際變化的部分。

2、通常，vue的diff算法校驗(yàn)不會(huì)消耗過(guò)多的資源，但是，當(dāng)單個(gè)頁(yè)面的交互控件數(shù)量過(guò)多時(shí)，如果修改其中一個(gè)交互控件的屬性，由于vue的數(shù)據(jù)綁定特性，會(huì)觸發(fā)大量的diff算法校驗(yàn)，導(dǎo)致前端性能下降，甚至出現(xiàn)頁(yè)面卡頓和假死的情況，十分影響用戶體驗(yàn)。

技術(shù)實(shí)現(xiàn)思路

1、為了解決上述現(xiàn)有技術(shù)中的問(wèn)題，本技術(shù)實(shí)施例提供了一種頁(yè)面實(shí)現(xiàn)方法、裝置、電子設(shè)備及存儲(chǔ)介質(zhì)，用以提高前端性能，從而避免出現(xiàn)頁(yè)面卡頓和假死的情況。

2、第一方面，本技術(shù)實(shí)施例提供了一種頁(yè)面實(shí)現(xiàn)方法，所述方法包括：

3、基于綁定至多個(gè)交互控件的數(shù)據(jù)，生成模擬節(jié)點(diǎn)樹(shù)對(duì)象；所述模擬節(jié)點(diǎn)樹(shù)對(duì)象記錄有所述多個(gè)交互控件的控件屬性；

4、根據(jù)所述模擬節(jié)點(diǎn)樹(shù)對(duì)象在頁(yè)面中渲染多個(gè)模擬控件，所述多個(gè)模擬控件為所述多個(gè)交互控件樣式的文本顯示框，所述多個(gè)模擬控件與所述多個(gè)交互控件一一對(duì)應(yīng)；

5、響應(yīng)針對(duì)任一目標(biāo)模擬控件的觸發(fā)操作，在所述模擬節(jié)點(diǎn)樹(shù)對(duì)象記錄的多個(gè)交互控件的控件屬性中，確定所述目標(biāo)模擬控件對(duì)應(yīng)的目標(biāo)交互控件的目標(biāo)控件屬性；

6、根據(jù)所述目標(biāo)控件屬性在頁(yè)面中渲染對(duì)應(yīng)的所述目標(biāo)交互控件。

7、在一種可能的實(shí)施方式中，所述控件屬性包括控件類(lèi)型，所述根據(jù)所述目標(biāo)控件屬性在頁(yè)面中渲染對(duì)應(yīng)的所述目標(biāo)交互控件，包括：

8、確定所述目標(biāo)交互控件的控件類(lèi)型；

9、根據(jù)所述目標(biāo)交互控件的控件類(lèi)型在頁(yè)面中渲染對(duì)應(yīng)的所述目標(biāo)交互控件。

10、在一種可能的實(shí)施方式中，根據(jù)所述目標(biāo)交互控件的控件類(lèi)型在頁(yè)面中渲染對(duì)應(yīng)的所述目標(biāo)交互控件，包括：

11、若所述目標(biāo)交互控件為input控件，則使用input事件獲取輸入值，并根據(jù)所述輸入值在頁(yè)面中渲染對(duì)應(yīng)的所述目標(biāo)交互控件；

12、若所述目標(biāo)交互控件為select控件，則使用虛擬加載的方式在頁(yè)面中渲染對(duì)應(yīng)的所述目標(biāo)交互控件。

13、在一種可能的實(shí)施方式中，所述使用虛擬加載的方式在頁(yè)面中渲染對(duì)應(yīng)的所述目標(biāo)交互控件，包括：

14、在所述綁定至多個(gè)交互控件的數(shù)據(jù)中，確定所述select控件中的下拉列表中的目標(biāo)備選項(xiàng)對(duì)應(yīng)的第一待顯示數(shù)據(jù)；所述目標(biāo)備選項(xiàng)為所述下拉列表中預(yù)設(shè)數(shù)量的備選項(xiàng)；

15、根據(jù)所述第一待顯示數(shù)據(jù)，渲染所述select控件中的下拉列表中的目標(biāo)備選項(xiàng)。

16、在一種可能的實(shí)施方式中，所述渲染所述select控件中的下拉列表中的目標(biāo)備選項(xiàng)之后，所述方法還包括：

17、響應(yīng)針對(duì)所述select控件的滾動(dòng)操作，在所述綁定至多個(gè)交互控件的數(shù)據(jù)中，確定所述下拉列表中的待顯示備選項(xiàng)對(duì)應(yīng)的第二待顯示數(shù)據(jù)；

18、根據(jù)所述第二待顯示數(shù)據(jù)，渲染所述select控件中的下拉列表中的待顯示備選項(xiàng)。

19、在一種可能的實(shí)施方式中，所述根據(jù)所述目標(biāo)控件屬性在頁(yè)面中渲染對(duì)應(yīng)的所述目標(biāo)交互控件之后，所述方法還包括：

20、響應(yīng)于釋放所述目標(biāo)交互控件的操作，或者，響應(yīng)于觸發(fā)提交事件的操作，在所述綁定至多個(gè)交互控件的數(shù)據(jù)中，確定綁定至所述目標(biāo)交互控件的目標(biāo)數(shù)據(jù)；

21、根據(jù)所述目標(biāo)數(shù)據(jù)，更新所述模擬節(jié)點(diǎn)樹(shù)對(duì)象。

22、在一種可能的實(shí)施方式中，所述根據(jù)所述目標(biāo)數(shù)據(jù)，更新所述模擬節(jié)點(diǎn)樹(shù)對(duì)象之后，所述方法還包括：

23、根據(jù)更新后的所述模擬節(jié)點(diǎn)樹(shù)對(duì)象重新渲染所述目標(biāo)模擬控件以替換所述目標(biāo)交互控件。

24、第二方面，本技術(shù)實(shí)施例提供了一種頁(yè)面實(shí)現(xiàn)裝置，所述裝置包括：

25、模擬單元，用于基于綁定至多個(gè)交互控件的數(shù)據(jù)，生成模擬節(jié)點(diǎn)樹(shù)對(duì)象；所述模擬節(jié)點(diǎn)樹(shù)對(duì)象記錄有所述多個(gè)交互控件的控件屬性；

26、根據(jù)所述模擬節(jié)點(diǎn)樹(shù)對(duì)象在頁(yè)面中渲染多個(gè)模擬控件，所述多個(gè)模擬控件為所述多個(gè)交互控件樣式的文本顯示框，所述多個(gè)模擬控件與所述多個(gè)交互控件一一對(duì)應(yīng)；

27、渲染單元，用于響應(yīng)針對(duì)任一目標(biāo)模擬控件的觸發(fā)操作，在所述模擬節(jié)點(diǎn)樹(shù)對(duì)象記錄的多個(gè)交互控件的控件屬性中，確定所述目標(biāo)模擬控件對(duì)應(yīng)的目標(biāo)交互控件的目標(biāo)控件屬性；

28、根據(jù)所述目標(biāo)控件屬性在頁(yè)面中渲染對(duì)應(yīng)的所述目標(biāo)交互控件。

29、在一種可能的實(shí)施方式中，所述渲染單元，具體用于：

30、確定所述目標(biāo)交互控件的控件類(lèi)型；

31、根據(jù)所述目標(biāo)交互控件的控件類(lèi)型在頁(yè)面中渲染對(duì)應(yīng)的所述目標(biāo)交互控件。

32、在一種可能的實(shí)施方式中，所述渲染單元，具體用于：

33、若所述目標(biāo)交互控件為input控件，則使用input事件獲取輸入值，并根據(jù)所述輸入值在頁(yè)面中渲染對(duì)應(yīng)的所述目標(biāo)交互控件；

34、若所述目標(biāo)交互控件為select控件，則使用虛擬加載的方式在頁(yè)面中渲染對(duì)應(yīng)的所述目標(biāo)交互控件。

35、在一種可能的實(shí)施方式中，所述渲染單元，具體用于：

36、在所述綁定至多個(gè)交互控件的數(shù)據(jù)中，確定所述select控件中的下拉列表中的目標(biāo)備選項(xiàng)對(duì)應(yīng)的第一待顯示數(shù)據(jù)；所述目標(biāo)備選項(xiàng)為所述下拉列表中預(yù)設(shè)數(shù)量的備選項(xiàng)；

37、根據(jù)所述第一待顯示數(shù)據(jù)，渲染所述select控件中的下拉列表中的目標(biāo)備選項(xiàng)。

38、在一種可能的實(shí)施方式中，所述渲染單元，還用于：

39、響應(yīng)針對(duì)所述select控件的滾動(dòng)操作，在所述綁定至多個(gè)交互控件的數(shù)據(jù)中，確定所述下拉列表中的待顯示備選項(xiàng)對(duì)應(yīng)的第二待顯示數(shù)據(jù)；

40、根據(jù)所述第二待顯示數(shù)據(jù)，渲染所述select控件中的下拉列表中的待顯示備選項(xiàng)。

41、在一種可能的實(shí)施方式中，所述渲染單元，還用于：

42、響應(yīng)于釋放所述目標(biāo)交互控件的操作，或者，響應(yīng)于觸發(fā)提交事件的操作，在所述綁定至多個(gè)交互控件的數(shù)據(jù)中，確定綁定至所述目標(biāo)交互控件的目標(biāo)數(shù)據(jù)；

43、根據(jù)所述目標(biāo)數(shù)據(jù)，更新所述模擬節(jié)點(diǎn)樹(shù)對(duì)象。

44、在一種可能的實(shí)施方式中，所述渲染單元，還用于：

45、根據(jù)更新后的所述模擬節(jié)點(diǎn)樹(shù)對(duì)象重新渲染所述目標(biāo)模擬控件以替換所述目標(biāo)交互控件。

46、第三方面，本技術(shù)實(shí)施例提供了一種電子設(shè)備，包括存儲(chǔ)器和處理器，所述存儲(chǔ)器上存儲(chǔ)有可在所述處理器上運(yùn)行的計(jì)算機(jī)程序，當(dāng)所述計(jì)算機(jī)程序被所述處理器執(zhí)行時(shí)，實(shí)現(xiàn)第一方面頁(yè)面實(shí)現(xiàn)方法中任一項(xiàng)所述的方法。

47、第四方面，本技術(shù)實(shí)施例提供了一種計(jì)算機(jī)可讀存儲(chǔ)介質(zhì)，所述計(jì)算機(jī)可讀存儲(chǔ)介質(zhì)內(nèi)存儲(chǔ)有計(jì)算機(jī)程序，所述計(jì)算機(jī)程序被處理器執(zhí)行時(shí)，實(shí)現(xiàn)第一方面頁(yè)面實(shí)現(xiàn)方法中任一項(xiàng)所述的方法。

48、本技術(shù)實(shí)施例提供的技術(shù)方案至少帶來(lái)以下有益效果：

49、本技術(shù)實(shí)施例提供的一種頁(yè)面實(shí)現(xiàn)方法、裝置、電子設(shè)備及存儲(chǔ)介質(zhì)，可以呈現(xiàn)給用戶模擬成交互控件樣式的模擬控件，該模擬控件為文本顯示框，當(dāng)用戶觸發(fā)模擬控件時(shí)，再渲染交互控件替換模擬控件。由于模擬控件的渲染速度遠(yuǎn)遠(yuǎn)高于交互控件的渲染速度，因此，呈現(xiàn)給用戶模擬控件，再根據(jù)用戶針對(duì)任一目標(biāo)模擬控件的觸發(fā)操作，渲染該目標(biāo)模擬控件對(duì)應(yīng)的目標(biāo)交互控件，在單一頁(yè)面上每次僅有一個(gè)占用資源較多的交互控件，可以有效的提升前端性能。