Page data processing method and device, storage medium and electronic equipment

Abstract

Embodiments of the present application disclose a page data processing method and device, a storage medium and an electronic device. The method comprises obtaining page editing data; in response to the page editing data comprising first page data, rendering the first page data, generating a first picture according to the rendering result, wherein the first page data comprises page data rendered based on a page component, and the first picture is a skeleton picture representing the distribution and shape of the component in the first page data; generating page rendering data according to the first picture and the page editing data, wherein the page rendering data is used to render the component in the page editing data. Embodiments of the present application can effectively solve the problems of slow skeleton generation speed and poor rendering effect. The skeleton picture is highly similar to the page rendering result, thereby optimizing the visual experience, and can be applied to advertisement display, especially landing advertisement display scenarios, significantly improving the advertisement display effect.

Description

TECHNICAL FIELD

[0001] Embodiments of the present application relate to the technical field of computer, and particularly relate to a page data processing method and device, a storage medium and an electronic device. BACKGROUND

[0002] In the scenario of rendering a page corresponding to an application, components in the page can be directly rendered based on the application, which is a rendering mode based on a native application, or can be rendered based on some non-application-native components, which is a rendering mode based on page components, such as using WebView to render components in the page. The rendering mode based on the native application is faster than the rendering mode based on the page components. In order to optimize the visual experience of users in the case of rendering based on the page components, a skeleton screen can be displayed for the user before displaying the rendering result based on the page components, and then the rendering result is used to replace the skeleton screen after the rendering based on the page components is completed. However, in the related art, the skeleton screen has a slow generation speed when generated, and there is a problem that the generated skeleton screen is quite different from the final rendering result, which also reduces the visual experience of the user. SUMMARY

[0003] In order to improve the generation speed of the skeleton screen picture, reduce the impact of the generation of the skeleton screen on the submission of the page editing result, and optimize the visual experience of the user, embodiments of the present application provide a page data processing method and device, a storage medium and an electronic device.

[0004] In one aspect, a page data processing method is provided, and the method comprises:

[0005] obtaining page editing data;

[0006] in response to the case that the page editing data includes first page data, rendering the first page data, generating a first picture according to the rendering result, the first page data includes page data rendered based on page components, and the first picture is a skeleton screen picture representing the distribution and shape of components in the first page data;

[0007] generating page rendering data according to the first picture and the page editing data, the page rendering data being used to render components in the page editing data.

[0008] In another aspect, a page data processing method is provided, and the method comprises:

[0009] obtaining page rendering data;

[0010] In response to the case that the page rendering data includes first page data, a first image is extracted from the page rendering data. The first page data includes page data rendered based on page components. The first image is a skeleton screen image representing the distribution and shape of the components in the first page data. The first image is generated based on the rendering result of the first page data.

[0011] Display the first image;

[0012] Render the data on the first page to obtain the second image;

[0013] The second image is displayed.

[0014] On the other hand, embodiments of this application provide a page data processing apparatus, the apparatus comprising:

[0015] The data acquisition module is used to acquire page editing data;

[0016] The first image generation module is used to render the first page data in response to the case that the page editing data includes the first page data, and generate a first image based on the rendering result. The first page data includes page data rendered based on page components, and the first image is a skeleton screen image representing the distribution and shape of the components in the first page data.

[0017] The page rendering data generation module is used to generate page rendering data based on the first image and the page editing data, and the page rendering data is used to render the components in the page editing data.

[0018] On the other hand, embodiments of this application provide a page data processing apparatus, the apparatus comprising:

[0019] The page rendering data acquisition module is used to acquire page rendering data;

[0020] The first image extraction module is used to extract a first image from the page rendering data in response to the case that the page rendering data includes first page data. The first page data includes page data rendered based on page components. The first image is a skeleton screen image representing the distribution and shape of the components in the first page data. The first image is generated based on the rendering result of the first page data.

[0021] The first image display module is used to display the first image;

[0022] The second image rendering module is used to render the data on the first page to obtain the second image.

[0023] The second image display module is used to display the second image.

[0024] On the other hand, embodiments of this application provide a computer-readable storage medium storing at least one instruction or at least one program, wherein the at least one instruction or at least one program is loaded and executed by a processor to implement the page data processing method described above.

[0025] On the other hand, embodiments of this application provide an electronic device, including at least one processor and a memory communicatively connected to the at least one processor; wherein the memory stores instructions executable by the at least one processor, and the at least one processor implements the above-described page data processing method by executing the instructions stored in the memory.

[0026] On the other hand, embodiments of this application provide a computer program product, including a computer program or instructions, which, when executed by a processor, implement the page data processing method described above.

[0027] This application provides a page data processing method, apparatus, storage medium, and electronic device. By using a neural network, the type and distribution of components requiring rendering based on page components can be automatically identified, thereby quickly obtaining skeleton screen images and improving the generation speed of skeleton screen images. Even when the document flow corresponding to the page editing result is large, it does not hinder the submission of the page editing result. Furthermore, the skeleton screen image is highly similar to the final rendered result of the page, thus optimizing the user's visual experience. In practical use cases, this application effectively solves the problems of slow skeleton screen generation speed and poor rendering effect, optimizes the user experience, and eliminates most of the white screen time perceived by users. Attached Figure Description

[0028] To more clearly illustrate the technical solutions and advantages in the embodiments of this application or related technologies, the drawings used in the description of the embodiments or related technologies will be briefly introduced below. Obviously, the drawings described below are only some embodiments of the embodiments of this application. For those skilled in the art, other drawings can be obtained based on these drawings without creative effort.

[0029] Figure 1 This is a schematic diagram of a feasible implementation framework for the page data processing method provided in the embodiments of this application;

[0030] Figure 2 This is a flowchart illustrating the page data processing method provided in an embodiment of this application;

[0031] Figure 3 This is a flowchart of the method for generating the first image provided in the embodiments of this application;

[0032] Figure 4 This is a schematic diagram of the page rendering effect provided in the embodiments of this application;

[0033] Figure 5 This is a schematic diagram of the first image corresponding to region 2 provided in the embodiments of this application;

[0034] Figure 6 This is a flowchart of the page data processing method provided in the embodiments of this application;

[0035] Figure 7 This is a schematic diagram of the intermediate page rendering effect provided in the embodiments of this application;

[0036] Figure 8 This is a block diagram of the page data processing apparatus provided in the embodiments of this application;

[0037] Figure 9 This is a block diagram of another page data processing device provided in the embodiments of this application;

[0038] Figure 10 This is a schematic diagram of the hardware structure of a device for implementing the method provided in the embodiments of this application;

[0039] Figure 11 This is a schematic diagram of the hardware structure of a server for implementing the method provided in this application embodiment. Detailed Implementation

[0040] The technical solutions of the embodiments of this application will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some embodiments of the embodiments of this application, and not all embodiments. Based on the embodiments of this application, all other embodiments obtained by those of ordinary skill in the art without creative effort are within the protection scope of the embodiments of this application.

[0041] It should be noted that the terms "first," "second," etc., in the specification, claims, and accompanying drawings of the embodiments of this application are used to distinguish similar objects and are not necessarily used to describe a specific order or sequence. It should be understood that such data can be interchanged where appropriate so that embodiments of the present application described herein can be implemented in orders other than those illustrated or described herein. Furthermore, the terms "comprising" and "having," and any variations thereof, are intended to cover non-exclusive inclusion; for example, a process, method, system, product, or server that includes a series of steps or units is not necessarily limited to those steps or units explicitly listed, but may include other steps or units not explicitly listed or inherent to these processes, methods, products, or devices.

[0042] To make the objectives, technical solutions, and advantages disclosed in the embodiments of this application clearer, the embodiments of this application will be further described in detail below with reference to the accompanying drawings and examples. It should be understood that the specific embodiments described herein are merely illustrative of the embodiments of this application and are not intended to limit the embodiments of this application.

[0043] Hereinafter, the terms "first" and "second" are used for descriptive purposes only and should not be construed as indicating or implying relative importance or implicitly specifying the number of indicated technical features. Therefore, a feature defined as "first" or "second" may explicitly or implicitly include one or more of that feature. In the description of this embodiment, unless otherwise stated, "multiple" means two or more. To facilitate understanding of the above-described technical solutions and their resulting technical effects in the embodiments of this application, the embodiments of this application first explain the relevant technical terms:

[0044] Artificial intelligence (AI) is the theory, methods, technology, and application systems that use digital computers or machines controlled by digital computers to simulate, extend, and expand human intelligence, perceive the environment, acquire knowledge, and use that knowledge to achieve optimal results. In other words, AI is a comprehensive technology within computer science that attempts to understand the essence of intelligence and produce a new kind of intelligent machine that can react in a way similar to human intelligence. AI studies the design principles and implementation methods of various intelligent machines, enabling them to possess the functions of perception, reasoning, and decision-making.

[0045] Artificial intelligence (AI) is a comprehensive discipline encompassing a wide range of fields, including both hardware and software technologies. Fundamental AI technologies generally include sensors, dedicated AI chips, cloud computing, distributed storage, big data processing, operating / interactive systems, and mechatronics. AI software technologies primarily include computer vision, speech processing, natural language processing, as well as machine learning / deep learning, autonomous driving, and intelligent transportation.

[0046] Machine Learning (ML) is a multidisciplinary field involving probability theory, statistics, approximation theory, convex analysis, and algorithm complexity theory. It specifically studies how computers can simulate or implement human learning behavior to acquire new knowledge or skills and reorganize existing knowledge structures to continuously improve their performance. Machine learning is the core of artificial intelligence and the fundamental way to endow computers with intelligence; its applications span all areas of artificial intelligence. Machine learning and deep learning typically include techniques such as artificial neural networks, belief networks, reinforcement learning, transfer learning, inductive learning, and instructional learning.

[0047] Landing page: The page that the user is redirected to after clicking the ad. This can be the application's native page, a mini-program page within the application, or an H5 page.

[0048] H5 pages: H5 pages are pages developed based on HTML5. HTML5 is a language used to describe the content of a webpage. HTML5 is the fifth generation standard of HTML (Hypertext Markup Language) for the internet, and it is a language for building and presenting internet content, considered one of the core technologies of the internet.

[0049] Landing Page Editor: An interactive tool provided to advertisers for creating landing pages.

[0050] Native landing page: A landing page rendered natively by the application.

[0051] Native landing page components: Components rendered natively by the application, including images, videos, application downloads, etc.

[0052] Form component: A landing page component embedded in the native landing page using the WebView component approach. It is a page used to collect information. It consists of elements such as images, buttons, text, and input boxes.

[0053] WebView: WebView refers to a web page view component, which is a type of page component that can be embedded in mobile devices to enable hybrid front-end development.

[0054] Skeleton Screen: A skeleton screen is a placeholder that shows the general structure of a page to the user before the page data is loaded. Once the data is loaded, the skeleton screen is hidden and the actual data is displayed.

[0055] Document flow: HTML document flow refers to the rule that all elements in the document flow are automatically arranged from left to right (non-block-level elements) and from top to bottom (block-level elements) during the calculation of layout and typesetting in HTML.

[0056] Object detection: The problem of object detection is to find the location of objects in a given image and label the object's category.

[0057] FAST RCNN is an object detection algorithm proposed by Kaiming He et al. in 2015.

[0058] In scenarios based on page component rendering, it's often necessary to first initialize the page components, then load the data for rendering based on those components, and finally complete the rendering. This process takes significantly longer than native application rendering. Related technologies utilize skeleton screens to optimize the user's visual experience and reduce waiting anxiety. In other words, after page editing, when the edit result is submitted, a skeleton screen image is generated based on the submitted edit result. This skeleton screen image is then embedded into the page editing result to obtain the page rendering data. During rendering, the skeleton screen image is first extracted from the page rendering data and displayed directly. Then, the page is rendered in the background, and the rendered result replaces the skeleton screen image.

[0059] To obtain a skeleton screen, related technologies require traversing all document stream nodes of the data to be rendered during the submission of page editing results to determine the shape and position of placeholders, thereby generating the skeleton screen image. However, when the document stream is large, the performance of traversal, query, and calculation will be severely degraded, thus hindering the submission of page editing results. Furthermore, if the component distribution is complex, the generated skeleton screen image will differ significantly from the actual rendering result, also affecting the user's visual experience.

[0060] To improve the speed of skeleton screen image generation, reduce the impact of skeleton screen generation on page editing result submission, and optimize the user's visual experience, this application provides a page data processing method. By using a neural network, the type and distribution of components that need to be rendered based on page components can be automatically identified, thereby quickly obtaining skeleton screen images and improving the generation speed. Even when the document flow corresponding to the page editing result is large, it does not hinder the submission of the page editing result. Furthermore, the skeleton screen image is highly similar to the final rendered result of the page, thus optimizing the user's visual experience.

[0061] This application's embodiments can be widely applied to various scenarios requiring page rendering. For example, it can be applied to page rendering on a server or client, to various applications, and to application-based mini-programs or H5 pages. This application does not limit the type of application; for example, it can be social, communication, e-commerce, gaming, office, or advertising applications. This application also does not limit the type of page; for example, it can be a game page, an advertising page, or a survey page. Taking an advertising page as an example, the page data in this application's embodiments can be data used to generate an advertising page, and rendering this page data can generate an advertising page. Specifically, the advertising page can be a landing page.

[0062] This application's embodiments may involve cloud technology. Cloud technology refers to a hosting technology that unifies hardware, software, network, and other resources within a wide area network (WAN) or local area network (LAN) to achieve data computation, storage, processing, and sharing. Cloud technology is a general term for network technology, information technology, integration technology, management platform technology, and application technology applied based on the cloud computing business model. It can form resource pools, be used on demand, and is flexible and convenient. Cloud computing technology will become an important support. The backend services of technical network systems require a large amount of computing and storage resources, such as video websites, image websites, and many portal websites. With the rapid development and application of the internet industry, in the future, every item may have its own identification mark, which will need to be transmitted to the backend system for logical processing. Data of different levels will be processed separately, and various industry data will all require strong system support, which can only be achieved through cloud computing.

[0063] The methods provided in this application embodiment can also involve blockchain, meaning that the methods provided in this application embodiment can be implemented based on blockchain, or the data involved in the methods provided in this application embodiment can be stored based on blockchain, or the executing entity of the methods provided in this application embodiment can be located in blockchain. Blockchain is a new application model of computer technologies such as distributed data storage, peer-to-peer transmission, consensus mechanisms, and encryption algorithms. Essentially, a blockchain is a decentralized database, a chain of data blocks linked using cryptographic methods. Each data block contains information about a batch of network transactions, used to verify the validity of the information (anti-counterfeiting) and generate the next block. A blockchain can include a blockchain underlying platform, a platform product service layer, and an application service layer.

[0064] The underlying blockchain platform can include processing modules such as user management, basic services, smart contracts, and operational monitoring. The user management module is responsible for managing the identity information of all blockchain participants, including maintaining public and private key generation (account management), key management, and maintaining the correspondence between user real identities and blockchain addresses (access management). Furthermore, under authorization, it monitors and audits transactions of certain real identities and provides risk control rule configuration (risk control audit). The basic services module is deployed on all blockchain node devices to verify the validity of business requests. After consensus is reached on valid requests, they are recorded in storage. For a new business request, the basic services first perform interface adaptation parsing and authentication (interface adaptation), and then encrypt the business information through a consensus algorithm (consensus management). After encryption, the data is transmitted completely and consistently to the shared ledger (network communication) and recorded and stored. The smart contract module is responsible for contract registration, issuance, triggering, and execution. Developers can define contract logic using a programming language and publish it to the blockchain (contract registration). According to the contract terms, the key or other events are invoked to trigger execution and complete the contract logic. It also provides functions for contract upgrades and cancellations. The operation monitoring module is mainly responsible for deployment, configuration modification, contract settings, cloud adaptation, and real-time status visualization output during product release, such as alarms, monitoring network conditions, and monitoring the health status of node devices.

[0065] The platform's product service layer provides the basic capabilities and implementation frameworks for typical applications. Developers can leverage these basic capabilities, along with the specific characteristics of their business needs, to implement blockchain-based business logic. The application service layer provides blockchain-based application services to business stakeholders.

[0066] Please see Figure 1 , Figure 1 This is a schematic diagram illustrating a feasible implementation framework for the page data processing method provided in the embodiments of this specification, such as... Figure 1 As shown, this implementation framework may include at least a first terminal device 01, a server 02, and a second terminal device 03. The server 02 can send page rendering data to the first terminal device 01, and the first terminal device 01 performs rendering based on the page rendering data. The second terminal device 03 can edit the page and transmit the page editing data to the server 02, whereby the server 02 generates page rendering data.

[0067] Specifically, the second terminal device 03 uploads page editing data to the server 02, and the server 02 obtains the page editing data. In response to the case where the page editing data includes first page data, the server renders the first page data and generates a first image based on the rendering result. The first page data includes page data rendered based on page components, and the first image is a skeleton screen image representing the distribution and shape of the components in the first page data. Based on the first image and the page editing data, page rendering data is generated, which is used to render the components in the page editing data.

[0068] The first terminal device 01 can request page rendering data from the server 02. In response to the case where the page rendering data includes first page data, a first image is extracted from the page rendering data. The first page data includes page data rendered based on page components. The first image is a skeleton screen image representing the distribution and shape of the components in the first page data. The first image is generated based on the rendering result of the first page data. The first image is displayed. The first page data is rendered to obtain a second image. The second image is displayed.

[0069] In this application, the first terminal device 01 and the second terminal device 03 may include, but are not limited to, mobile phones, computers, intelligent voice interaction devices, smart home appliances, and in-vehicle terminals. The embodiments of this invention can be applied to various scenarios, including but not limited to cloud technology, artificial intelligence, smart transportation, assisted driving, video media, instant messaging, data processing, and network interaction. The aforementioned pages may include, but are not limited to, advertising pages, landing pages, virtual item activity pages, and survey pages.

[0070] The following describes a page data processing method according to an embodiment of this application, which can be applied to... Figure 1 Server 02 in the middle. Figure 2 This illustration shows a flowchart of a page data processing method according to an embodiment of this application. The embodiment provides the method operation steps described in the embodiments or flowcharts, but based on conventional or non-inventive methods, more or fewer operation steps may be included. The order of steps listed in the embodiments is merely one possible execution order among many and does not represent the only possible execution order. In actual systems, terminal devices, or server products, the method can be executed sequentially according to the embodiments or drawings, or in parallel (e.g., in a parallel processor or multi-threaded processing environment). The above method may include:

[0071] S101. Obtain page editing data.

[0072] Specifically, a page editing interface can be displayed on the second terminal device 03. This page editing interface is used to edit components rendered based on page components or components rendered based on native applications. For example, various components rendered based on page components or components rendered based on native applications can be added or deleted, or corresponding edits can be performed on these components. In one embodiment, the page editing interface can be a landing page editor.

[0073] After editing is complete, the user can trigger controls in the page editing interface to issue a trigger command, thereby transmitting the edited page data to server 02. Server 02 then retrieves the page editing data.

[0074] In this embodiment, the page editing data may include first page data or second page data. The first page data includes page data rendered based on page components, and the second page data includes page data rendered based on the native application. For example, in a scenario where a landing ad page is displayed in application A, the advertiser edits the landing ad page through a landing ad page editor. Some components in the landing ad page can be rendered directly by application A, and the page data corresponding to these components is the second page data. Other components in the landing ad page are form components that need to be rendered based on WebView, and the page data corresponding to these components is the first page data.

[0075] S102. In response to the case that the page editing data includes first page data, the first page data is rendered, and a first image is generated based on the rendering result. The first page data includes page data rendered based on page components, and the first image is a skeleton screen image representing the distribution and shape of the components in the first page data.

[0076] If the page editing data includes the first page data, it means that page rendering depends on page components. The initialization of page components and the rendering process based on them are time-consuming. To reduce user anxiety and improve user experience during this process, a skeleton screen image can be displayed to the user at the page location corresponding to the first page data. After the first page data is rendered, the rendered result replaces the skeleton screen image. This skeleton screen image is the first image that needs to be generated in step S102 of this application.

[0077] In related technologies, the method for generating the first image relies on traversing and parsing the document stream, a process that is time-consuming, especially when the document stream data volume is large. To improve the generation speed of the first image, this application first renders the first page data and then generates the first image based on the rendering result. Please refer to [reference needed]. Figure 3It shows a flowchart of the method for generating the first image, the method including:

[0078] S1021. Perform feature extraction on the image representing the above rendering result to obtain the feature information corresponding to the above image.

[0079] This application does not limit the method of feature extraction. For example, neural networks can be used for feature extraction, such as feature pyramids, convolutional neural networks, fast convolutional neural networks, or recurrent convolutional neural networks. This application does not limit the neural network used for feature extraction.

[0080] S1022. Perform target recognition processing on the above feature information to obtain at least one target, the target including category information and location information.

[0081] This application does not limit the target recognition method; one-stage or two-stage target recognition algorithms from related technologies can be used. Specifically, target recognition can be based on FAST RCNN, which is implemented based on a deep neural network. Targets identified by FAST RCNN can be represented in the form of anchor boxes, where each anchor box represents a target, and the position information of the anchor box corresponds to the position information of the target, and the category information of the anchor box corresponds to the category information of the target.

[0082] S1023. Based on the category information of each target and the location information of each target, generate a placeholder element corresponding to each target.

[0083] Specifically, based on the category information of each target, the corresponding placeholder type information can be obtained. The placeholder type information represents the shape of the placeholder element corresponding to the category information. Taking the landing ad page component rendered by WebView in the landing ad page as an example, the correspondence between the component type and the shape of the placeholder element can be referred to Table 1.

[0084] Table 1

[0085] Class Placeholder element type information Picture Does not occupy a full line Input box Occupies a full line Text Occupies a full line, continuous Button Does not occupy a full line, with animation

[0086] For example, if a target's category is "image," then a placeholder element corresponding to that target is obtained, which does not fill a full row. For each of the above targets, a placeholder element corresponding to each target is generated based on the placeholder type information and the position information of each target.

[0087] S1024. Generate the first image based on the placeholder elements of each of the above targets.

[0088] Please refer to Figure 4, which shows a schematic diagram of a page rendering effect. In this diagram, the component in area 1 is a component rendered based on the application; that is, the page data corresponding to area 1 is the second page data. The component in area 2 is a component rendered based on page components; that is, the page data corresponding to area 2 is the first page data. The first image generated for the first page data corresponding to area 2 can be found in [reference needed]. Figure 5 It is obvious that for Figure 4 Components that need to be rendered based on page components in Figure 5 Replace it with the corresponding placeholder element, and Figure 5 and Figure 4 Region 2 in the data also shows a high degree of similarity, and the components in Region 2 are similar to... Figure 5 The corresponding placeholder elements in the text have a high degree of consistency in position and shape.

[0089] S103. Based on the first image and the page editing data, generate page rendering data, which is used to render the components in the page editing data.

[0090] Specifically, the first image can be embedded in the page editing data, such as in the first page data, and then page rendering data can be generated. In this embodiment, steps S1021 and S1022 can be implemented based on the first network and the second network, respectively. In one embodiment, the first network and the second network can be jointly trained, and the training method includes:

[0091] S201. Obtain a sample image carrying label information, wherein the label information represents the category information and position information of the components in the sample image, and the category information includes image type, input box type, button type or text type.

[0092] In this application embodiment, category information can be defined in conjunction with the actual scenario. Taking a landing ad page scenario as an example, the page elements rendered based on page components in the landing ad page scenario generally include images, input boxes, text, and buttons. Therefore, the category information corresponding to the page elements included in the sample image can be image type, input box type, text type, or button type. This application embodiment does not limit the number and source of sample images. In one embodiment, 100 page images of the above four types of page elements can be obtained, and each page image can be used as the above sample image. Each of the above page elements in the sample image can be labeled with the corresponding category information, and the location information corresponding to the page element can be labeled according to the area where the page element is located.

[0093] S202. Input the above sample images into the first network for feature extraction to obtain the sample feature information corresponding to the above sample images.

[0094] S203. Input the above sample feature information into the second network for target recognition processing to obtain the sample target recognition result.

[0095] S204. Based on the differences between the above sample target recognition results and the above label information, optimize the parameters of the above first network and the above second network.

[0096] This application does not limit the specific optimization method; for example, optimization can be performed based on gradient descent, stochastic gradient descent, least squares, etc. The embodiments of this application also do not limit the stopping condition for optimization; for example, they can limit the number of optimizations or the difference threshold corresponding to the aforementioned difference. For example, optimization stops when the number of optimizations reaches the threshold or the difference is less than the threshold. The embodiments of this application do not limit the number of optimizations threshold or the difference threshold. For example, the number of optimizations threshold can be 10000, and the difference threshold can be 0.1.

[0097] This application embodiment also provides a page data processing method, applied to the aforementioned first terminal device, such as... Figure 6 As shown, the above method includes:

[0098] S301. Obtain page rendering data.

[0099] This application embodiment can generate page rendering data on the server based on the interaction between the second terminal device and the server, and request the aforementioned page rendering data from the server during the actual use of the first terminal device. Taking an advertisement playback scenario as an example, when a user triggers an advertisement playback control on the second terminal device, the second terminal device can be triggered to request the page rendering data corresponding to the advertisement.

[0100] S302. In response to the case that the page rendering data includes first page data, extract a first image from the page rendering data, wherein the first page data includes page data rendered based on page components, and the first image is a skeleton screen image representing the distribution and shape of the components in the first page data; the first image is generated based on the rendering result of the first page data.

[0101] If the page rendering data contains first page data that needs to be rendered based on page components, then extract the first image from the aforementioned page rendering data.

[0102] S303. Display the first image mentioned above.

[0103] S304. Render the data on the first page to obtain the second image.

[0104] The system displays the first image and can render the first page data in the background to obtain the second image. This background processing can include initializing the WebView component, loading resources from the first page data, and rendering components from the first page data.

[0105] S305. Display the second image mentioned above.

[0106] This application does not limit the specific method of displaying the second image. For example, the second image can be displayed at the display position of the first image, so that the second image covers the first image. Alternatively, the second image can be displayed after the first image is hidden.

[0107] In this embodiment of the application, the method may further include rendering the second page data in response to the case where the page rendering data includes the second page data, wherein the second page data includes page data rendered based on the native application.

[0108] In this embodiment, the processing procedures for the case where the page rendering data contains first page data and the processing procedures for the case where the page rendering data contains second page data can be performed in parallel without affecting each other. That is, if the page rendering data contains both first and second page data, the first image is displayed, the second page data is rendered based on the native application, and the first page data is rendered based on the page components. After the first page data is rendered, the second image is displayed, and the first image becomes invisible after the second image is displayed. This completes the transition from the skeleton screen image to the actual page, and this process has no impact on the page rendered based on the native application.

[0109] Please refer to Figure 7 It shows a schematic diagram of the intermediate effect of page rendering. Figure 7 The intermediate effect for page rendering. Figure 4 It represents the final effect of page rendering. Figure 7 Region 1 is rendered directly, and region 2 displays the first image. After the second image is rendered, it is used to replace the first image for display, thus obtaining the desired result. Figure 4 The final effect of page rendering.

[0110] This application provides a page data processing method. By using a neural network, the type and distribution of components that need to be rendered based on page components can be automatically identified, thereby quickly obtaining skeleton screen images and improving the generation speed of skeleton screen images. Even when the document flow corresponding to the editing result is large, it does not hinder the submission of the editing result. Furthermore, the skeleton screen image is highly similar to the final rendered result of the page, thus optimizing the user's visual experience. In practical use cases, this application effectively solves the problems of slow skeleton screen generation speed and poor rendering effect, optimizes the user experience, and eliminates most of the white screen time perceived by users.

[0111] Please refer to Figure 8 This diagram illustrates a block diagram of a page data processing apparatus according to this embodiment, the apparatus comprising:

[0112] The data acquisition module 101 is used to acquire page editing data.

[0113] The first image generation module 102 is used to render the first page data in response to the case that the page editing data includes the first page data, and generate a first image based on the rendering result. The first page data includes page data rendered based on page components, and the first image is a skeleton screen image representing the distribution and shape of the components in the first page data.

[0114] The page rendering data generation module 103 is used to generate page rendering data based on the first image and the page editing data, and the page rendering data is used to render the components in the page editing data.

[0115] In one embodiment, the first image generation module 102 is configured to perform the following operations:

[0116] Feature extraction is performed on the image representing the above rendering result to obtain the feature information corresponding to the above image;

[0117] The above feature information is processed for target recognition to obtain at least one target, which includes category information and location information.

[0118] Based on the category information of each target and the location information of each target, generate a placeholder element corresponding to each target.

[0119] The first image is generated based on the placeholder elements for each of the above targets.

[0120] In one embodiment, the first image generation module 102 is used to perform the following operation: based on the category information of each target, obtain the placeholder type information corresponding to each target, wherein the placeholder type information represents the shape of the placeholder element corresponding to the category information.

[0121] Based on the above placeholder type information and the position information of each target, a placeholder element corresponding to each target is generated.

[0122] In one embodiment, the first image generation module 102 is configured to perform the following operations:

[0123] Obtain a sample image carrying label information, wherein the label information represents the category information and position information of the components in the sample image, and the category information includes image type, input box type, button type or text type;

[0124] The above sample images are input into the first network for feature extraction to obtain the sample feature information corresponding to the above sample images;

[0125] The above sample feature information is input into the second network for target recognition processing to obtain the sample target recognition result;

[0126] Based on the differences between the above sample target recognition results and the above label information, the parameters of the above first network and the above second network are optimized;

[0127] The first network is used to perform the feature extraction operation on the image representing the rendering result, and the second network is used to perform the target recognition processing operation on the feature information.

[0128] In one embodiment, the edit data acquisition module 101 is used to perform the following operations:

[0129] Display the page editing interface, which is used to edit components rendered based on page components or components rendered based on native applications;

[0130] In response to the trigger command for the aforementioned page editing interface, the aforementioned page editing data is obtained. The aforementioned page editing data includes the aforementioned first page data or second page data. The aforementioned second page data includes page data rendered based on the native application.

[0131] Specifically, the page data processing apparatus disclosed in this application and the corresponding method embodiments described above are both based on the same inventive concept. For details, please refer to the method embodiments, which will not be repeated here.

[0132] Please refer to Figure 9 This diagram illustrates a block diagram of a page data processing apparatus according to this embodiment, the apparatus comprising:

[0133] The page rendering data acquisition module 201 is used to acquire page rendering data.

[0134] The first image extraction module 202 is used to extract a first image from the page rendering data in response to the case that the page rendering data includes first page data. The first page data includes page data rendered based on page components. The first image is a skeleton screen image representing the distribution and shape of the components in the first page data. The first image is generated based on the rendering result of the first page data.

[0135] The first image display module 203 is used to display the aforementioned first image.

[0136] The second image rendering module 204 is used to render the data from the first page to obtain the second image.

[0137] The second image display module 205 is used to display the aforementioned second image.

[0138] In one embodiment, the apparatus further includes a native rendering module for rendering the second page data in response to the inclusion of second page data in the page rendering data, wherein the second page data includes page data rendered based on native application rendering.

[0139] In one embodiment, the second image display module 205 is used to display the second image at the display position of the first image, such that the second image covers the first image; or, to display the second image after hiding the first image.

[0140] Specifically, the page data processing apparatus disclosed in this application and the corresponding method embodiments described above are both based on the same inventive concept. For details, please refer to the method embodiments, which will not be repeated here.

[0141] This application also provides a computer program product or computer program that includes computer instructions stored in a computer-readable storage medium. A processor of a computer device reads the computer instructions from the computer-readable storage medium and executes the computer instructions, causing the computer device to perform the page data processing method described above.

[0142] This application also provides a computer-readable storage medium that can store multiple instructions. These instructions are adaptable for a processor to load and execute the page data processing method described in this application.

[0143] In one embodiment, the above-mentioned page data processing method includes:

[0144] Get page editing data;

[0145] In response to the case that the page editing data includes the first page data, the first page data is rendered, and a first image is generated based on the rendering result. The first page data includes page data rendered based on page components, and the first image is a skeleton screen image representing the distribution and shape of the components in the first page data.

[0146] Based on the first image and the page editing data, page rendering data is generated. This page rendering data is used to render the components in the page editing data.

[0147] In one embodiment, generating the first image based on the rendering result includes:

[0148] Feature extraction is performed on the image representing the above rendering result to obtain the feature information corresponding to the above image;

[0149] The above feature information is processed for target recognition to obtain at least one target, which includes category information and location information.

[0150] Based on the category information of each target and the location information of each target, generate a placeholder element corresponding to each target.

[0151] The first image is generated based on the placeholder elements for each of the above targets.

[0152] In one embodiment, generating a placeholder element corresponding to each target based on the category information and location information of each target includes:

[0153] Based on the category information of each target, the placeholder type information corresponding to each target is obtained, and the placeholder type information represents the shape of the placeholder element corresponding to the category information.

[0154] Based on the above placeholder type information and the position information of each target, a placeholder element corresponding to each target is generated.

[0155] In one embodiment, the above method further includes:

[0156] Obtain a sample image carrying label information, wherein the label information represents the category information and position information of the components in the sample image, and the category information includes image type, input box type, button type or text type;

[0157] The above sample images are input into the first network for feature extraction to obtain the sample feature information corresponding to the above sample images;

[0158] The above sample feature information is input into the second network for target recognition processing to obtain the sample target recognition result;

[0159] Based on the differences between the above sample target recognition results and the above label information, the parameters of the above first network and the above second network are optimized;

[0160] The first network is used to perform the feature extraction operation on the image representing the rendering result, and the second network is used to perform the target recognition processing operation on the feature information.

[0161] In one embodiment, obtaining page editing data includes:

[0162] Display the page editing interface, which is used to edit components rendered based on page components or components rendered based on native applications;

[0163] In response to the trigger command for the aforementioned page editing interface, the aforementioned page editing data is obtained. The aforementioned page editing data includes the aforementioned first page data or second page data. The aforementioned second page data includes page data rendered based on the native application.

[0164] In one embodiment, the above-mentioned page data processing method includes:

[0165] Get page rendering data;

[0166] In response to the case that the page rendering data includes first page data, a first image is extracted from the page rendering data. The first page data includes page data rendered based on page components. The first image is a skeleton screen image representing the distribution and shape of the components in the first page data. The first image is generated based on the rendering result of the first page data.

[0167] The first image above is displayed;

[0168] Render the data from the first page to obtain the second image;

[0169] The second image above is shown.

[0170] In one embodiment, the above method further includes;

[0171] In response to the case where the aforementioned page rendering data includes second page data, the aforementioned second page data is rendered, including page data rendered based on the native application.

[0172] In one embodiment, displaying the second image includes:

[0173] The second image is displayed at the display position of the first image, such that the second image covers the first image; or, the second image is displayed after the first image is hidden.

[0174] Furthermore, Figure 10 A schematic diagram of a hardware structure for implementing the method provided in the embodiments of this application is shown. This device can participate in or include the apparatus or system provided in the embodiments of this application. Figure 10 As shown, device 10 may include one or more processors 102 (shown as 102a, 102b, ..., 102n in the figure) 102 (processor 102 may include, but is not limited to, a microprocessor MCU or a programmable logic device FPGA, etc.), a memory 104 for storing data, and a transmission device 106 for communication functions. In addition, it may also include: a display, an input / output interface (I / O interface), a universal serial bus (USB) port (which may be included as one of the ports of the I / O interface), a network interface, a power supply, and / or a camera. Those skilled in the art will understand that... Figure 10 The structure shown is for illustrative purposes only and does not limit the structure of the electronic device described above. For example, device 10 may also include a... Figure 10 The more or fewer components shown, or having the same Figure 10 The different configurations shown.

[0175] It should be noted that the aforementioned one or more processors 102 and / or other data processing circuits are generally referred to herein as "data processing circuits". These data processing circuits may be embodied, in whole or in part, in software, hardware, firmware, or any other combination thereof. Furthermore, the data processing circuits may be a single, independent processing module, or may be integrated, in whole or in part, into any other element within the device 10 (or mobile device). As involved in the embodiments of this application, the data processing circuits serve as a processor control mechanism (e.g., selection of a variable resistor termination path connected to an interface).

[0176] The memory 104 can be used to store software programs and modules of application software, such as the program instructions / data storage device corresponding to the method described in the embodiments of this application. The processor 102 executes various functional applications and data processing by running the software programs and modules stored in the memory 104, thereby implementing the page data processing method described above. The memory 104 may include high-speed random access memory, and may also include non-volatile memory, such as one or more magnetic storage devices, flash memory, or other non-volatile solid-state memory. In some instances, the memory 104 may further include memory remotely located relative to the processor 102, and these remote memories can be connected to the device 10 via a network. Examples of such networks include, but are not limited to, the Internet, corporate intranets, local area networks, mobile communication networks, and combinations thereof.

[0177] The transmission device 106 is used to receive or send data via a network. Specific examples of the network described above may include a wireless network provided by the communication provider of device 10. In one example, the transmission device 106 includes a Network Interface Controller (NIC), which can connect to other network devices via a base station to communicate with the Internet. In another example, the transmission device 106 may be a radio frequency (RF) module used for wireless communication with the Internet.

[0178] The display may be, for example, a touchscreen liquid crystal display (LCD) that allows a user to interact with the user interface of device 10 (or a mobile device).

[0179] Please refer to Figure 11 This diagram illustrates the structure of a server according to an embodiment of the present invention. The server is used to implement the server-side page data processing method provided in the above embodiment. Specifically, the server structure may include the test data processing device described above. The server 800 can vary significantly due to different configurations or performance, and may include one or more central processing units (CPUs) 822 (e.g., one or more processors) and a memory 832, and one or more storage media 830 (e.g., one or more mass storage devices) for storing application programs 842 or data 844. The memory 832 and storage media 830 may be temporary or persistent storage. The program stored in the storage media 830 may include one or more modules (not shown), each module including a series of instruction operations on the server. Furthermore, the CPU 822 may be configured to communicate with the storage media 830 and execute the series of instruction operations in the storage media 830 on the server 800. Server 800 may also include one or more power supplies 826, one or more wired or wireless network interfaces 850, one or more input / output interfaces 858, and / or one or more operating systems 841, such as Windows Server™, Mac OSX™, Unix™, Linux™, FreeBSD™, etc. The steps performed in the above method embodiments can be based on this... Figure 11 The server structure shown.

[0180] It should be noted that the order of the embodiments described above is merely for descriptive purposes and does not represent the superiority or inferiority of the embodiments. Furthermore, the above description focuses on specific embodiments of this application. Other embodiments are within the scope of the appended claims. In some cases, the actions or steps described in the claims can be performed in a different order than that shown in the embodiments and still achieve the desired result. Additionally, the processes depicted in the drawings do not necessarily require a specific or sequential order to achieve the desired result. In some implementations, multitasking and parallel processing are also possible or may be advantageous.

[0181] The embodiments in this application are described in a progressive manner. Similar or identical parts between embodiments can be referred to mutually. Each embodiment focuses on describing the differences from other embodiments. In particular, the device and server embodiments are basically similar to the method embodiments, so the descriptions are relatively simple; relevant parts can be referred to the descriptions of the method embodiments.

[0182] Those skilled in the art will understand that all or part of the steps of the above embodiments can be implemented by hardware or by a program instructing related hardware. The program can be stored in a computer-readable storage medium, such as a read-only memory, a disk, or an optical disk.

[0183] The above description is only a preferred embodiment of the present application and is not intended to limit the present application. Any modifications, equivalent substitutions, improvements, etc., made within the spirit and principles of the present application should be included within the protection scope of the present application.

Claims

1. A method for processing page data, characterized in that, The method includes: Get page editing data; In response to the case that the page editing data includes first page data, the first page data is rendered, and feature information is extracted from the image representing the rendering result; target recognition processing is performed on the feature information to obtain at least one target, the target including category information and position information; the shape of a placeholder element is obtained according to the category information of each target; a corresponding placeholder element is generated according to the shape and position information of the placeholder element; a first image is generated according to each placeholder element, the first page data is page data rendered based on page components, and the first image is a skeleton screen image representing the distribution and shape of the components in the first page data; Based on the first image and the page editing data, page rendering data is generated, which is used to render the components in the page editing data.

2. The method according to claim 1, characterized in that, The method further includes: Obtain a sample image carrying label information, wherein the label information represents the category information and position information of the components in the sample image, and the category information includes image type, input box type, button type or text type; The sample image is input into the first network for feature extraction to obtain the sample feature information corresponding to the sample image; The sample feature information is input into the second network for target recognition processing to obtain the sample target recognition result; Based on the difference between the sample target recognition results and the label information, optimize the parameters of the first network and the second network; The first network is used to perform the operation of extracting features from the image representing the rendering result, and the second network is used to perform the operation of target recognition processing on the feature information.

3. The method according to claim 1, characterized in that, The acquisition of page editing data includes: Display a page editing interface, which is used to edit components rendered based on page components or components rendered based on native applications; In response to a trigger command on the page editing interface, the page editing data is obtained, the page editing data including the first page data or the second page data, the second page data including page data rendered based on the native application.

4. A method for processing page data, characterized in that, The method includes: Get page rendering data; In response to the case that the page rendering data includes first page data, a first image is extracted from the page rendering data. The first page data is page data rendered based on page components, and the first image is a skeleton screen image representing the distribution and shape of the components in the first page data. Display the first image; Render the data on the first page to obtain the second image; Display the second image; The first image is generated using the following method: The first page data is rendered, and feature information is extracted from the image representing the rendering result. The feature information is then processed for target recognition to obtain at least one target, which includes category information and location information. The shape of a placeholder element is obtained based on the category information of each target. A corresponding placeholder element is generated based on the shape and location information of the placeholder element. A first image is generated based on each placeholder element.

5. The method according to claim 4, characterized in that, The method further includes; In response to the case that the page rendering data includes second page data, the second page data is rendered, the second page data including page data rendered based on the native application.

6. The method according to claim 4 or 5, characterized in that, The display of the second image includes: The second image is displayed at the display position of the first image, such that the second image covers the first image; or, the second image is displayed after the first image is hidden.

7. A page data processing device, characterized in that, The device includes: The data acquisition module is used to acquire page editing data; A first image generation module is configured to, in response to the case that the page editing data includes first page data, render the first page data, extract features from the image representing the rendering result to obtain feature information; perform target recognition processing on the feature information to obtain at least one target, the target including category information and position information; obtain the shape of a placeholder element based on the category information of each target; generate a corresponding placeholder element based on the shape and position information of the placeholder element; and generate a first image based on each placeholder element, wherein the first page data is page data rendered based on page components, and the first image is a skeleton screen image representing the distribution and shape of the components in the first page data; The page rendering data generation module is used to generate page rendering data based on the first image and the page editing data, and the page rendering data is used to render the components in the page editing data.

8. A page data processing device, characterized in that, The device includes: The page rendering data acquisition module is used to acquire page rendering data; The first image extraction module is used to extract a first image from the page rendering data in response to the case that the page rendering data includes first page data. The first page data is page data rendered based on page components, and the first image is a skeleton screen image representing the distribution and shape of the components in the first page data. The first image display module is used to display the first image; The second image rendering module is used to render the data on the first page to obtain the second image. The second image display module is used to display the second image; The first image is generated using the following method: The first page data is rendered, and feature information is extracted from the image representing the rendering result. The feature information is then processed for target recognition to obtain at least one target, which includes category information and location information. The shape of a placeholder element is obtained based on the category information of each target. A corresponding placeholder element is generated based on the shape and location information of the placeholder element. A first image is generated based on each placeholder element.

9. A computer-readable storage medium, characterized in that, The computer-readable storage medium stores at least one instruction or at least one program, which is loaded and executed by a processor to implement a page data processing method as described in any one of claims 1 to 3, or a page data processing method as described in any one of claims 4 to 6.

10. An electronic device, characterized in that, The method includes at least one processor and a memory communicatively connected to the at least one processor; wherein the memory stores instructions executable by the at least one processor, and the at least one processor implements a page data processing method as described in any one of claims 1 to 3, or a page data processing method as described in any one of claims 4 to 6, by executing the instructions stored in the memory.

11. A computer program product, comprising a computer program or instructions, characterized in that, When the computer program or instructions are executed by a processor, they implement a page data processing method as described in any one of claims 1 to 3, or a page data processing method as described in any one of claims 4 to 6.

Images