Method, apparatus, and medium for webpage data processing

Abstract

This disclosure relates to a method, apparatus, electronic device, and medium for webpage data processing. The method can be applied to the field of front-end development. The method includes: receiving a webpage access request; obtaining a target webpage file from a server based on the webpage access request, the target webpage file carrying information including: background page information and element identifiers of elements to be loaded; displaying the background page information to obtain a basic webpage; obtaining a corresponding target element from the server based on the element identifiers of the elements to be loaded; and loading and displaying the target element within the basic webpage to obtain a target webpage. Based on the splitting of the webpage, by displaying the basic webpage and updating the display of each webpage element in real time, it is possible to ensure fast webpage display and normal display effects, effectively reducing white screen waiting time and helping to improve user experience.

Description

TECHNICAL FIELD

[0001] The present disclosure relates to the technical field of front-end development, and particularly relates to a webpage data processing method and device, electronic equipment and medium. BACKGROUND

[0002] In the development process of an application (APP) of a terminal device, in order to dynamically change a page in real time and avoid updating the APP, a webpage application is often developed by using a web technology.

[0003] However, compared with a native development page, due to the reasons such as the need of downloading and rendering of a webpage from a server, when a terminal device downloads and renders a complex page, a white screen waiting or an abnormal display often occurs, resulting in a poor user experience. SUMMARY

[0004] In order to solve the above technical problems or at least partially solve the above technical problems, embodiments of the present disclosure provide a webpage data processing method and device, electronic equipment and medium.

[0005] In a first aspect, embodiments of the present disclosure provide a webpage data processing method. The webpage data processing method comprises: receiving a webpage access request; obtaining a target webpage file from a server according to the webpage access request, wherein the target webpage file carries information including: background page information, and element identifier of an element to be loaded; displaying according to the background page information to obtain a basic webpage; obtaining a corresponding target element from the server according to the element identifier of the element to be loaded; and loading and displaying the target element in the basic webpage to obtain a target webpage.

[0006] According to embodiments of the present disclosure, the target webpage file further carries total quantity information of the elements to be loaded; wherein the obtaining of the corresponding target element from the server according to the element identifier of the element to be loaded comprises: creating a plurality of threads according to the total quantity information of the elements to be loaded; allocating respective element identifiers of elements to be loaded to the plurality of threads to obtain a corresponding relationship; and based on the corresponding relationship, each thread obtains a respective target element from the server according to the respective element identifier of the element to be loaded.

[0007] According to embodiments of the present disclosure, the information carried by the target webpage file further includes loading position information of the elements to be loaded; wherein the loading and displaying of the target element in the basic webpage to obtain the target webpage comprises: loading and displaying the target element in the basic webpage according to the loading position information of the elements to be loaded to obtain the target webpage.

[0008] According to an embodiment of the present disclosure, the element identifier is a unique identifier generated by operation according to the webpage address information and the element information, and is used to distinguish the elements.

[0009] In a second aspect, embodiments of the present disclosure provide a webpage data processing method. The webpage data processing method comprises: receiving a webpage file deployment package; performing element and background webpage splitting processing on one or more webpage files in the webpage file deployment package to obtain a background webpage file and webpage elements; wherein the background webpage file carries information including: background page information and element identifiers of to-be-loaded elements; when a webpage access request of a terminal device requesting to obtain a target webpage file is received, sending the corresponding background webpage file to the terminal device; and when an element acquisition request of the terminal device requesting to obtain a target element is received, sending the corresponding webpage element to the terminal device.

[0010] According to an embodiment of the present disclosure, the element and background webpage splitting processing on the one or more webpage files in the webpage file deployment package to obtain the background webpage file and the webpage elements comprises: for each webpage file in the one or more webpage files in the webpage file deployment package, performing parsing on a current webpage file to obtain element information of each element contained in the current webpage file; performing operation according to webpage address information of the current webpage file and the element information to generate an element identifier corresponding to each element; storing the elements in the one or more webpage files based on the element identifiers to obtain stored webpage elements; and replacing the elements contained in the one or more webpage files with the corresponding element identifiers to obtain the background webpage file.

[0011] According to an embodiment of the present disclosure, the performing parsing on the current webpage file to obtain the element information of each element contained in the current webpage file comprises: performing code syntax parsing on the current webpage file to obtain a syntax parsing result; finding each element contained in the webpage file row by row in the syntax parsing result according to element key information including at least one of a containing tag, a name or an attribute; and extracting the element information of each element contained in the webpage file.

[0012] According to an embodiment of the present disclosure, in addition to the performing parsing on the current webpage file to obtain the element information of each element contained in the current webpage file, the method further comprises: obtaining loading position information of each element contained in the current webpage file according to the syntax parsing result.

[0013] According to an embodiment of the present disclosure, the performing operation according to the webpage address information of the current webpage file and the element information to generate the element identifier corresponding to each element comprises: splicing a hash value of the webpage address information and the element information of each element to generate the element identifier corresponding to each element.

[0014] According to the embodiment of the present disclosure, the splitting processing of the one or more web files in the web file deployment package is performed on the elements and the background web page to obtain the background web file and the web element, and further includes: determining total quantity information of the elements contained in the current web file; and writing the total quantity information into a header file of the background web file.

[0015] In a third aspect, an embodiment of the present disclosure provides a web data processing apparatus. The web data processing apparatus includes a request receiving module, a web file obtaining module, a display module, and an element obtaining module. The request receiving module is configured to receive a web access request. The web file obtaining module is configured to obtain a target web file from a server according to the web access request, the target web file carrying information including background page information and element identifier of an element to be loaded. The display module is configured to display according to the background page information to obtain a basic web page. The element obtaining module is configured to obtain a corresponding target element from the server according to the element identifier of the element to be loaded. The display module is further configured to load and display the target element in the basic web page to obtain a target web page.

[0016] In a fourth aspect, an embodiment of the present disclosure provides a web data processing apparatus. The web data processing apparatus includes a deployment package receiving module, a splitting processing module, a file sending module, and an element sending module. The deployment package receiving module is configured to receive a web file deployment package uploaded by a user. The splitting processing module is configured to perform splitting processing of one or more web files in the web file deployment package on elements and a background web page to obtain a background web file and a web element, wherein the background web file carries information including background page information and element identifier of an element to be loaded. The file sending module is configured to send the corresponding background web file to a terminal device in a case where a web access request of the terminal device requesting to obtain a target web file is received. The element sending module is configured to send the corresponding web element to the terminal device in a case where an element obtaining request of the terminal device requesting to obtain a target element is received.

[0017] In a fifth aspect, an embodiment of the present disclosure provides an electronic device. The electronic device includes a processor, a communication interface, a memory, and a communication bus, wherein the processor, the communication interface, and the memory complete communication with each other through the communication bus; the memory is configured to store a computer program; and the processor is configured to execute the web data processing method stored in the memory.

[0018] In a sixth aspect, the embodiments of the present disclosure provide a computer readable storage medium. The computer readable storage medium stores a computer program. The computer program is executed by a processor to implement the method for webpage data processing.

[0019] The above technical solutions provided by the embodiments of the present disclosure have at least some or all of the following advantages:

[0020] By splitting the webpage file into elements and background webpage, when responding to the webpage access request, the target webpage file obtained is a background webpage file, which includes background page information and element identifiers to be loaded. The display is further performed according to the background page information, and a basic webpage is obtained. The instant display of the basic webpage (which can have a preset style, such as a preset pattern and color) can avoid the white screen phenomenon and improve the user experience. The target elements corresponding to the element identifiers of the elements to be loaded are further obtained from the server, and the target elements are loaded and displayed in the basic webpage to obtain a target webpage. Through the display of the basic webpage and the real-time loading and updating display of each webpage element in the basic webpage, the webpage can be quickly displayed and the display effect is normal, which effectively reduces the white screen waiting time and helps to improve the user experience. BRIEF DESCRIPTION OF DRAWINGS

[0021] The accompanying drawings, which are incorporated herein and form part of the specification, illustrate embodiments consistent with the present disclosure and, together with the description, further serve to explain the principles of the present disclosure.

[0022] In order to more clearly illustrate the technical solutions in the embodiments of the present disclosure or the prior art, the accompanying drawings needed to be used in the embodiments or related description will be briefly introduced. Obviously, those skilled in the art can obtain other drawings from these drawings without creative labor.

[0023] Figure 1 The system architecture of the method for webpage data processing suitable for an embodiment of the present disclosure is schematically shown;

[0024] Figure 2 The flowchart of the method for webpage data processing according to an embodiment of the present disclosure is schematically shown;

[0025] Figure 3 The detailed implementation flowchart of operation S204 according to an embodiment of the present disclosure is schematically shown;

[0026] Figure 4 The flowchart of the method for webpage data processing according to another embodiment of the present disclosure is schematically shown;

[0027] Figure 5AA detailed implementation flowchart of operation S402 according to an embodiment of the present disclosure is schematically shown;

[0028] Figure 5B A detailed implementation flowchart of operation S402 according to another embodiment of the present disclosure is schematically shown;

[0029] Figure 6A A schematic diagram of an interaction process between a front-end display device side and a back-end service side in a method of webpage data processing according to an embodiment of the present disclosure is schematically shown;

[0030] Figure 6B An implementation scenario schematic diagram of the method of webpage data processing according to an embodiment of the present disclosure is schematically shown;

[0031] Figure 7 A structural block diagram of an apparatus of webpage data processing according to an embodiment of the present disclosure is schematically shown;

[0032] Figure 8 A structural block diagram of an apparatus of webpage data processing according to an embodiment of the present disclosure is schematically shown; and

[0033] Figure 9 A structural block diagram of an electronic device provided by an embodiment of the present disclosure is schematically shown. DETAILED DESCRIPTION

[0034] At present, some ways are to solve the white screen waiting problem by using offline cache. Specifically, the webpage is cached to the local of the mobile phone, and when the page needs to be opened, the webpage is directly read from the local, thereby reducing the network request time. However, the above method still has the following problems to be solved: (1) When the webpage is changed, the core logic still needs to download the webpage from the server, and the optimization scenario is limited; (2) Reading from the local (I / O operation) is also a time-consuming operation, and for a more complex page, there is still a white screen waiting phenomenon on a mobile phone with poor performance.

[0035] To at least solve the problem of white screen waiting or abnormal display when the terminal device downloads and renders a complex page, embodiments of the present disclosure provide a webpage data processing method and device, an electronic device and a medium. By splitting the webpage file into elements and a basic webpage (as a background webpage), the instant display of the above-mentioned basic webpage can avoid the white screen phenomenon and improve the user experience. By displaying the basic webpage in layers and updating and displaying after loading each webpage element in the basic webpage in real time, the webpage can be quickly displayed and the display effect is normal, effectively reducing the white screen waiting time and improving the user experience. In addition, by executing the method of the present disclosure on the server side and the corresponding display terminal side, the developer does not need to change the logic of front-end development, saving the code adjustment cost of front-end developers.

[0036] In an embodiment, the webpage data processing method applicable to the front-end display device side includes: receiving a webpage access request; obtaining a target webpage file from a server according to the webpage access request, the information carried by the target webpage file including: background page information, element identifier of an element to be loaded; displaying according to the background page information to obtain a basic webpage; obtaining a corresponding target element from the server according to the element identifier of the element to be loaded; and loading and displaying the target element in the basic webpage to obtain a target webpage.

[0037] In an embodiment, the webpage data processing method applicable to the back-end service side includes: receiving a webpage file deployment package; splitting one or more webpage files in the webpage file deployment package into elements and background webpages to obtain a background webpage file and webpage elements; wherein the information carried by the background webpage file includes: background page information, element identifier of an element to be loaded; when receiving a webpage access request of a terminal device requesting to obtain a target webpage file, sending the corresponding background webpage file to the terminal device; when receiving an element acquisition request of the terminal device requesting to obtain a target element, sending the corresponding webpage element to the terminal device.

[0038] To make the objectives, technical solutions and advantages of the embodiments of the present disclosure clearer, the technical solutions in the embodiments of the present disclosure will be described clearly and completely below with reference to the drawings in the embodiments of the present disclosure. Obviously, the described embodiments are part of the embodiments of the present disclosure, rather than all the embodiments. Based on the embodiments in the present disclosure, all other embodiments obtained by those of ordinary skill in the art without creative labor fall within the scope of protection of the present disclosure.

[0039] Figure 1 The system architecture of the webpage data processing method applicable to the embodiments of the present disclosure is schematically shown.

[0040] Referring to Figure 1 As shown in FIG. 1, a system architecture 100 of a method for webpage data processing applicable to embodiments of the present disclosure includes terminal devices 101, 102, 103, a network 104, and a server 105.

[0041] The network 104 is a medium for providing a communication link between the terminal devices 101, 102, 103 and the server 105. The network 104 can include various connection types, such as wired, wireless communication links, or fiber optic cables, etc.

[0042] A user can use the terminal devices 101, 102, 103 to interact with the server 105 through the network 104 to receive or send messages, etc. Various communication client applications can be installed on the terminal devices 101, 102, 103, such as shopping applications, web browser applications, search applications, instant messaging tools, email clients, social platform software, etc. (only as examples).

[0043] The terminal devices 101, 102, 103 can be various electronic devices with a display screen and supporting web browsing, such as electronic devices including but not limited to: smartphones, tablet computers, notebook computers, desktop computers, smartwatches, etc.

[0044] The server 105 can be a server providing various services, such as a background management server providing service support for data processing of webpages browsed by users using the terminal devices 101, 102, 103 (only as an example). The background management server can perform data analysis and processing on received webpage access requests, and feed back the processing results (such as webpages, information, or data, etc. obtained or generated according to user requests) to the terminal devices.

[0045] It should be noted that the method for webpage data processing provided by the first embodiment of the present disclosure can generally be executed by the terminal devices 101, 102, 103, and the method for webpage data processing provided by the second embodiment of the present disclosure can generally be executed by the server 105. The server can be a conventional application server or a cloud server.

[0046] It should be understood that Figure 1 The number of terminal devices, networks, and servers in the system architecture 100 is only illustrative. According to the needs of implementation, there can be any number of terminal devices, networks, and servers.

[0047] The first exemplary embodiment of the present disclosure provides a method for webpage data processing applicable to a front-end display device side. The method can be executed by a terminal device.

[0048] Figure 2A flowchart of a method for webpage data processing is shown schematically.

[0049] Referring to Figure 2 The method for webpage data processing provided by the embodiments of the present disclosure includes the following operations: S201, S202, S203, S204, and S205.

[0050] In operation S201, a webpage access request is received.

[0051] In some implementation scenarios, a user can input webpage address information of a webpage to be accessed through a browser of a terminal device to initiate a webpage access request, or initiate a webpage access request in the form of clicking a webpage hyperlink, or initiate a webpage access request by clicking a function key on an application interface, for example, a user initiates a webpage access request for a product detail page corresponding to a product detail page button in a shopping APP. Correspondingly, a webpage access request is received on the terminal device.

[0052] In operation S202, a target webpage file is obtained from a server according to the webpage access request, and the target webpage file carries information including background page information and element identification of an element to be loaded.

[0053] The terminal device obtains a corresponding target webpage file from the server according to webpage address information carried in the webpage access request when the webpage access request is received.

[0054] On the server side, the webpage file is processed by element and background webpage splitting to obtain a background webpage file and a webpage element and store them respectively. The element includes but is not limited to an icon, a button, an input box, a picture, a title bar, a text content display box, and the like.

[0055] The target webpage file is a background webpage file stored in the server that matches the webpage access request.

[0056] The background page information is used to limit the display style of the entire page, including parameter information such as page length and width size, page spacing, page color, and page padding.

[0057] In operation S203, a basic webpage is obtained by displaying according to the background page information.

[0058] The terminal device displays according to the background page information after obtaining the target webpage file from the server to obtain a basic webpage, and the basic webpage does not contain an element to be loaded.

[0059] In operation S204, a corresponding target element is obtained from the server according to the element identification of the element to be loaded.

[0060] By means of the element identifier of the element to be loaded, the target element corresponding to the element identifier can be acquired from the server.

[0061] In operation S205, the target element is loaded and displayed in the base webpage, to obtain a target webpage.

[0062] By loading and displaying the target element in the base webpage, when all the elements to be loaded are loaded, a complete and displayed target webpage is presented on the terminal device. By means of the display updating immediately after the splitting and element loading, the webpage display effect is guaranteed, the webpage loading speed is improved, the white screen waiting time is reduced, the webpage loading process is very short, and the user has almost no perception.

[0063] In operations S201-S205, the loading and display of the page element (content) can be realized by the terminal device based on an H5 (Hyper Text Markup Language 5, 5th edition Hyper Text Markup Language) container. The H5 container increases the capability of connecting the intelligent deployment platform in the server to display the webpage on the basis of the system WebView (which can be embedded in the mobile terminal, realize the hybrid development of the front end, similar to the browser, and is used to load the webpage).

[0064] Based on operations S201-S205, by splitting the webpage file into elements and a background webpage, when responding to the webpage access request, the target webpage file acquired is the background webpage file, which includes background page information and element identifiers to be loaded. The display is further performed according to the background page information, to obtain a base webpage. The instant display of the base webpage (which can have a preset style, such as a preset pattern and color) can avoid the white screen phenomenon and improve the user experience. The target elements corresponding to the element identifiers to be loaded are further acquired from the server according to the element identifiers to be loaded, and the target elements are loaded and displayed in the base webpage, to obtain a target webpage. By displaying the base webpage and updating the display after loading each webpage element in the base webpage in real time, the webpage can be quickly displayed and the display effect is normal, the white screen waiting time is effectively reduced, and the user experience is improved.

[0065] Figure 3 A detailed implementation flowchart of operation S204 according to an embodiment of the present disclosure is schematically shown.

[0066] According to an embodiment of the present disclosure, the target webpage file further carries total quantity information of the elements to be loaded. For example, in an embodiment, the total quantity information of the elements to be loaded is located in the head file of the target webpage file.

[0067] For example, in an embodiment, in the callback method onPageFinished (web page loading is completed) of the WebView, the web page information is obtained by using the script processing method executeJs ( ), the number of elements to be parsed / split (ElementNum) is obtained from the header file, and the element identifier (Element ID) of each element is obtained, a plurality of threads are created according to the number of elements, and the web page elements corresponding to the element identifiers are downloaded in each thread. Each time a web page element (target element) is obtained, the element replacement script is executed immediately by using the executeJs ( ) method, the obtained element information is added to the web page position corresponding to the element identifier ElementID, and the display is refreshed. When all threads are executed, the entire web page is successfully displayed.

[0068] Referring to Figure 3 In the operation S204, the target element corresponding to the element identifier of the element to be loaded is obtained from the server, including the following operations: S301, S302 and S303.

[0069] In operation S301, a plurality of threads are created according to the total number of elements to be loaded.

[0070] In an embodiment, a plurality of threads are created according to the capacity M (positive integer) supported by the computing resources of the current terminal device and the total number of elements to be loaded K (positive integer), and the number of threads is min (M, K). For example, if there are 10 elements to be loaded, and the total number of threads supported by the computing resources of the current terminal device is greater than or equal to 10, then 10 threads can be created; if the total number of threads supported by the computing resources of the current terminal device is 8, then 8 threads can be created.

[0071] In operation S302, the element identifiers of the elements to be loaded corresponding to the plurality of threads are allocated to obtain a corresponding relationship.

[0072] When the total number of elements to be loaded is equal to the total number of threads created, the corresponding relationship is one-to-one, and when the total number of elements to be loaded is greater than the total number of threads created, the corresponding relationship includes: there is a thread corresponding to multiple elements to be loaded, and there is a thread or some threads corresponding to one element to be loaded.

[0073] In operation S303, based on the corresponding relationship, each thread obtains the target element corresponding to the element identifier of the element to be loaded corresponding to each thread from the server.

[0074] Each thread can independently execute the operation of obtaining the target element corresponding to each thread, thereby further improving the loading efficiency of the web page elements and shortening the web page loading time.

[0075] According to an embodiment of the present disclosure, the element identifier is a unique identifier for distinguishing each element generated by operation according to the webpage address information and the element information.

[0076] According to an embodiment of the present disclosure, the information carried by the target webpage file further includes loading position information of the to-be-loaded element.

[0077] For example, the target webpage file is a hypertext markup language (html) file or a hypertext markup (htm) file. The html / htm file carries display style information of the background webpage, including page length and width size, page spacing, page color, page padding, and other parameter information. In addition, the html / htm file also carries loading position information of the to-be-loaded element and an element identifier. For example, the html / htm file defines that element identifier 1 is loaded at position 1 of the background page, element identifier 2 is loaded at position 2 of the background page, element identifiers 3 and 4 are loaded at position 3 of the background page, and 3 and 4 are sibling elements and are placed side by side in a float manner.

[0078] In this case, in the operation S205, the target element is loaded and displayed in the basic webpage to obtain a target webpage, including: according to the loading position information of the to-be-loaded element, the target element is loaded and displayed in the basic webpage to obtain a target webpage.

[0079] When each target element is obtained from the server: element identifier 1 corresponds to element 1 (for example, a title bar), element identifier 2 corresponds to element 2 (an input box), element identifier 3 corresponds to element 3 (picture A), and element identifier 4 corresponds to element 4 (picture B), element 1 (the title bar) is loaded and displayed at position 1 of the basic webpage (for example, a position with a top margin of 20px and a width of 100%), element 2 (the input box) is loaded and displayed at position 2 of the basic webpage (for example, a position with a top margin of 200px, a left padding of 40px, and a right padding of 40px), and elements 3 (picture A) and 4 (picture B) are loaded and displayed side by side at position 3 of the basic webpage (for example, a position with a bottom margin of 30px).

[0080] A second exemplary embodiment of the present disclosure provides a webpage data processing method applicable to the backend service side. The webpage data processing method of the present embodiment can be executed by a server. In order to understand the overall information flow and data interaction process, the description of the first and second embodiments can be combined.

[0081] Figure 4 A flowchart of a method for webpage data processing is shown.

[0082] Referring to Figure 4 The method for webpage data processing provided by the embodiments of the present disclosure includes the following operations: S401, S402, S403 and S404.

[0083] In operation S401, a webpage file deployment package is received.

[0084] In an implementation scenario, a user uploads a webpage file deployment package to a server, for example, a front-end developer packs one or more webpage files developed and uploads them to the server. Correspondingly, the server side receives the webpage file deployment package uploaded by the user.

[0085] For the front-end developer, there is no change in webpage development and packaging. After the front-end developer completes webpage development on a device, the developer can directly pack the developed webpage files and upload them to the intelligent deployment platform (a functional module with webpage splitting function in the server) in the server. The intelligent deployment platform in the server implements webpage file splitting and publishing, so that the user can access the application interface or browser interface corresponding to the published webpage files, for example, by inputting a webpage access address to access the target webpage file.

[0086] In operation S402, one or more webpage files in the webpage file deployment package are subjected to element and background webpage splitting processing to obtain a background webpage file and webpage elements. The information carried by the background webpage file includes background page information and element identifier of an element to be loaded.

[0087] After receiving the webpage file deployment package uploaded by the user, the intelligent deployment platform can automatically perform webpage file splitting processing or perform webpage file splitting processing according to user requirements to obtain a background webpage file and webpage elements.

[0088] In operation S403, when a webpage access request for obtaining a target webpage file is received from a terminal device, the corresponding background webpage file is sent to the terminal device.

[0089] In operation S404, when an element access request for obtaining a target element is received from the terminal device, the corresponding webpage element is sent to the terminal device.

[0090] Based on the operations S401-S404, by performing the splitting processing operation of the webpage file on the server side, the splitting and independent storage of the background webpage file and the webpage element in the webpage file are realized, and then corresponding background webpage file or webpage element is sent in response to the webpage access request or element acquisition request, so that the terminal device can realize independent downloading and integrated display of the background webpage file and the webpage element based on the H5 container, the normal display of the complex webpage can be realized, and the webpage loading speed can be improved.

[0091] Figure 5A A detailed implementation flowchart of operation S402 according to an embodiment of the present disclosure is schematically shown.

[0092] According to an embodiment of the present disclosure, referring to Figure 5A As shown in the above operation S402, the element and background webpage splitting processing is performed on one or more webpage files in the webpage file deployment package to obtain the background webpage file and the webpage element, including the following operations: S501, S502, S503 and S504.

[0093] In operation S501, for each webpage file in the one or more webpage files in the webpage file deployment package, the current webpage file is parsed to obtain element information of each element contained in the current webpage file.

[0094] In an embodiment, the parsing and splitting processing is performed on part of the webpage files or all of the webpage files in the webpage file deployment package.

[0095] The webpage is composed of various elements (such as icons, buttons, input boxes, pictures, title bars, text content display boxes, etc.), and the html webpage file in the deployment package can be parsed using Jsoup (Java HTML parser, which can directly parse a URL address, HTML text content, etc.) or other webpage parsing methods to obtain various elements, such as the aforementioned elements (Element) 1, element 2, element 3 and element 4 described in the foregoing embodiments. The loading position information of each element in the webpage is pre-configured in each webpage file in the webpage file deployment package.

[0096] In an embodiment, the parsing of the current webpage file to obtain element information of each element contained in the current webpage file includes: performing code syntax parsing on the current webpage file to obtain a syntax parsing result; finding each element contained in the webpage file in the syntax parsing result line by line according to element key information including at least one of a tag, a name or an attribute; and extracting element information of each element contained in the webpage file.

[0097] For example, the webpage file can be parsed by a parser to obtain a syntax parsing result; the jsoup elements object supports a selector syntax similar to CSS (or jquery) to implement a very powerful and flexible search function, and the elements in the syntax parsing result can be searched based on element key information through the selector; then the element information of the elements can be extracted to a preset file location or a preset database for subsequent calling and analysis.

[0098] As an example, the syntax of the selector search can be in the following form:

[0099] tagname: find elements by tag, such as: a;

[0100] ns|tag: find elements by tag in namespace, such as: the fb|name syntax can be used to find <fb:name>Elements;

[0101] #id: Find an element by ID, such as: #logo;

[0102] .class: Find an element by class name, such as:.masthead;

[0103] [attribute]: Find elements with a certain attribute, such as: [href];

[0104] [^attr]: Find elements with a certain attribute name prefix, such as: [^data-] to find elements with HTML5 Dataset attributes;

[0105] [attr=value]: Find elements with a certain attribute value, such as: [width=500];

[0106] [attr^=value], [attr$=value], [attr*=value]: Find elements with attribute values matching the start, end, or containing a value, such as: [href* / path / ];

[0107] [attr~=regex]: Find elements with attribute values matching a regular expression, such as:

[0108] img[src~= (i)\.(png|jpe?)g];

[0109] *: This symbol will match all elements (wildcard).

[0110] You can also combine multiple selectors, or combine individual element key information (such as tag, name, or attribute) when searching.

[0111] el.class: Element + class, such as: div.masthead

[0112] el[attr]: Element + class, such as: a[href]

[0113] Any combination, such as: a[href].highlight;

[0114] ancestor child: Find child elements of a certain element, such as:.body p to find all p elements under the "body" element

[0115] parent>child: find the direct child element under a parent element, such as: div.content>p can be used to find the p element, and body>* can be used to find all direct child elements under the body tag

[0116] siblingA+siblingB: find the first sibling element B before the A element, such as: div.head+div.

[0117] In operation S502, according to the above-mentioned web page address information of the current web page file and the above-mentioned element information, the element identifier corresponding to each element is generated.

[0118] For example, the sum of the hash value of the web page address information and the hash value of the element information is used as the element identifier. The element identifier is, for example, an element ID (Element ID), and the element ID = hash (web page address information) + hash (element information). That is, the hash values of the above-mentioned web page address information and the element information of the above-mentioned each element are spliced to generate the element identifier corresponding to each element.

[0119] The element information can be at least one dimension attribute information of the element, including but not limited to: the name of the element, the size of the memory space occupied by the element, the storage path of the element, the content information of the element, etc.

[0120] In operation S503, the elements in the above-mentioned one or more web page files are stored based on the element identifier, and the stored web page elements are obtained.

[0121] In operation S504, the elements contained in the above-mentioned one or more web page files are replaced by the corresponding element identifier, and the background web page file is obtained.

[0122] The elements in the html file are deleted, and the corresponding element identifier is placed in the position of the element, thereby realizing the replacement of the element to the element identifier. By deleting the element content in the original web page file and adding the element identifier corresponding to the original element, the final obtained web page file becomes a background web page file that does not contain any element.

[0123] According to the embodiment of the present disclosure, in addition to obtaining the element information of each element contained in the current web page file by parsing the current web page file in operation S501, the loading position information of each element contained in the current web page file is also obtained according to the above-mentioned syntax analysis result. That is, in addition to obtaining the element information of each element, the loading position information of each element can also be obtained after parsing one or more files in the web page file deployment package. The above-mentioned loading position information is used to limit the loading position of the element in the web page.

[0124] In this case, the operation S205 corresponding to the first embodiment is implemented by loading and displaying the target element in the base webpage according to the loading position information of the to-be-loaded element, to obtain a target webpage.

[0125] Figure 5B A detailed implementation flowchart of the operation S402 according to another embodiment of the present disclosure is schematically shown.

[0126] According to another embodiment of the present disclosure, the operation S402 includes the operations S501-S504, and further includes the following operations: S511 and S512.

[0127] In the operation S511, total quantity information of elements contained in the current webpage file is determined.

[0128] In the operation S512, the total quantity information is written into a header file of the base webpage file.

[0129] The operation S511 can be performed after the operation S501, and according to the parsing result, the total quantity information of elements contained in the webpage file can be determined.

[0130] The operation S512 can be performed after the operation S504, for example, the total quantity information of elements obtained by parsing a specific webpage file is written into a header file of the base webpage file corresponding to the specific webpage.

[0131] For the webpage data processing method including the operations S511 and S512, in the embodiment of the webpage data processing method of the first embodiment, the detailed implementation process of the operation S204 can include the operations S301, S302 and S303, and further the webpage loading speed is improved by loading the target element in a multi-thread mode.

[0132] The overall information flow and the interaction process between the terminal device and the intelligent deployment platform of the server will be described below in combination with Figure 6A and Figure 6B

[0133] Figure 6A A schematic diagram of the interaction process between the front-end display device side and the back-end service side in the webpage data processing method according to an embodiment of the present disclosure is schematically shown. Figure 6B An implementation scenario diagram of the webpage data processing method according to an embodiment of the present disclosure is schematically shown.

[0134] Reference is made to Figure 6A ​As shown, after the front-end developer completes the webpage development on the software development device, the software project is packaged and uploaded, and the corresponding webpage file deployment package is received by the intelligent deployment platform of the server (corresponding to operation S401). The intelligent deployment platform splits the one or more webpage files in the webpage file deployment package into elements and background webpages, obtains the background webpage file and webpage elements (corresponding to operation S402), and publishes the split background webpage file. The user (application or website user) can obtain the webpage address information of the webpage to be accessed through the published information, and initiates a webpage access request by inputting the webpage address information on the terminal device. Correspondingly, the terminal device receives the webpage access request (corresponding to operation S201), and according to the webpage access request, obtains the target webpage file from the server (corresponding to operation S202), and refers to Figure 6B As shown, the display interface of the terminal device at this time is as shown in Figure 6B A As shown. Correspondingly, when the intelligent deployment platform receives the webpage access request of the terminal device requesting to obtain the target webpage file, it sends the corresponding background webpage file to the terminal device (corresponding to operation S403). The H5 container of the terminal device displays according to the background page information in the background webpage file to obtain the basic webpage (corresponding to operation S203), and the display interface is updated from I A to I B , as shown in Figure 6B I B , as the basic webpage to be displayed immediately, it is presented according to the preset style information (pattern, color, filling, size, etc.). Here, the basic webpage is shown in the style of being filled with gray color and having a wave stripe at the bottom. Then, in order to improve the loading efficiency, the terminal device further requests to obtain the target elements according to the element identifier in the target webpage file in a multi-threaded manner (corresponding to operation S204). In this state, the display interface of the corresponding terminal device is updated to I C , and in fact, the presentation effect of the display interface I C is the display effect of the basic webpage I B . Correspondingly, when the intelligent deployment platform receives the element obtaining request of the terminal device requesting to obtain the target elements, it sends the corresponding webpage elements to the terminal device (corresponding to operation S404). The terminal device integrates the obtained target elements into the basic webpage for display, and when all the target elements are integrated, the target webpage is normally displayed (corresponding to operation S205). Each time a new element is obtained, the element is integrated in the original interface and the display interface is updated, for example, in Figure 6B ​The target elements obtained in the order of time in the example include: a title bar and a picture S→a text box M→a button element B, and the corresponding obtained display interface is I D 、 E and I F , and the finally obtained target webpage is I F . The time for obtaining the elements is very short (generally in the order of milliseconds to seconds), and is basically imperceptible to the user, realizing the fast and normal display of the page and effectively solving the technical problem of white screen display. The order of return of the elements depends on the size of the elements (the size of the occupied space), the response speed of the server, the resource scheduling condition of the server, and the network state, etc.

[0135] A third example embodiment of the present disclosure provides a device for webpage data processing.

[0136] Figure 7 A structural block diagram of the device for webpage data processing according to the embodiment of the present disclosure is schematically shown.

[0137] Referring to Figure 7 , the device 700 for webpage data processing provided by the embodiment of the present disclosure includes: a request receiving module 701, a webpage file obtaining module 702, a display module 703, and an element obtaining module 704. The device 700 for webpage display can be a terminal device.

[0138] The request receiving module 701 is configured to receive a webpage access request.

[0139] The webpage file obtaining module 702 is configured to obtain a target webpage file from a server according to the webpage access request, and the information carried by the target webpage file includes: background page information and element identifier of an element to be loaded.

[0140] The display module 703 is configured to display according to the background page information to obtain a basic webpage.

[0141] The element obtaining module 704 is configured to obtain a corresponding target element from the server according to the element identifier of the element to be loaded.

[0142] The display module 703 is further configured to load and display the target element in the basic webpage to obtain a target webpage.

[0143] A fourth example embodiment of the present disclosure provides a device for webpage data processing.

[0144] Figure 8 A structural block diagram of the device for webpage data processing according to the embodiment of the present disclosure is schematically shown.

[0145] Referring to Figure 8 As shown, the device 800 for processing web page data provided by the embodiments of the present disclosure comprises a deployment package receiving module 801, a splitting processing module 802, a file sending module 803 and an element sending module 804. The device 800 for processing can be a conventional application server or a cloud server.

[0146] The deployment package receiving module 801 is configured to receive a web page file deployment package.

[0147] The splitting processing module 802 is configured to perform element and background web page splitting processing on one or more web page files in the web page file deployment package to obtain a background web page file and a web page element. The background web page file carries information including background page information and element identifier of an element to be loaded.

[0148] The file sending module 803 is configured to send the corresponding background web page file to a terminal device in the case that a web page access request of the terminal device requesting to obtain a target web page file is received.

[0149] The element sending module 804 is configured to send the corresponding web page element to the terminal device in the case that an element obtaining request of the terminal device requesting to obtain a target element is received.

[0150] In the third embodiment, any multiple of the request receiving module 701, the web page file obtaining module 702, the display module 703 and the element obtaining module 704 can be combined in one module for implementation, or any one of the modules can be split into multiple modules. Alternatively, at least part of the function of one or more of the modules can be combined with at least part of the function of other modules, and implemented in one module. At least one of the request receiving module 701, the web page file obtaining module 702, the display module 703 and the element obtaining module 704 can be at least partially implemented as a hardware circuit, such as a field programmable gate array (FPGA), a programmable logic array (PLA), a system on chip, a system on substrate, a system on package, an application specific integrated circuit (ASIC), or any other reasonable way of integrating or packaging a circuit, etc. hardware or firmware, or any one of software, hardware and firmware or any appropriate combination of several thereof. Alternatively, at least one of the request receiving module 701, the web page file obtaining module 702, the display module 703 and the element obtaining module 704 can be at least partially implemented as a computer program module which can perform corresponding functions when the computer program module is run.

[0151] In the fourth embodiment, any multiple of the deployment package receiving module 801, the splitting processing module 802, the file sending module 803 and the element sending module 804 can be combined in one module, or any one of the modules can be split into multiple modules. Alternatively, at least part of the function of one or more of the modules can be combined with at least part of the function of the other modules, and implemented in one module. At least one of the deployment package receiving module 801, the splitting processing module 802, the file sending module 803 and the element sending module 804 can be at least partially implemented as a hardware circuit, such as a field programmable gate array (FPGA), a programmable logic array (PLA), a system on chip, a system on board, a system on package, an application specific integrated circuit (ASIC), or any other reasonable way of integrating or packaging a circuit, etc. hardware or firmware, or implemented in any one of software, hardware and firmware or in a proper combination of any of them. Alternatively, at least one of the deployment package receiving module 801, the splitting processing module 802, the file sending module 803 and the element sending module 804 can be at least partially implemented as a computer program module which can perform the corresponding function when executed.

[0152] The fifth exemplary embodiment of the present disclosure provides an electronic device.

[0153] Figure 9 The structure block diagram of the electronic device provided by the embodiment of the present disclosure is schematically shown.

[0154] Referring to Figure 9 As shown in the figure, the electronic device 900 provided by the embodiment of the present disclosure includes a processor 901, a communication interface 902, a memory 903 and a communication bus 904, wherein the processor 901, the communication interface 902 and the memory 903 complete the communication among each other through the communication bus 904; the memory 903 is used for storing a computer program; the processor 901 is used for executing the program stored on the memory to realize the method for processing webpage data as described above.

[0155] The sixth exemplary embodiment of the present disclosure also provides a computer readable storage medium. The computer readable storage medium stores a computer program, and the computer program is executed by a processor to realize the method for processing webpage data as described above.

[0156] The computer readable storage medium can be included in the device / apparatus described in the above embodiments; or can exist separately without being assembled into the device / apparatus. The computer readable storage medium carries one or more programs which, when executed, realize the method according to the embodiment of the present disclosure.

[0157] According to embodiments of the present disclosure, the computer readable storage medium can be a non-transitory computer readable storage medium, for example, can include, but is not limited to, a portable computer diskette, a hard disk, a random access memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or Flash memory), a portable compact disc read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the foregoing. In the present disclosure, a computer readable storage medium can be any tangible medium that contains or stores a program, which can be used by or in connection with an instruction execution system, apparatus, or device.

[0158] It should be noted that, in the present document, relational terms such as "first" and "second", and the like can be used solely to distinguish one entity or action from another entity or action without necessarily requiring or implying any actual such relationship or order between such entities or actions. Moreover, the terms "comprises", "comprising", or any other variations thereof, are intended to cover a non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements does not include only those elements but can include other elements not expressly listed or inherent to such process, method, article, or apparatus. An element proceeded by "comprises... a" does not, without more constraints, exclude the existence of additional identical elements in the process, method, article, or apparatus that comprises the element.

[0159] The above descriptions are only specific embodiments of the present disclosure to enable a person skilled in the art to understand or implement the present disclosure. Various modifications to these embodiments will be apparent to those skilled in the art, and the general principles defined herein can be implemented in other embodiments without departing from the spirit or scope of the present disclosure. Therefore, the present disclosure will not be limited to these embodiments shown herein, but will conform to the widest scope consistent with the principles and novel features disclosed herein.< / fb:name>

Claims

1. A method of processing web page data, characterized by, The method comprises: receiving a webpage access request; obtaining a target webpage file from a server according to the webpage access request, wherein the target webpage file carries information including background page information and element identifier of an element to be loaded, and the background page information is used to define the display style of the whole independent page after splitting and element splitting; displaying according to the background page information to obtain a basic webpage, wherein the basic webpage does not contain the element to be loaded and does not display the loading position information of the element to be loaded; obtaining a corresponding target element from the server according to the element identifier of the element to be loaded; and loading and displaying the target element in the basic webpage to obtain a target webpage, wherein the basic webpage is used as a background to superimpose and integrate the target element to obtain the target webpage.

2. The method of claim 1, wherein, The target webpage file further carries total quantity information of the element to be loaded. The method further comprises: creating multiple threads according to the total quantity information of the element to be loaded; allocating the element identifier of the element to be loaded corresponding to each thread to obtain a corresponding relationship; and obtaining the target element corresponding to each thread from the server according to the element identifier of the element to be loaded corresponding to each thread based on the corresponding relationship.

3. The method of claim 1, wherein, The target webpage file further carries loading position information of the element to be loaded. The method further comprises: loading and displaying the target element in the basic webpage according to the loading position information of the element to be loaded to obtain the target webpage.

4. The method of claim 1, wherein, The element identifier is a unique identifier used to distinguish each element and is generated by performing operation on webpage address information and element information.

5. A method of processing web page data, characterized by, The method comprises: receiving a webpage file deployment package; performing element and background webpage splitting processing on one or more webpage files in the webpage file deployment package to obtain a background webpage file and a webpage element; The background webpage file carries information including background page information and element identifier of an element to be loaded, and the background page information is used to define the display style of the whole independent page after splitting and element splitting. When a webpage access request of a terminal device requesting to obtain a target webpage file is received, the corresponding background webpage file is sent to the terminal device, so that the terminal device displays the background page information to obtain a basic webpage, wherein the basic webpage does not contain the element to be loaded and does not display the loading position information of the element to be loaded. When an element obtaining request of the terminal device requesting to obtain a target element is received, the corresponding webpage element is sent to the terminal device, so that the terminal device superimposes and integrates the target element based on the background to obtain a target webpage.

6. The method of claim 5, wherein, The method further comprises: For each of the one or more web files in the web file deployment package, the current web file is parsed to obtain element information of each element contained in the current web file; According to the web address information of the current web file and the element information, an element identifier corresponding to each element is generated; The elements in the one or more web files are stored based on the element identifier to obtain stored web elements; The elements contained in the one or more web files are replaced by the corresponding element identifier to obtain a background web file.

7. The method of claim 6, wherein, The parsing of the current web file to obtain the element information of each element contained in the current web file comprises: The current web file is parsed according to the code syntax to obtain a syntax parsing result; According to the element key information containing at least one of the tags, names or attributes, each element contained in the web file is found line by line in the syntax parsing result; The element information of each element contained in the web file is extracted.

8. The method of claim 7, wherein, In addition to the parsing of the current web file to obtain the element information of each element contained in the current web file, it also comprises: According to the syntax parsing result, the loading position information of each element contained in the current web file is obtained.

9. The method of claim 6, wherein, According to the web address information of the current web file and the element information, an element identifier corresponding to each element is generated, comprising: The web address information and the hash value of the element information of each element are spliced to generate an element identifier corresponding to each element.

10. The method of claim 6, wherein, In addition to the element and background web splitting processing of the one or more web files in the web file deployment package to obtain the background web file and the web element, it also comprises: Determine the total number information of the elements contained in the current web file; Write the total number information into the header file of the background web file.

11. An apparatus for web data processing, the apparatus comprising: Comprise: Request receiving module, used for receiving a web access request; Web file obtaining module, used for obtaining a target web file from a server according to the web access request, wherein the information carried by the target web file comprises: background page information and element identifier of an element to be loaded; the background page information is used to limit the display style of the whole independent page after element splitting; Display module, used for displaying according to the background page information to obtain a basic web page; the basic web page does not contain the element to be loaded, and does not display the loading position information of the element to be loaded; Element obtaining module, used for obtaining a corresponding target element from the server according to the element identifier of the element to be loaded; The display module is further used for loading and displaying the target element in the basic web page to obtain a target web page; wherein the basic web page is superimposed and integrated with the target element to obtain the target web page.

12. An apparatus for processing web data, the apparatus comprising: Comprise: Deployment package receiving module, used for receiving a web file deployment package uploaded by a user; Splitting processing module, used for performing element and background web splitting processing on one or more web files in the web file deployment package to obtain a background web file and web elements; The background webpage file carries information including background page information and element identification of the element to be loaded, and the background page information is used to define the display style of the whole independent page after the element is split. The file sending module is configured to send the corresponding background webpage file to the terminal device when receiving a webpage access request in which the terminal device requests to acquire the target webpage file, so that the terminal device displays the basic webpage according to the background page information, and the basic webpage does not contain the element to be loaded and does not display the loading position information of the element to be loaded. The element sending module is configured to send the corresponding webpage element to the terminal device when receiving an element acquisition request in which the terminal device requests to acquire the target element, so that the terminal device obtains the target webpage by superimposing and integrating the target element with the basic webpage as a background.

13. An electronic device, comprising: The computer device comprises a processor, a communication interface, a memory and a communication bus, wherein the processor, the communication interface and the memory complete mutual communication through the communication bus. The memory is used to store a computer program. The processor is used to execute the program stored on the memory, and implement the method in any one of claims 1-10.

14. A computer-readable storage medium having stored thereon a computer program, characterized in that, The computer program is executed by the processor to implement the method in any one of claims 1-10.

Images