Prediction methods and related devices
By estimating the total rendering time of an HTML page and displaying it to the user, the problem of users not knowing the rendering task's time has been solved, thus improving the user experience.
Patent Information
- Application Number
- CN202511343150.7
- Authority / Receiving Office
- CN · China
- Patent Type
- Patents(China)
- Current Assignee / Owner
- Filing Date
- 2025-09-19
- Publication Date
- 2026-01-30
- Estimated Expiration
- 2045-09-19
AI Technical Summary
Users cannot know the rendering time of the HTML page, which increases the feeling of waiting and affects the user experience.
By estimating the time taken for each task in HTML page rendering and then weighting the time taken for multiple tasks to obtain the total estimated rendering time of the HTML page, the user can be shown this result to reduce the feeling of waiting.
It increases the user's sense of control over the rendering process, reduces the feeling of waiting, and improves the user experience.
Smart Images

Figure CN120856794B_ABST
Abstract
Description
Technical Field
[0001] This application relates to the field of web page rendering technology, and in particular to a prediction method and related apparatus. Background Technology
[0002] With the development of network technology, more and more users have become accustomed to using electronic devices to record their daily life, work and study processes, and to select data from historical records and perform rendering at any time to generate data reports or review materials in specific formats.
[0003] For example, during the learning process, users can upload questions they don't know how to answer or get wrong on third-party education platforms. Afterward, users can select multiple questions from the uploaded questions and similar questions recommended by the third-party education platform based on the user's learning status, execute Hypertext Markup Language (HTML) page rendering, and generate a PDF test paper to help users improve their learning effectiveness.
[0004] However, during the rendering process of an HTML page, users cannot know the time taken for the rendering task. Summary of the Invention
[0005] The purpose of this application is to provide a prediction method and related apparatus. By implementing this method, an electronic device can estimate the time consumption of each task in HTML page rendering, and then sum the weighted times of multiple tasks to obtain the total estimated time of HTML page rendering. This allows the electronic device to display more detailed task duration information to the user based on the total estimated time, thereby reducing the user's waiting time during the HTML page rendering process and improving the user experience.
[0006] In a first aspect, this application provides an estimation method, the method comprising: determining a webpage to be rendered, the webpage to be rendered comprising at least one sub-webpage embedded by tags; determining a target duration based on at least two of a first duration, a second duration, a third duration, and a fourth duration, the target duration being the total estimated duration for completing the rendering task corresponding to the webpage to be rendered; the first duration being the estimated time for loading the webpage resources of the at least one sub-webpage, the first duration being determined based on network signal strength and / or the quantity of various types of data in the webpage resources of the at least one sub-webpage; the second duration being the estimated time for loading the external resources contained in the webpage resources of the at least one sub-webpage, the second duration being determined based on the quantity of various types of external resources in the webpage resources of the at least one sub-webpage; the third duration being the estimated time for performing Document Object Model (DOM) parsing on the webpage to be rendered, the third duration being determined based on the total number of tags contained in the webpage resources of the at least one sub-webpage; and the fourth duration being the estimated time for rendering the webpage to be rendered, the fourth duration being determined based on the total number of tags contained in the webpage resources of the at least one sub-webpage.
[0007] In this method, electronic devices can estimate the time taken for each task in HTML page rendering and then sum the time taken for multiple tasks in a weighted manner to obtain the total estimated time for HTML page rendering. This allows the electronic devices to display more detailed task duration information to the user based on the total estimated time, thereby reducing the user's waiting time during the HTML page rendering process and improving the user experience.
[0008] Optionally, any two of the above-mentioned at least one sub-pages may be provided by different platforms, and the main page of the webpage to be rendered may be provided by a different platform than any of the above-mentioned at least one sub-pages.
[0009] Optionally, the electronic device can sum up all the durations of the first duration, second duration, third duration, and fourth duration to obtain the target duration.
[0010] Optionally, the web page resources corresponding to the aforementioned sub-web pages may include the HTML code, CSS stylesheets, JavaScript scripts, and other related resources (such as images, videos, etc.) of each sub-web page. Any two of the HTML code, CSS stylesheets, JavaScript scripts, images, and videos represent different types of data. The average time for an electronic device to load different types of data can vary, as can the average time to parse different types of data. Both the average time for loading and parsing different types of data can be obtained by the manufacturer of the electronic device through extensive experimental data before the device leaves the factory and stored in the device. The electronic device can calculate the first time based on the average time for loading different types of data and the quantity of each type of data in the aforementioned web page resources, and calculate the second time based on the average time for parsing different types of data and the quantity of each type of external resource in the aforementioned web page resources.
[0011] Optionally, the average time taken for the electronic device to parse a tag while parsing the DOM, and the average time taken to process a tag while rendering webpage content based on the DOM tree, can both be obtained by the manufacturer of the electronic device through extensive experimental data before the device leaves the factory and stored in the electronic device. The electronic device can calculate the first time based on the average time taken to parse a tag and the total number of tags in the aforementioned webpage resources, and calculate the second time based on the average time taken to process a tag and the total number of tags in the aforementioned webpage resources.
[0012] In conjunction with the first aspect, in one possible implementation, the above method further includes: displaying a prompt message, the prompt message including a target duration and / or progress information determined based on the target duration, the progress information representing the completion progress of the rendering task corresponding to the webpage to be rendered.
[0013] In this embodiment, after obtaining the target duration, the electronic device can prompt the user with an estimated total time for the rendering task of the webpage to be rendered, and / or prompt the user with the progress information of the corresponding rendering task of the webpage to be rendered based on the estimated time, so that the user has a stronger sense of control over the process of the electronic device executing the rendering task of the webpage to be rendered, thereby reducing the user's waiting time during the HTML page rendering process.
[0014] Optionally, the electronic device may only prompt the user with the estimated total time of the rendering task, i.e., the aforementioned target duration; or, the electronic device may prompt the user with the estimated total time of the rendering task, the progress bar of the rendering task, and the remaining waiting time; or, the electronic device may prompt the user with the estimated total time of the rendering task, the progress bar of the rendering task, and the progress percentage; or, the electronic device may prompt the user with the estimated total time of the rendering task, the time of each sub-task and its corresponding progress bar, and the estimated total time of each sub-task, wherein each sub-task may include web page resource loading, web page resource parsing, DOM parsing, and web page rendering.
[0015] In conjunction with the first aspect, in one possible implementation, the web page resources of the at least one sub-web page include a first resource and a second resource, wherein the first resource is a web page resource not stored in the electronic device, and the second resource is a web page resource already stored in the electronic device; the first duration is determined based on a first loading duration and a second loading duration; the first loading duration is an estimated duration for loading the first resource from the network service node, and the first loading duration is determined based on the network signal strength and / or the amount of various types of data in the web page resources of the at least one sub-web page; the second loading duration is an estimated duration for loading the second resource locally from the electronic device, and the second loading duration is determined based on the amount of various types of data in the web page resources of the at least one sub-web page.
[0016] In this embodiment, the electronic device determines whether the web page resource is stored in the electronic device's local storage space. If the required web page resource is not stored in the electronic device's local storage space, the electronic device requests the web page resource from the network service node; otherwise, the electronic device can directly load the web page resource from its local storage space. Therefore, when estimating the time consumption of the resource loading subtask, the electronic device can also estimate the loading time of the first resource and the second resource respectively.
[0017] Specifically, when estimating the loading time of the first resource, the electronic device can estimate the first loading time based on the data size of the first resource and the network signal strength (e.g., RSSI). When estimating the loading time of the second resource, the electronic device can count the total number of each type of resource in the second resource and estimate the second loading time based on the average loading time of each type of resource determined by experimental results. In this way, the electronic device can estimate the loading time of resources loaded in different ways based on the actual loading process, making the estimated time closer to the actual resource loading time.
[0018] In conjunction with the first aspect, in one possible implementation, determining the target duration based on at least two of the first duration, second duration, third duration, and fourth duration includes: determining the target duration based on a fifth duration and at least two of the first duration, second duration, third duration, and fourth duration, wherein the fifth duration is the time consumed in encapsulating the data of the at least one sub-webpage through the iframe tag.
[0019] In this embodiment, the fifth duration is the actual value obtained after the electronic device has completed the data encapsulation of at least one sub-webpage. The first, second, third, and fourth durations are all estimated values of the time consumed by the electronic device for each task before the corresponding task is executed. The electronic device, based on the fifth duration and at least two of the first, second, third, and fourth durations, determines the target duration, which allows for a global estimation of the total time consumed by the task to be rendered. Furthermore, the fifth duration can mitigate the impact of unforeseen delays and uncertainties during the webpage rendering task execution on the accuracy of the estimation results, making the estimation results more accurate.
[0020] Furthermore, by embedding each subpage in at least one of the aforementioned subpages using the iframe tag, subpages from different platforms can maintain the style and script logic of their respective webpage resources in the webpage to be rendered without conflicting with each other. Different partners can independently update their own error question resources, and the main system (i.e., the platform to which the main page of the webpage to be rendered belongs) does not need to be frequently modified due to changes in the partner's content.
[0021] In conjunction with the first aspect, in one possible implementation, the method further includes: loading the first resource from the network service node; and storing the first resource.
[0022] In this embodiment, after the first resource is loaded from the network service node for the first time, the electronic device can save the first resource to its local storage after successfully requesting the first resource. This allows the electronic device to load the resource directly from the local storage control more quickly when it needs to retrieve the resources contained in the first resource again, thereby reducing the number of times the first resource is requested in the network, reducing network request time, and thus improving the execution efficiency of the web page rendering task.
[0023] In conjunction with the first aspect, in one possible implementation, determining the target duration based on at least two of the first duration, second duration, third duration, and fourth duration includes: summing the reserved buffer duration and at least two of the first duration, second duration, third duration, and fourth duration to obtain the target duration, wherein the value of the reserved buffer duration is greater than or equal to 0.
[0024] In this embodiment, the aforementioned reserved buffer time can be considered as an additional estimated time actively added by the electronic device. This can be used to cope with unforeseen delays and uncertainties during the HTML webpage rendering process, so that when the target time is subsequently prompted to the user, it can create the feeling that the electronic device has completed the task on time, thereby improving the user experience.
[0025] Optionally, the value of the reserved buffer duration can be set to 0.
[0026] Optionally, at least two of the above-mentioned first duration, second duration, third duration, and fourth duration may not simultaneously include the third duration and the fourth duration. Optionally, at least two of the above-mentioned first duration, second duration, third duration, and fourth duration may include the larger of the third duration and the fourth duration but not the smaller value.
[0027] In conjunction with the first aspect, in one possible implementation, the main page of the webpage to be rendered is a webpage provided by an online education platform, and the at least one sub-webpage is a webpage corresponding to the question data provided by the online education platform or its partners. Before determining the webpage to be rendered, the method further includes: detecting a user's test paper determination operation, the test paper determination operation being used to generate a test paper file of a target file type based on at least one question data selected by the user; and determining the webpage corresponding to the at least one question data as the at least one sub-webpage.
[0028] In a second aspect, this application provides an electronic device comprising: one or more processors and a memory; the memory being coupled to the one or more processors, the memory being used to store computer program code, the computer program code including computer instructions, the one or more processors invoking the computer instructions to cause the electronic device to perform the method of the first aspect or any possible implementation thereof.
[0029] Thirdly, this application provides a chip system applied to an electronic device, the chip system including one or more processors, the processors being configured to invoke computer instructions to cause the electronic device to perform the methods as described in the first aspect or any possible implementation thereof.
[0030] Fourthly, this application provides a computer program product containing instructions that, when the computer program product is run on an electronic device, cause the electronic device to perform the method as described in the first aspect or any possible implementation thereof.
[0031] Fifthly, this application provides a computer-readable storage medium including instructions that, when executed on an electronic device, cause the electronic device to perform the method as described in the first aspect or any possible implementation thereof.
[0032] For the technical effects brought about by the second to fifth aspects, please refer to the introduction of the technical effects corresponding to the first aspect and the corresponding implementation methods.
[0033] By implementing the estimation method provided in this application, electronic devices can estimate the time consumed by each task in HTML page rendering separately, and then sum the time consumed by multiple tasks in a weighted manner to obtain the total estimated time for HTML page rendering. This allows electronic devices to display more detailed task duration information to users based on the total estimated time, thereby reducing the user's waiting time during the HTML page rendering process and improving the user experience. Attached Figure Description
[0034] Figure 1 (A) in this application is a user interface diagram for selecting test questions in an embodiment of the present application;
[0035] Figure 1 (B) in the figure is a user interface diagram for inputting test paper information provided in an embodiment of this application;
[0036] Figure 2 (A) in this application is a user interface diagram displayed when an electronic device performs page rendering, according to an embodiment of this application.
[0037] Figure 2 (B) in this application is a user interface diagram for displaying test paper assembly results provided in an embodiment of this application;
[0038] Figure 3 A software architecture diagram of an electronic device provided in an embodiment of this application;
[0039] Figure 4 An interactive flowchart of an HTML webpage rendering time estimation method provided in this application embodiment;
[0040] Figure 5 A flowchart illustrating a method for creating a document according to an embodiment of this application;
[0041] Figure 6 A user interface diagram provided in this application embodiment for prompting the user about the total time taken to render an HTML page;
[0042] Figure 7 A user interface diagram provided in this application embodiment for displaying the total rendering time of an HTML page, a progress bar, and the remaining waiting time to the user;
[0043] Figure 8 A user interface diagram provided in this application embodiment for displaying the total rendering time of an HTML page, a progress bar, and a progress percentage to the user;
[0044] Figure 9 (A) in this application is a user interface diagram for prompting the user with the total time taken to render an HTML page, the time taken for each sub-task, and the corresponding progress bar, according to an embodiment of this application.
[0045] Figure 9 (B) is a user interface diagram provided in this application embodiment for prompting the user with the total time taken to render an HTML page, the time taken for each sub-task, and the corresponding progress bar;
[0046] Figure 10 A network architecture diagram provided for an embodiment of this application;
[0047] Figure 11 A flowchart of a document assembly method provided for the application embodiment;
[0048] Figure 12 This is a schematic diagram of the structure of the electronic device 100 provided in the embodiments of this application. Detailed Implementation
[0049] The terminology used in the following embodiments of this application is for the purpose of describing particular embodiments only and is not intended to be limiting of this application. As used in the specification and appended claims of this application, the singular expressions “a,” “an,” “the,” “the,” “the,” and “this” are intended to include the plural expressions as well, unless the context clearly indicates otherwise. It should also be understood that the term “and / or” as used in this application refers to and includes any or all possible combinations of one or more of the listed items.
[0050] To facilitate understanding, the relevant terms involved in the embodiments of this application will be introduced below.
[0051] (1) Hypertext markup language (HTML) page rendering
[0052] HTML page rendering, also known as "web page rendering," is a common technique for embedding web page content in mobile applications. It allows applications to load and display web page content using a built-in browser engine, thus enabling the display of web pages within the application. This process typically includes several steps such as network requests, HTML parsing, and page rendering.
[0053] In web development, WebView is an important component that allows developers to embed a complete webpage or webpage view into their applications. When an application loads a webpage, it first needs to make a network request to retrieve the webpage's code and related resources. WebView, through its built-in network request module, initiates an HTTP request to the server based on the specified URL, requesting the webpage resources. The result of the network request includes the webpage's HTML code, cascading style sheets (CSS), JavaScript code, and other related resources.
[0054] After obtaining the HTML code of the webpage, Webview uses the HTML parser to identify various tags, attributes and text content in the HTML according to the HTML syntax rules, and parses the HTML code into a hierarchical tree structure, namely the Document Object Model (DOM) tree.
[0055] When encountering a CSS stylesheet, WebView uses a CSS parser to identify the various rules and properties within the stylesheet and convert them into a format that the browser can understand. After parsing, WebView applies the CSS styles to the corresponding nodes in the DOM tree, thereby controlling the styles of web page elements. If it encounters JavaScript, WebView executes these scripts. The JavaScript engine parses and executes the code within the scripts, enabling dynamic interaction and data processing on the web page.
[0056] After HTML parsing and JavaScript execution, the WebView renders the page. The rendering engine uses the DOM tree and CSS stylesheets to transform the webpage resources into images that can be displayed on the screen. The rendering process includes layout calculations, drawing, and compositing. Layout calculations determine the position and size of each element on the screen; drawing converts elements into pixels; and compositing merges multiple layers into a single image. Finally, the WebView displays the rendered result on the application's interface, allowing the user to see the webpage content.
[0057] Optionally, developers can take several optimization measures to improve Webview performance and user experience. For example, caching mechanisms can be used to reduce network requests and avoid repeatedly downloading the same resources. Asynchronous loading and lazy loading techniques can be used to optimize page loading speed. Hardware acceleration and rendering optimization techniques can also be used to improve page rendering performance. Additionally, adjusting rendering strategies and reducing page reflow can optimize page display and interactive responsiveness.
[0058] (2) Learning Space Error Notebook
[0059] Learning Space Error Notebook is a digital and intelligent online error management tool. Nowadays, many online education platforms and specialized learning software have built-in features of the Learning Space Error Notebook.
[0060] Compared to the traditional paper-based error notebook's "simple copying" approach, the Learning Space Error Notebook utilizes technology (such as photo recognition and big data analysis) to help learners more efficiently collect, analyze, categorize, and review incorrect questions, thereby precisely improving learning outcomes. Furthermore, the Learning Space Error Notebook supports intelligent categorization of questions by subject, chapter, knowledge point, and reason for error (such as "carelessness," "unclear concepts," or "inability to do the problem"). It also automatically calculates error rates, generates personalized error reports, and automatically recommends similar question types, variations, explanatory videos, and related knowledge links. Users can create their own test papers from their uploaded question sets and system-recommended question sets for regular review and to solidify their learning foundation.
[0061] (3) iframe tag
[0062] An iframe (inline frame) is a type of webpage that embeds another independent webpage within an existing one. HTML is a markup language used to control how browsers construct accessible webpages. It defines the structure of a webpage (such as headings, paragraphs, lists, images, links, etc.) and embedded content. Embedded content can include images, videos, audio, and other webpage resources embedded via iframes. <iframe> The content embedded in the `<body>` tag is isolated from the main page. The JavaScript and CSS inside the tag usually do not affect the external homepage, which provides a certain degree of security and independence.
[0063] Generally speaking, a simple iframe tag only needs the src attribute, for example, "<iframe src="https: / / www.example.com">< / iframe> The `<frame>` property can be used to specify the path to the document to be displayed in the frame (i.e., "www.example.com"), and create a very small frame with a border. To enrich the frame, other properties need to be defined, such as setting the frame's width and height using the `width` and `height` properties respectively, providing an accessible name for the frame using the `title` property to facilitate understanding of its content by assistive technologies such as screen readers, setting whether to display a border using the `frameborder` property, and imposing a series of restrictions on the content within the frame using the `sandbox` property, such as preventing form submissions and script execution, thereby enhancing security.
[0064] In summary, the iframe tag can be used to create a browsing area that supports loading external resources without affecting the main page. Through the iframe tag, web pages can load resources from different partners, and each partner can maintain the style and script logic of their own web page resources without conflicting with each other. Furthermore, the iframe tag can load content from different domains via the src attribute, and with the security sandbox mechanism (i.e., the sandbox attribute), the iframe's permissions can be restricted, ensuring the security of the main system. Different partners can independently update their own error-solving resources, and the main system does not need to be frequently modified due to changes in partner content.
[0065] Therefore, intelligent management tools like the Learning Space Error Notebook, which are used to record users' learning and life, can now use iframe tags to organize the data for each question, reserving interfaces for subsequent input of data resources from other partners, thus making the tool scalable.
[0066] (4) Task time estimate and progress information
[0067] Task time estimation refers to the process by which an electronic device estimates the time required to complete a task based on the amount of data involved and the performance information of the hardware and software used to accomplish it. For example, an electronic device can estimate the specific time required to render an HTML webpage based on one or more factors, such as the size of the webpage resources, the strength of the Wi-Fi network signal, and historical experimental data. Understandable task time estimation only provides an approximate time required for the electronic device to complete the task, and there can generally be some discrepancy between this estimate and the actual completion time.
[0068] Progress information is a common user interface element. Optionally, progress information can be displayed as a bar (i.e., a progress bar) or a ring (a progress ring). Before a task begins, the electronic device can fill the progress bar or progress ring with the same color (e.g., white). Subsequently, based on the percentage of completed work compared to the total work, or the percentage of elapsed time compared to the estimated task duration, the progress bar or progress ring will be gradually filled with a different color (e.g., black) so that the user can intuitively observe the progress or status of the task.
[0069] Understandably, displaying the estimated task time and progress bar to the user before task execution can effectively manage user expectations, reduce user anxiety and waiting during task execution on electronic devices, and indicate the device's processing status (e.g., whether it's executing normally, or whether it's stuck or crashing) and the task's progress, thus providing better control over the task's progress. This is especially true for tasks like webpage rendering. Since the front-end framework's rendering may be tightly coupled with the current UI state, and DOM operations require real-time interface context information, electronic devices cannot switch the rendering task to the background during webpage rendering; they must remain on the current screen waiting for the business logic to complete. In this situation, if the electronic device does not display the estimated task time and progress bar, the user cannot decide whether to continue waiting for the task to complete or abort the task and re-render when the device is less busy.
[0070] With the development of network technology, more and more users have become accustomed to using electronic devices to record their daily life, work and study processes, and to select data from historical records and perform rendering at any time to generate data reports or review materials in specific formats.
[0071] Figures 1-2 This example illustrates the specific process by which a user selects question resources and creates test papers on a third-party education platform.
[0072] Figure 1 (A) in the diagram is a user interface diagram for selecting test questions in an embodiment of this application. Figure 1 As shown in (A), the user interface 11 is the error correction notebook interface provided by the third-party education platform. This user interface 11 may include a status bar 111, a filter option area 112, question cards 113 and 114, a select all control 115, and a test paper creation control 116. Wherein:
[0073] The status bar 111 can include the carrier's name, time, Wi-Fi icon, signal strength, and current remaining battery power.
[0074] The filtering option area 112 may include multiple filtering options, such as subject filtering options, grade filtering options, semester filtering options, etc. Users can select one or more options to enable the electronic device to filter the questions contained in the user interface 11 so that only the questions that match the user's selected options are displayed on the current interface.
[0075] The questions displayed on question cards 113 and 114 can be questions uploaded by users to the platform, or they can be question resources recommended by third-party educational platforms based on the user's learning status (e.g., types of incorrect questions, level of mastery of various types of incorrect questions). Understandably, due to the limitations of electronic device screen size, although... Figure 1 As not shown, user interface 11 can also contain more question cards, each containing one question. Users can refresh the user interface 11 by swiping down to display question cards that are not currently displayed. In the case of the online learning platform collaborating with multiple partners, the question cards contained in user interface 11 can be provided by different partners, and all can be web resources added to user interface 11 via iframe tags. The aforementioned third-party educational platforms can load and display these web resources through their built-in browser engines.
[0076] Optionally, each question card in the user interface 11 may include a text display area and / or a view display area, a label display area, and a checkbox control. Although Figure 1 (A) is not shown. Each question is illustrated using the aforementioned question card 113 as an example. Figure 1 As shown in (A), the text display area 113a can be used to display the question stem of the questions contained in the question card 113; the view display area 113b can be used to display the image or video of the questions contained in the question card 113; understandably, not all questions will be accompanied by both text and view (e.g., some purely text questions or video questions), therefore, for some other question cards contained in the user interface 11, the question card may only contain one of the text display area or the view display area. The label display area 113c can be used to display one or more labels related to the questions in the question card 113. These labels can show the user's understanding of the questions in the question card 113, the type of questions in the question card 113, the total number of times the user has selected them for test paper creation, etc. The check control 113d can respond to the user's touch operation, such as a click operation, to make the electronic device select / deselect the question card 113, so as to confirm / deselect the questions in the electronic device as test paper creation questions. Understandably, Figure 1 The checkbox 113d shown in (A) is filled with a dark color, indicating that the question card is already selected. The user can click the checkbox 113d again to deselect the question card 113; accordingly Figure 1 The check control 114a shown in (A) is filled with a light color, indicating that the question card 114 is already unselected. The user can click the check control 114a to select the question card 114.
[0077] The select all control 115 can respond to a user's touch operation, such as a click operation, so that the electronic device selects / deselects all question cards contained in the user interface 11 (in the selected all state).
[0078] The test paper generation control 116 can be used to display the total number of question cards selected by the user, and can respond to the user's touch operation, for example... Figure 1 The click operation shown in (A) causes the electronic device to identify all the questions currently selected by the user as the questions to be used in the test paper, and first displays the test paper information input box in the user interface 11. For details, please refer to... Figure 1 User interface 11 is shown in (B) of the diagram.
[0079] Figure 1 (B) in the diagram is a user interface diagram for inputting test paper information provided in an embodiment of this application. Figure 1 As shown in (B), the test paper information input box 117 is displayed prominently on the user interface 11. Apart from this test paper information input box, other content in the user interface 11 can be blurred to highlight the test paper information input box 117. Furthermore, apart from this test paper information input box, other content in the user interface 11 may no longer be responsive to user actions (i.e., the user cannot change the number of test questions to be generated while the test paper information input box 117 is present). The test paper information input box 117 may include a grade input box 117a, a subject input box 117b, a semester input box 117c, a test paper name input box 117d, a cancel control 117e, and a confirm control 117f. It can respond to user actions, such as a click, causing the electronic device to de-display the test paper information input box 117 and return to the previous screen. Figure 1 As shown in (A) of the user interface 11, the user can reselect test questions and reassemble the test paper. The confirmation control 117f can respond to user actions, such as... Figure 1 The click operation shown in (B) causes the electronic device to render an HTML page based on the multiple questions selected by the user, and generate a test paper based on the selected questions and the information entered by the user in the test paper information input box.
[0080] Optional, although Figure 2 As not shown in the diagram, the grade input box 117a, subject input box 117b, semester input box 117c, and test paper name input box 117d can all contain drop-down options (usually displayed as a rectangle with a downward arrow (indicator)) so that users can select one or more options from a predefined list without having to manually type in the specific test paper information.
[0081] As explained above, rendering an HTML page involves multiple sub-tasks. Therefore, from the moment the user clicks the confirmation control 117f until the electronic device officially outputs the PDF exam paper, the electronic device needs a certain amount of time to complete the HTML page rendering process. This is especially true when the number of questions selected by the user is large, and the content and format of the questions are complex; the rendering time will be even longer during this process. During this process, the electronic device can display, for example... Figure 2 User interface 21 is shown in (A) of the diagram.
[0082] Optionally, in some embodiments, after the user selects a question and clicks the aforementioned test paper generation control 116, the electronic device can automatically generate the test paper information that the user needs to fill in, so the electronic device may not display the aforementioned information. Figure 1 User interface 11 shown in (B) jumps directly to Figure 2 User interface 21 is shown in (A) of the diagram.
[0083] Figure 2 (A) in the diagram is a user interface diagram displayed when an electronic device performs page rendering, according to an embodiment of this application. Figure 2 As shown in (A), the user interface 21 may include a loading prompt box 211. This loading prompt box 211 may display a loading indicator 211a and loading indication information 211b. The loading indicator 211a may be a loading animation effect, specifically displayed as a rotating circular element similar to a fan or windmill, which will continue to rotate until the task is completed. The loading indication information 211b may contain the text "Assembling volumes, please wait...". The loading indicator 211a and loading indication information 211b together provide feedback to the user, indicating that the volume assembly operation is in progress, rather than the program freezing or crashing.
[0084] After the HTML page has finished rendering, the electronic device can display the generated exam paper to the user. For details, please refer to... Figure 2 User interface 22 is shown in (B) of the diagram. Figure 2(B) in this application is a user interface diagram for displaying test paper generation results provided in an embodiment of this application. For ease of explanation, it is assumed that the test paper information entered by the user in the aforementioned grade input box 117a, subject input box 117b, semester input box 117c, and test paper name input box 117d is "Grade 1", "Chinese", "First Semester", and "20250909", respectively. Therefore, in the user interface 22, the title of the test paper 221 generated by the electronic device can be "Grade 1 Chinese First Semester 20250909". The multiple test questions selected by the user can be displayed below the title. The electronic device can arrange these test questions so that they are displayed in an orderly manner in the test paper 221. For example, test question 221a in test paper 221 can be the question in the aforementioned question card 113. The test question 221a not only contains text 221b as the stem information (corresponding to the text in the aforementioned text display area 113a), but also contains an image 221c (corresponding to the image in the aforementioned view display area 113b).
[0085] Optionally, the exam paper 221 displayed in the user interface 22 may only be a preview of the exam paper generated by the electronic device after rendering the webpage, and not a formal PDF file. The user can click the storage control 222 in the user interface 22 to have the electronic device save the exam paper 221 as a PDF file in the local storage space.
[0086] As can be seen from the above volume assembly process, during the rendering of an HTML page that organizes data using iframe tags, electronic devices can only simply indicate to the user whether the rendering task is being executed normally, but cannot indicate the execution time of the rendering task. Users can only wait for the rendering to complete without being able to grasp the specific progress of the volume assembly process. This greatly increases the user's sense of waiting, easily causing user anxiety and bringing a poor user experience.
[0087] Furthermore, unlike the time estimation for tasks such as file download / upload (electronic devices can determine the file size before downloading / uploading and directly obtain the estimated task duration based on the current network speed and file size), since electronic devices cannot determine the final file size before the HTML page is rendered, how to estimate and prompt the user about the rendering task time during HTML page rendering to reduce the user's waiting experience is an urgent problem to be solved.
[0088] To address the aforementioned issues, this application provides an estimation method and related apparatus. By implementing this method, an electronic device can estimate the time consumption of each task in HTML page rendering separately and then sum the weighted times of multiple tasks to obtain the total estimated duration of HTML page rendering. This allows the electronic device to display more detailed task duration information to the user based on the total estimated duration, thereby reducing the user's waiting time during HTML page rendering and improving the user experience.
[0089] Understandably, the estimation method provided in this application can estimate the rendering time and / or display corresponding progress information for any iframe-based webpage rendering task. Furthermore, the aforementioned rendering task can be any task within an intelligent management tool (or application) used to record user learning and life activities, including but not limited to test paper generation tasks in online education platforms, data report generation tasks in online fitness platforms, and questionnaire form generation tasks in survey platforms. For ease of explanation, the test paper generation task in an online education platform will be used as an example in subsequent embodiments.
[0090] First, the software architecture of the electronic device provided in the embodiments of this application will be introduced.
[0091] like Figure 3 As shown, the software architecture of the electronic device provided in this application may include an algorithm application layer, an algorithm framework layer, and a basic service layer. The algorithm application layer may include a webpage rendering module, a DOM parsing module, a resource request module, a data encapsulation module, and a resource parsing module. The algorithm framework layer may include an algorithm decision-making module, a resource batch loading module, and a resource storage module. The basic service layer may include a network driver module, a file management module, a database management module, and network service nodes. Wherein:
[0092] The data encapsulation module is used to encapsulate each individual webpage (such as each question card selected by the user above) through... <iframe>The tag is embedded in the application page (such as the application page provided by an online education platform), and specific technical means (such as the postMessage API) are used to link the application page to the aforementioned platform.<iframe> The embedded tags enable data communication and interaction between the platforms to which the pages belong.
[0093] The resource request module is used to request resources through...<iframe> The path of the page to which the tag is embedded requests web page resources. Network content includes the web page's HTML code, CSS stylesheets, JavaScript scripts, and other related resources. Specifically, if the web page resource is the first one requested by the resource request module, the resource request module can request the web page resource from the network service node and save it to the resource storage module upon successful request. Simultaneously, a resource version tag is added to the web page resource. This resource version tag can indicate whether the web page resource is the latest version during subsequent resource storage; if the web page resource is updated, the latest version is stored. If the requested web page content is not the first web page resource requested by the resource request module, meaning the resource storage module already stores the web page resource, the resource request module can directly retrieve the requested web page content from the resource request module.
[0094] The resource parsing module identifies external resource links (such as external CSS stylesheets, external JavaScript scripts, images, fonts, etc.) referenced in the web page resources and requests the download of these resources. Optionally, for each external link resource that needs to be downloaded, the resource request module can add it to the loading queue and assign different priorities to different resources. Among them, since CSS stylesheets will block the subsequent rendering process, the resource request module will download CSS stylesheets first, while images, fonts, etc., will not block the initial rendering of the page. Therefore, the resource request module can download images, fonts, and other resources last.
[0095] The DOM parsing module is used to identify various tags, attributes, and text content in an HTML page, and parse the HTML code into a DOM tree. Specifically, since HTML tags have a clear hierarchical relationship (nesting), the DOM parsing module can use a stack structure to process these objects. When a start tag is detected, it is pushed onto the stack and an element node is created. When an end tag is detected, it is popped from the stack. Finally, all the nodes are used to construct the DOM tree, and each element of the webpage is represented as a node in the tree. Parent-child relationships can exist between nodes.
[0096] The web page rendering module is used to convert web page resources into images that can be displayed on the screen based on the DOM tree and CSS stylesheets. The rendering process includes steps such as layout calculation, drawing, and compositing.Among them, layout calculation determines the position and size of each element on the screen, drawing converts the elements into pixels, compositing merges multiple layers into a single image, and the final rendering result can be displayed on the application's interface for users to view.
[0097] The algorithm decision module is used to obtain the time consumed by each task during the HTML page rendering process, and to perform a weighted sum of these times to obtain the total estimated time for HTML page rendering. Specifically, the algorithm decision module can send request instructions to the modules used to complete each task. After each module determines the estimated time for its corresponding task, it sends the estimated time for each task to the algorithm decision module, which then sums them up. For example, the algorithm decision module can send a request instruction to the DOM parsing module, which can then respond to the request instruction, estimate the time for DOM parsing, and return this time as the estimated time for DOM parsing to the algorithm decision module.
[0098] The resource batch loading module is used to summarize the required web page resources before the resource request module requests web page resources, and to make batch requests for the HTML code, CSS stylesheets, JavaScript scripts and other related resources of the web page contained in the network resources.
[0099] The resource storage module is used to store the web page resources already stored by the resource request module, and to provide the web page resources to the resource request module when the resource request module requests web page resources a second time.
[0100] The network driver module is used to provide electronic devices with the ability to access shared data, such as obtaining web page resources not stored in the resource storage module through a network service node.
[0101] The file management module is used to manage unstructured data stored in electronic devices, including HTML files obtained during HTML page rendering and documents generated after subsequent HTML page rendering (such as test paper files obtained after test paper assembly).
[0102] The database management module is used to manage the structured data stored in the electronic device, such as the HTML tags of the first screen content, and all the CSS styles used to render the first screen content (Above-the-Fold content).
[0103] It is understood that the division of the various modules of the above electronic device is only a logical functional division. In actual implementation, they can be fully or partially integrated into a physical entity, or they can be physically separated.For example, each of the above modules can be a separately established processing element, or can be integrated and implemented in the same chip. In addition, it can also be stored in the storage element of the controller in the form of program code and called and executed by a certain processing element of the processor. In addition, each module can be integrated together or independently implemented. Here, the processing element can be an integrated circuit chip with signal processing capabilities. In the implementation process, each step of the method provided in the subsequent embodiments or each of the above units can be completed by the integrated logic circuit in the hardware of the processor element or the instructions in the form of software. The processing element can be a general-purpose processor, such as a CPU, or can also be one or more integrated circuits configured to implement the above method, for example: one or more application-specific integrated circuits (ASICs), or one or more microprocessors (DSPs), or one or more field-programmable gate arrays (FPGAs), etc.
[0104] Based on the software architecture diagram of the electronic device shown in the foregoing Figure 3 and related descriptions, the specific method for predicting the HTML web page rendering time is described below. For details, please refer to Figure 4.
[0105] Figure 4 is an interaction flowchart of a method for predicting the HTML web page rendering time provided by an embodiment of the present application.As shown in Figure 4, the electronic device for implementing the present method may include a web page rendering module, a DOM parsing module, a resource request module, a data encapsulation module, a resource parsing module, an algorithm decision-making module, a resource storage module, a network driver module, and a network service node. The software architecture of the electronic device may refer to the software architecture shown in Figure 3前述. The method for estimating the HTML web page rendering time provided by the embodiments of the present application may include but is not limited to the following steps:
[0106] S401: The algorithm decision-making module requests the data encapsulation duration T1.
[0107] S402: The data encapsulation module returns the data encapsulation duration T1 to the algorithm decision-making module.
[0108] After the user selects the question card, enters the test paper information, and clicks the OK control (specifically, refer to the click operation on the OK control 117f shown in Figure 2前述), the rendering process of the HTML page on the electronic device officially starts. At this time, the algorithm decision-making module in the electronic device will encapsulate the question data using the iframe tag, that is, embed each selected question card (sub-page) into the application page (i.e., the main page provided by the online education platform) through the iframe tag.
[0109] For example, after the data encapsulation is completed, the source code of the main page provided by the online education platform may include the code segment "<iframe src=". / src1.html">.< / iframe> ", indicating that the main page has been approved <iframe>The label inserts another sub-page 1, which is an independent topic page to be embedded, and the path address is "src1.html”.
[0110] The source code of the above sub-page 1 can include multiple CSS style sheets and / or multiple JavaScript scripts. For example, the source code of the above sub-page 1 can include the CSS style sheet 1 "<style>body {font-family:'Microsoft YaHei', sans-serif;background-color: #fff;}” and the JavaScript script 1 "<script>const correctAnswers = 'A'; if (isCorrect) {alert('回答正确!');}< / script>”. The above CSS style sheet 1 can be used to set the font of the text in the web page and the background color of the web page, and the above JavaScript script 1 can be used to display the prompt message "回答正确” on the page when the user answers correctly.
[0111] It should be noted that in the embodiment of the present application, the data encapsulation module will record the start time when the first question card is embedded into the application page (that is, the main page provided by the online education platform), and the end time when the last question card is embedded into the application page (that is, the main page provided by the online education platform), and use the time interval between these two times as the above data encapsulation duration T1. That is to say, in the embodiment of the present application, the above data encapsulation duration T1 may not be an estimated value obtained by the electronic device, but an actual value obtained after the data encapsulation module actually finishes data encapsulation.
[0112] S403: The algorithm decision module requests the first resource loading duration T2.
[0113] S404: The resource request module returns the first resource loading duration T2 to the algorithm decision module.
[0114] The above first resource is the web page resource requested by the resource request module for the first time (including the HTML code, CSS style sheet, JavaScript script and other related resources of the web page), that is, the web page resource that cannot be stored in the resource storage module of the electronic device. Specifically, when the question card selected by the user is selected for the first time by the user to form a test paper, or the web page resource corresponding to the question card has been updated by the partner during this test paper formation, then the web page resource of this question does not exist in the resource storage module, and the web page resource of this question card can be included in the above first resource.
[0115] Before obtaining all web page resources corresponding to the question card selected by the user, the resource request module can count the data size of all first resources, and estimate the loading time T2 of the first resource in combination with the network signal strength (e.g., the power intensity of the received signal (RSSI)), and send the time to the algorithm decision module.
[0116] Specifically, the resource request module can convert RSSI into a theoretical physical rate and further estimate the actual throughput of the data based on the theoretical physical rate. The actual throughput is approximately equal to the theoretical physical rate multiplied by an efficiency coefficient, where the efficiency coefficient is typically between 0.4 and 0.7. After obtaining the actual throughput, the resource request module can combine the resource size (datasize) of the first resource to calculate the loading time T2 of the first resource. The specific calculation method can be expressed as T2 = datasize / throughput.
[0117] S405: The resource request module requests the first resource.
[0118] S406: The network service node returns the first resource to the resource request module.
[0119] S407: The resource request module caches the first resource to the resource storage module.
[0120] S408: The resource storage module returns a cache success indication message to the resource request module.
[0121] After receiving the request instruction from the algorithm decision module to obtain the duration of the first resource request, the resource request module will also synchronously request the first resource from the network service node, and save the first resource to the resource storage module after successfully requesting the first resource, so that when the resource request module obtains the resources in the first resource again, it can load the resources directly from the resource storage module more quickly. When storing the first resource in the resource storage module, the resource request module can also add resource version tags to the web page resources corresponding to each question card in the first resource; after the first resource is successfully stored in the resource storage module, the resource storage module can return a cache success indication message to the resource request module to notify the resource request module that the first resource has been successfully cached locally.
[0122] S409: The algorithm decision module requests the second resource loading time T3.
[0123] S410: The resource request module returns the second resource loading time T3 to the algorithm decision module.
[0124] The second resource mentioned above refers to web page resources that are not requested for the first time by the resource request module, that is, web page resources that have already been stored in the resource storage module of the electronic device. Specifically, if the question card selected by the user is not selected for the first time, the web page resources of the question card already exist in the resource storage module, and the web page resources of the question card can be included in the second resource mentioned above.
[0125] As can be seen from the foregoing description, the web page resources corresponding to each question may include one or more of the following: HTML code, CSS stylesheets, JavaScript scripts, and other related resources (such as videos, images, etc.). Different types of resources are loaded in different ways, and therefore the loading time of different types of resources in the resource storage module is also different. For example, the average time to load a CSS stylesheet from the resource storage module may be s1 seconds, while the average time to load a JavaScript script may be s2 seconds; where s1 ≠ s2, and the specific values of s1 and s2 can be determined based on a large number of experimental results, and these values can be stored in the electronic device when it leaves the factory.
[0126] In this embodiment of the application, before obtaining all web page resources corresponding to the question card selected by the user, the resource request module can count the total number of each type of resource in the second resource (taking CSS style sheets as an example, assuming that the user selected three questions, and the CSS style sheets contained in the web page resources corresponding to each question are 1, 2, and 3 respectively, then the total number of CSS style sheets in the second resource is 6, and so on), and estimate the loading time T3 of the second resource in combination with the average loading time of each type of resource determined by the experimental results, and send the loading time to the algorithm decision module.
[0127] Specifically, the second resource loading time T3 can be calculated as T3=s1*n1+s2*n2+s3*n3+…; where "*" represents multiplication, n1, n2, n3 represent the total number of different types of resources contained in the second resource; and s1, s2, s3 represent the average loading time of the corresponding type of resource.
[0128] S411: The algorithm decision module requests the second resource.
[0129] S412: The resource storage module returns the second resource.
[0130] Similarly, after receiving the request instruction from the algorithm decision module to obtain the duration of the second resource request, the resource request module will also load the second resource from the resource storage module in a synchronous manner.
[0131] It should be noted that the process of the resource request module obtaining the first resource from the network service node and the process of obtaining the second resource from the resource storage module both require a certain amount of time. Therefore, steps S405-S408 and steps S411-S412 can actually be executed after the subsequent step S419.
[0132] S413: Algorithm decision module requests resource parsing time T4.
[0133] S414: The resource parsing module returns the resource parsing time T4 to the algorithm decision module.
[0134] The algorithm decision module will further obtain the resource parsing time T4 of the web page resources from the resource parsing module.
[0135] As can be seen from the foregoing description, the resource parsing module is used to identify external resource links (such as external CSS stylesheets, external JavaScript scripts, images, fonts, etc.) referenced in web page resources and request to download these resources.
[0136] Specifically, when a specific HTML tag (e.g.) is identified<link> When a resource is identified as an external resource (e.g., a tag is provided), the resource resolution module can determine that the resource is an external resource. For each external resource identified by the resource resolution module, it adds it to the loading queue and initiates a network request to the network service node to retrieve the resource.
[0137] Similarly, different types of resources are parsed in different ways, and therefore the parsing time for different types of resources is also different. Therefore, in this embodiment of the application, the resource parsing module can count the total number of various external resources in the web page resources, and estimate the above-mentioned resource parsing time T4 by combining the average parsing time of each type of resource determined by the experimental results, and send the time to the algorithm decision module.
[0138] Specifically, the resource parsing time T4 can be calculated as T4=r1*m1+r2*m2+r3*m3+…; where "*" represents the product operation, m1, m2, m3 represent the total number of different types of external resources in the first resource and the second resource; and r1, r2, r3 represent the average parsing time of the corresponding type of external resource.
[0139] S415: The algorithm decision module requests DOM parsing time T5.
[0140] S416: The DOM parsing module returns the DOM parsing time T5 to the algorithm decision module.
[0141] The algorithm decision module requests the DOM parsing time T5 from the DOM parsing module.
[0142] Specifically, the DOM parsing module can estimate the DOM parsing time based on the total number of tags contained in the web page resources and the average parsing time Q of each tag determined by experimental data.
[0143] Understandably, the web page resource corresponding to each question card selected by the user may contain multiple tags, such as the root tag.<html> ,<head> ,<title> <body> etc. The DOM parsing module can count the number of tags of the web page resources corresponding to each question card, and sum them to get the total number of tags N of the web page resources corresponding to all selected question cards; for example, assuming that the number of tags of the web page resources corresponding to the 3 question cards selected by the user are N1, N2, and N3 respectively, then N = (N1 + N2 + N3). Accordingly, the specific calculation method of the above DOM parsing time T5 can be expressed as T5 = N * Q + Nbase1, where "*" represents the product operation, and Nbase1 represents the basic parsing time, that is, the time required for the DOM parsing module to perform DOM parsing on the main page provided by the online education platform when the user does not select any question cards. <b class="d_n">
[0144] S417: The algorithm decision module requests the web page rendering time T6. <b class="d_n">
[0145] S418: The web page rendering module returns the web page rendering time T6 to the algorithm decision module. <b class="d_n">
[0146] The algorithm decision module requests the webpage rendering time T6 from the webpage rendering module. <b class="d_n">
[0147] Specifically, the webpage rendering module can estimate the above DOM parsing time based on the total number N of tags contained in the webpage resources corresponding to all selected question cards, and the average rendering time P of each tag determined by experimental data. <b class="d_n">
[0148] Correspondingly, the above webpage rendering time T6 can be specifically calculated as T6=N*P+Nbase2, where "*" represents the product operation, and Nbase2 represents the base rendering time, that is, the time required for the webpage rendering module to render the main page provided by the online education platform when the user does not select any question cards. <b class="d_n">
[0149] S419: The algorithm decision module performs a weighted sum of all times to obtain the total HTML page rendering time T7.
[0150] After obtaining the above data encapsulation time T1, first resource loading time T2, second resource loading time T3, resource parsing time T4, DOM parsing time T5 and webpage rendering time T6, the algorithm decision module can determine the total HTML page rendering time T7 based on at least two of the above multiple times. The total HTML page rendering time T7 is the estimated value of the electronic device for the time from responding to the user's volume grouping operation to the completion of volume grouping.
[0151] Understandably, the data encapsulation time T1 mentioned above is the actual value obtained by the electronic device after completing the data encapsulation. The first resource loading time T2, the second resource loading time T3, the resource parsing time T4, the DOM parsing time T5, and the webpage rendering time T6 mentioned above are all estimated values of the time consumed by the electronic device for each task before the corresponding task is executed. Based on this, the specific method by which the algorithm decision module determines the total HTML page rendering time T7 may include, but is not limited to, the following methods:
[0152] Method 1: The above data encapsulation time T1, first resource loading time T2, second resource loading time T3, resource parsing time T4, DOM parsing time T5 and webpage rendering time T6 are accumulated.
[0153] The specific calculation method of the total rendering time T7 of the above HTML page can be expressed as T7 = (T1 + T2 + T3 + T4) + max(T5, T6) + Tex ; where max(T5, T6) represents the maximum value of T5 and T6, Tex represents the reserved buffer time, and Tex can be a fixed value or positively correlated with the number of question cards selected by the user.
[0154] It is understood that during the HTML page rendering process, DOM parsing and page rendering are actually performed concurrently. The DOM parsing process is the process of constructing a DOM tree from the HTML byte stream, while page rendering refers to the entire process from constructing the DOM tree to finally drawing pixels onto the screen.
[0155] In the actual rendering process, in order to parse the HTML and display the content as quickly as possible, the electronic device does not wait until the entire DOM tree is built before starting page rendering, but gradually renders the already parsed parts of the content. For example, in some cases, the electronic device will first display part of the page content (such as the header), and the rest of the page content will be gradually loaded in subsequent processes.Therefore, in the implementation of this application, when calculating the total rendering time T7 of the above-mentioned HTML page, the algorithm decision module does not need to simultaneously add the DOM parsing time T5 and the web page rendering time T6, but only needs to take the larger value between the two, that is, max(T5, T6), and add it to the other estimated time.
[0156] Furthermore, the aforementioned reserved buffer time T ex can be considered as an additional estimated time actively added by the algorithm decision module. This is mainly used to cope with unforeseen delays and uncertainties during the HTML webpage rendering task, so that after the user is notified of the total page rendering time T7, the user can feel that the electronic device completes the task on time, thus improving the user experience. Optionally, the value of the aforementioned reserved buffer time T ex can be set to 0, that is, the algorithm decision module can also not add an additional estimated time, and only use (T1+T2+T3+T4)+max(T5, T6) as the total HTML page rendering time T7.
[0157] It is understood that, in this embodiment of the application, although the data encapsulation duration T1 is a fixed value, the data encapsulation operation is essentially a subtask in the HTML page rendering task. This data encapsulation operation actually occurs after the user performs the volume assembly operation. Even if the electronic device has already completed the above-mentioned data encapsulation operation when the total HTML page rendering time T7 is subsequently output to the user, that is, the user may have waited for a duration T1, the electronic device can still add the duration T1 to the total HTML page rendering time. In this way, on the one hand, the electronic device can estimate the total HTML page rendering time from the perspective of the overall task; on the other hand, the above-mentioned data encapsulation duration T1 can also play the same function as the above-mentioned reserved buffer time T ex , to deal with unforeseen delays and uncertainties in the HTML web page rendering task, and even create the feeling for the user that the electronic device has completed the task ahead of schedule.
[0158] Method 2: Accumulate the first resource loading time T2, the second resource loading time T3, the resource parsing time T4, the DOM parsing time T5, and the webpage rendering time T6.
[0159] That is, the specific calculation method of the total time T7 for rendering the above HTML page can be expressed as T7 = (T2 + T3 + T4) + max(T5, T6) + TeX .
[0160] It can be understood that in the embodiments of the present application, since the data encapsulation process has been completed when calculating the total rendering time T7 of the above HTML page, that is, the user may have waited for the duration T1. Therefore, the electronic device may not add the duration T1 to the total rendering time of the HTML page. In this way, starting from when the user learns the total rendering time T7 of the above HTML page from the electronic device, the actual waiting time of the user will be closer to the duration of the total rendering time T7 of the above HTML page; in the user's view, the estimation of the total rendering time of the HTML page by the electronic device will be more accurate.
[0161] In the embodiments of the present application, the web page obtained by embedding each independent web page (such as each of the above-mentioned question cards selected by the user) into the application page (such as the application page provided by the online education platform) through the <iframe> tag can be called a "web page to be rendered"; each question card (corresponding web page) selected by the user can be called "at least one sub-web page"; the above-mentioned data encapsulation duration T1, the first resource loading duration T2, the second resource loading duration T3, the resource parsing duration T4, the DOM parsing duration T5, and the web page rendering duration T6 can be respectively called "the fifth duration", "the first loading duration", "the second loading duration", "the second duration", "the third duration", "the fourth duration", the cumulative value of the first resource loading duration T2 and the second resource loading duration T3 can be called "the first duration", and the total rendering time T7 of the HTML page can be called "the target duration".
[0162] Next, in combination with the foregoing related description of Figure 4, a test paper compilation method provided by the present application will be further introduced. Implementing this method, the electronic device can estimate the total rendering time of the HTML page through the foregoing estimation method, and during the process of the electronic device performing the rendering task of the HTML page, the electronic device can prompt the user with the estimated value of the total rendering time of the HTML page, and / or prompt the user with the progress information of the HTML page rendering task based on this estimated value, so that the user has a stronger sense of control over the process of the electronic device performing the HTML page rendering task, thereby reducing the waiting feeling of the user during the HTML page rendering process.
[0163] As shown in Figure 5, the test paper compilation method provided by this application may include but is not limited to the following steps:
[0164] S501: The electronic device detects the user's test paper compilation determination operation.
[0165] The above-mentioned electronic device may be a mobile phone, a tablet computer, a wearable device, a vehicle-mounted device, an augmented reality (AR) / virtual reality (VR) device, a laptop computer, an ultra-mobile personal computer (UMPC), a netbook, a personal digital assistant (PDA), etc. This application does not impose any restrictions on the specific type of this electronic device. Specifically, the above-mentioned electronic device may be the electronic device described in the relevant explanations of Figure 3 or Figure 4.
[0166] The above-mentioned test paper compilation determination operation may be a click operation on the determination control contained in the test paper information input box after the user inputs test paper information in the test paper information input box. For specific details, reference may be made to the relevant explanations of Figure 1 mentioned above, which will not be elaborated here.
[0167] S502: The electronic device encapsulates the question data using the iframe tag.
[0168] After the electronic device detects the above-mentioned test paper compilation determination operation, the electronic device starts to encapsulate the question data using the iframe tag, that is, embeds each selected question card (sub-page) into the application page (i.e., the main page provided by the online education platform) through the iframe tag.
[0169] After the data encapsulation is completed, the electronic device executes the subsequent step S503. As can be seen from the foregoing description, at this time, the electronic device can obtain the actual duration T1 consumed by the data encapsulation task.
[0170] S503: The electronic device estimates the paper generation duration and displays the corresponding paper generation progress information according to the paper generation duration.
[0171] After the data encapsulation is completed, the electronic device can split the web resources contained in the question data, that is, the CSS style sheets, JavaScript scripts, etc. contained in the web resources corresponding to each selected question card of the user (including the first resources not stored locally and the second resources already stored locally); and according to the method shown in the foregoing Figure 4, sequentially obtain the loading duration T2 of the first resource, the loading duration T3 of the second resource, the resource parsing duration T4, the DOM parsing duration T5, and the web page rendering duration T6, and determine the total HTML page rendering duration T7 based on these durations. The total HTML page rendering duration T7 is also the above-mentioned paper generation duration.
[0172] After obtaining the total HTML page rendering duration T7, the electronic device can prompt the user with the total HTML page rendering duration T7 during the paper generation process (that is, within the duration from the completion of data encapsulation to the display of the paper generation result by the electronic device), and / or prompt the user with the progress information of the HTML page rendering task based on this estimated value.
[0173] Next, the user interface displayed when the electronic device prompts the user with the total HTML page rendering duration T7 and / or the progress information will be described in conjunction with Figures 6-9:
[0174] 1) Only prompt the user with the total HTML page rendering duration T7, please refer to Figure 6.
[0175] As shown in Figure 6, after obtaining the total time T7 for rendering the HTML page, the electronic device can display a user interface 61 as shown in Figure 6. The user interface 61 may include a loading prompt box 611. The loading prompt box 611 may display a loading indicator 611a and loading indication information 611b.
[0176] Among them, the loading indicator 611a keeps rotating until the electronic device displays the test paper generation result. In addition to the text "Generating test paper, please wait a moment", the loading indication information 611b may also include the text information "Expected waiting time: 1 min" displayed based on the above total time T7 for rendering the HTML page (assuming the specific value of T7 here is 1 min). The loading indicator 611a and the loading indication information 611b can together provide feedback to the user, indicating that the test paper generation operation is in progress, and can prompt the user that it will take approximately 1 min from observing this user interface 61 to see the finally generated test paper result by the electronic device.
[0177] In the embodiment of the present application, the loading indication information 611b may be referred to as "prompt information".
[0178] 2) Prompt the user of the total time T7 for rendering the HTML page, the progress bar, and the remaining waiting duration. Please refer to Figure 7.
[0179] As shown in Figure 7, after obtaining the total time T7 for rendering the HTML page, the electronic device can display a user interface 71 as shown in Figure 7. The user interface 71 may include a loading prompt box 711.In the loading prompt box 711, a loading indicator 711a, loading indication information 711b, and a progress bar 711c can be displayed.
[0180] Among them, the loading indicator 711a keeps rotating until the electronic device displays the test paper generation result. In addition to the text "Generating test paper, please wait a moment", the loading indication information 711b can also include the text information "Expected waiting time: 1 min" displayed based on the total HTML page rendering time T7 (assuming the specific value of T7 here is 1 min), and the text information "Still need to wait 50 s" displayed based on the remaining waiting time Trest. Initially, the entire progress bar 711c can be filled with a light color and gradually filled with a dark color, and the proportion of the dark filled area can gradually increase over time.
[0181] The above remaining waiting time Trest can be calculated from the total HTML page rendering time T7 and the elapsed waiting time Twait. The specific calculation method can be Trest = (T7 - Twait). The elapsed waiting time Twait represents the time elapsed since the electronic device displays the user interface 71. It can be understood that as time goes by, the value of the elapsed waiting time Twait will become larger and the remaining waiting time Trest will be correspondingly shortened. Therefore, the electronic device can update the value of Trest displayed on the interface in real time as time goes by.
[0182] The loading indicator 711a, loading indication information 711b, and progress bar 711c can together provide feedback to the user, indicating that the test paper generation operation is in progress, and prompting the user that they need to wait approximately 1 min in total to see the final test paper generation result of the electronic device, and at any time prompting the user of the remaining waiting time, which can further reduce the user's waiting feeling.
[0183] In the embodiment of the present application, the loading indication information 711b and the progress bar 711c can be collectively referred to as "prompt information".
[0184] 3) Prompt the user of the total HTML page rendering time T7, the progress bar, and the progress percentage. Please refer to Figure 8.
[0185] As shown in Figure 8, after obtaining the total time T7 for rendering the HTML page, the electronic device can display a user interface 81 as shown in Figure 8. The user interface 81 can include a loading prompt box 811. The loading prompt box 811 can display a loading indicator 811a, loading indication information 811b, a progress bar 811c, and a progress percentage 811d.
[0186] Among them, the loading indicator 811a keeps rotating until the electronic device displays the test paper generation result. In addition to the text "Generating test paper, please wait a moment", the loading indication information 811b can also include the text information "Total duration 1min" displayed based on the above total time T7 for rendering the HTML page (assuming the specific value of T7 here is 1min). The progress bar 811c can be initially filled as a light color as a whole and gradually filled as a dark color, and the proportion of the dark-filled area can gradually increase over time. The specific value of the progress percentage 811d can be the proportion per of the dark-filled area, and this proportion can be calculated from the above total time T7 for rendering the HTML page and the waiting duration Twait. The specific calculation method can be per = (Twait / T7) * 100%.
[0187] The loading indicator 811a, the loading indication information 811b, and the progress bar 811c can together provide feedback to the user, indicating that the test paper generation operation is in progress, and prompting the user that they need to wait approximately 1min in total to see the finally generated test paper result by the electronic device, and at any time prompting the user of the task completion percentage, which can effectively reduce the user's waiting feeling.
[0188] In the embodiment of the present application, the loading indication information 811b, the progress bar 811c, and the progress percentage 811d can be collectively referred to as "prompt information".
[0189] 4) Prompt the user of the total time T7 for HTML page rendering, the time consumption of each subtask, and the corresponding progress bar. Please refer to Figure 9.
[0190] As shown in (A) of Figure 9, after obtaining the total time T7 for HTML page rendering, the electronic device can display the user interface 91 as shown in (A) of Figure 9. The user interface 91 may include a loading prompt box 911. The loading prompt box 911 may display a loading indicator 911a, a loading indication message 911b, a progress bar 911c, a progress bar 911d, a progress bar 911e, a progress bar 911f, and a loading indication message 911g.
[0191] Among them, the loading indicator 911a keeps rotating until the electronic device displays the test paper compilation result. In addition to the text "Compiling test paper, please wait a moment", the loading indication message 911b may also include the text information "Total duration 1min" displayed based on the above-mentioned total time T7 for HTML page rendering (assuming the specific value of T7 here is 1min). The progress bars 911c, 911d, 911e, and 911f may respectively correspond to the loading of the aforementioned web page resources (including the first resource and the second resource), resource parsing, DOM parsing, and web page rendering. When the electronic device starts to execute one of these tasks, the progress bar corresponding to this task starts to be filled with a dark color, and the loading indication message 911g can be used to prompt the user of the task name that the electronic device is executing and the estimated duration of the electronic device for this task.
[0192] Taking the user interface 91 shown in (A) of Figure 9 as an example, at this time, the progress bar 911c starts to be filled with a dark color, and the progress bars 911d, 911e, and 911f have not started to be filled with a dark color, which indicates that the electronic device is obtaining the aforementioned web page resources at this time. Therefore, in addition to the text "Requesting network resources" that can be included in the loading indication information 911g, it can also include the text information "Total duration 20s" displayed based on the above first resource loading duration T2 and the second resource loading duration T3 (assuming that the specific value of (T2 + T3) here is 20s). Similarly, as the electronic device continues to load the web page resources, the proportion of the dark-filled area of the progress bar 911c can gradually increase over time; after the web page resources are loaded, the progress bar 911c can be completely filled with a dark color. Subsequently, the electronic device can continue to execute the next task, that is, to parse the above web page resources, and so on.
[0193] For example, when the subsequent electronic device has completed the task of parsing the above web page resources and is executing the task of parsing the DOM, the electronic device can display the user interface 91 shown in (B) of Figure 9. It can be seen from the user interface 91 that at this time, the progress bars 911c and 911d are completely filled with a dark color, the progress bar 911e is being filled with a dark color, and the progress bar 911f has not started to be filled with a dark color, which indicates that the electronic device has completed the loading and parsing tasks of the web page resources at this time and is parsing the DOM but has not completed. Then, in addition to the text "Parsing DOM" that can be included in the loading indication information 911g, it can also include the text information "Total duration 10s" displayed based on the above DOM parsing duration T5 (assuming that the specific value of the aforementioned T5 here is 10s). Similarly, as the electronic device continues to parse the DOM, the proportion of the dark-filled area of the progress bar 911e can gradually increase over time; after the DOM is parsed, the progress bar 911e can be completely filled with a dark color.
[0194] The loading indicator 911a, loading indication information 911b, progress bar 911c, progress bar 911d, progress bar 911e, progress bar 911f, and loading indication information 911g in the loading prompt box 911 can together provide feedback to the user, indicating that the test paper generation operation is in progress, and prompting the user that it will take about 1 minute in total to see the test paper generation result finally generated by the electronic device. At the same time, it can prompt the user of the completion percentage of each subtask at any time. The completion status of each subtask can be shown to the user by the progress bar corresponding to the subtask, which can more effectively reduce the user's waiting feeling.
[0195] In the embodiment of the present application, the loading indication information 911b, progress bar 911c, progress bar 911d, progress bar 911e, progress bar 911f, and loading indication information 911g can together be referred to as "prompt information".
[0196] S504: When the web page resource contains a first resource not stored locally, the electronic device requests the first resource from the network service node and caches the requested first resource locally.
[0197] S505: When the web page resource contains a second resource already stored locally, the electronic device obtains the second resource cached locally.
[0198] The above-mentioned first resource is the web page resource requested by the resource request module for the first time, that is, the web page resource not stored in the resource storage module of the electronic device. The above-mentioned second resource is the web page resource requested by the resource request module non-first time, that is, the web page resource already stored in the resource storage module of the electronic device.
[0199] During the resource loading process, the electronic device determines whether the web page resource is stored in the local storage space of the electronic device. If the web page resource to be loaded is not stored in the local storage space of the electronic device, the electronic device will request the web page resource from the network service node; otherwise, the electronic device can directly load the web page resource from the local storage space.
[0200] Taking the network architecture shown in Figure 10 as an example for illustration.
[0201] As shown in Figure 10, the algorithm application layer, the algorithm framework layer, and the basic service layer can be included in the software architecture of the electronic device for implementing this method. For specific information about this software architecture, reference can be made to the relevant description of Figure 3 mentioned above, which will not be elaborated here.
[0202] The network content delivery network (CDN) 1001 is a distributed network, that is, the network service node for the electronic device to obtain web page resources. Specifically, it can be the network service node closest to the electronic device. The electronic device can access the network CDN 1001 through the network driver included in the basic service layer and load web page resources that have not been stored in the local memory 1002 of the electronic device from this network CDN 1001.
[0203] The local memory 1002 can be a hardware device built into the electronic device. Specifically, it can be the internal memory or external memory of the electronic device, and can be used to store web page resources that the electronic device has historically loaded from the network CDN 1001, so that the electronic device can more quickly load web page resources directly from the local memory 1002 in the future. When the electronic device determines that the web page resources it needs to obtain have been stored in the local memory 1002, the electronic device can load the web page resources from the local memory 1002 through the file management module or database management module included in the basic service layer and further transfer them to the algorithm application layer.
[0204] S506: The electronic device analyzes the web page resources.
[0205] The electronic device identifies the external resource links (such as external CSS style sheets, external JavaScript scripts, pictures, fonts, etc.) referenced in the web page resources (including the aforementioned first resource and second resource), and requests to download these resources from the network service node.
[0206] S507: The electronic device analyzes the DOM.
[0207] S508: The electronic device renders the web page content.
[0208] In an embodiment of the present application, the electronic device can concurrently execute step S507 and step S508, that is, the electronic device concurrently executes the DOM parsing of the web page resources and the rendering of the web page content.
[0209] Combined with the foregoing description, it can be seen that downloading some external resources is required for parsing web page resources. Therefore, the DOM parsing process may be blocked by these external resources. For example, when a JavaScript script embedded with a normal <script> tag (without the async or defer attribute) is detected during DOM parsing, the electronic device may need to immediately stop DOM parsing, attempt to obtain and immediately execute the script, and only after the script execution is completed will the electronic device continue to execute DOM parsing. However, in order to improve the user experience, the electronic device does not wait until the DOM is completely parsed before starting to render, but gradually processes the already parsed partial content. During the entire DOM parsing process, once there is displayable content, the electronic device will attempt to perform layout and drawing to display the rendered web page content to the user.
[0210] S509: The electronic device displays the result of generating a test paper.
[0211] After the electronic device completes the DOM parsing and the rendering of the web page content, the electronic device can display the complete result of generating a test paper, that is, the electronic device can display the test paper file in a specified format (such as PDF format) obtained by generating a test paper in the interface. Specifically, reference can be made to the relevant description of the user interface 13 shown in (B) of Figure 2 above, which will not be elaborated here.
[0212] In addition, in order to improve the learning efficiency of users and make the user's knowledge system more solid, some online education platforms can establish a mapping relationship between questions and knowledge points. After the user selects question cards to generate a test paper, the electronic device can obtain the knowledge point data (which can be text, video) associated with each question card. These knowledge point data can provide users with function information such as question analysis, video explanation, and expansion of similar questions. After obtaining the knowledge point data, the electronic device can also encapsulate the web page corresponding to the knowledge point data through the iframe tag, and in the subsequent process, perform operations such as resource loading, resource parsing, DOM parsing, and web page rendering on the web page resources corresponding to the above knowledge data and the web page resources of the question data together to obtain the final result of generating a test paper.
[0213] Based on the above description, Figure 11 shows the specific process of another test paper generation method provided by the present application when establishing a mapping relationship between questions and knowledge points. As shown in Figure 11, the test paper generation method may include but is not limited to the following steps:
[0214] S1101: The electronic device detects the user's test paper generation determination operation.
[0215] S1102: Obtain the knowledge point data associated with the questions selected by the user.
[0216] S1103: The electronic device encapsulates the question data and the knowledge point data using the iframe tag.
[0217] The specific information of step S1101 can refer to the relevant description of step S501 in Figure 5 mentioned above, which will not be elaborated here.
[0218] After the electronic device detects the above test paper generation determination operation, the electronic device can obtain the knowledge point data associated with the questions selected by the user for test paper generation. These knowledge point data can also be independent web page contents and also support being embedded by the electronic device into the main page provided by the online education platform through the iframe tag.
[0219] After that, the electronic device starts to encapsulate the question data and the above knowledge point data using the iframe tag, that is, embeds each selected question card (sub-page) and each web page (sub-page) of the knowledge point data into the application page (i.e., the main page provided by the online education platform) through the iframe tag.
[0220] After the data encapsulation is completed, the electronic device then executes the subsequent step S1104. Combining the above description, it can be seen that since the electronic device also needs knowledge point resources for data encapsulation, the actual time consumed for the data encapsulation task obtained by the electronic device at this time can be T1'.
[0221] S1104: The electronic device estimates the time required for generating a test paper and displays the corresponding test paper generation progress information based on the time required for generating the test paper.
[0222] After the data encapsulation is completed, the electronic device can start to load web page resources. It should be noted that, in the embodiment of the present application, the web page resources not only include the web page resources corresponding to the question cards, but also include the web page resources corresponding to the above-mentioned knowledge point data.
[0223] Similarly, if the web page resources corresponding to the knowledge point data are the web page resources first obtained by the electronic device, then the web page resources can also be considered to be included in the aforementioned first resource, otherwise the web page resources can be considered to be included in the above-mentioned second resource case. Correspondingly, according to the method shown in the aforementioned Figure 4, the electronic device can sequentially obtain the loading time T2' of the first resource, the loading time T3' of the second resource, the resource parsing time T4', the DOM parsing time T5', and the web page rendering time T6', and determine the total HTML page rendering time T7' based on these times. The total HTML page rendering time T7' is also the time required for generating the test paper as mentioned above.
[0224] After obtaining the total HTML page rendering time T7', the electronic device can, during the test paper generation process (that is, within the time period from the completion of data encapsulation to the display of the test paper generation result by the electronic device), prompt the user with the total HTML page rendering time T7', and / or prompt the user with the progress information of the HTML page rendering task based on this estimated value; specifically, reference can be made to the relevant descriptions of the aforementioned Figures 6-9, which will not be elaborated here.
[0225] It can be understood that if the question cards selected by the user in the embodiment of the present application are exactly the same as those selected by the user in the method embodiment shown in the aforementioned Figure 4, then T1' > T1, T2' > T2, T3' > T3, T4' > T4, T5' > T5, T6' > T6, T7' > T7.
[0226] S1105: When the web page resource contains a first resource that is not stored locally, the electronic device requests the first resource from the network service node and caches the requested first resource locally.
[0227] S1106: When the web page resource contains a second resource that is already stored locally, the electronic device obtains the second resource cached locally.
[0228] S1107: The electronic device analyzes the web page resource.
[0229] The electronic device identifies external resource links (such as external CSS style sheets, external JavaScript scripts, images, fonts, etc.) referenced in the web page resource (including the aforementioned first resource and second resource), and requests the network service node to download these resources.
[0230] S1108: The electronic device analyzes the DOM.
[0231] S1109: The electronic device renders the web page content.
[0232] S1110: The electronic device displays the result of generating test papers.
[0233] For the specific information of steps S1105 - S1110, reference can be made to the relevant descriptions of steps S504 - S509 in Figure 5 above, which will not be elaborated here.
[0234] It should be noted that both the first resource and the second resource may simultaneously include the web page resource of the question card and the web page resource of the knowledge point data; and when performing resource analysis, DOM analysis, and web page rendering on the web page resource of the question card, the electronic device will also simultaneously perform resource analysis, DOM analysis, and web page rendering on the web page resource of the knowledge point data.
[0235] Next, an exemplary electronic device provided in an embodiment of the present application will be introduced.
[0236] Figure 12 is a schematic structural diagram of an electronic device 100 provided in an embodiment of the present application.The electronic device may be a mobile phone, tablet computer, wearable device, in-vehicle device, augmented reality (AR) / virtual reality (VR) device, laptop computer, ultra-mobile personal computer (UMPC), netbook, personal digital assistant (PDA), or dedicated camera (such as SLR camera, point-and-shoot camera), etc. This application does not impose any restrictions on the specific type of the electronic device.
[0237] The electronic device 100 may include a processor 110, an internal memory 191, an antenna 1, an antenna 2, a mobile communication module 150, a wireless communication module 160, a sensor module 180, a display screen 194, etc. The sensor module 180 may include a touch sensor 180K.
[0238] It is understood that the structures illustrated in the embodiments of the present invention do not constitute a specific limitation on the electronic device 100. In other embodiments of this application, the electronic device 100 may include more or fewer components than illustrated, or combine some components, or split some components, or have different component arrangements. The illustrated components may be implemented in hardware, software, or a combination of software and hardware.
[0239] The processor 110 may include one or more processing units, wherein different processing units may be independent devices or integrated into one or more processors. The processor 110 may also include a memory for storing instructions and data. In some embodiments, the memory in the processor 110 is a cache memory. This memory can store instructions or data that the processor 110 has just used or is recurring. If the processor 110 needs to reuse the instruction or data, it can directly retrieve it from the memory. This avoids repeated accesses, reduces the waiting time of the processor 110, and thus improves the efficiency of the system.
[0240] The wireless communication function of the electronic device 100 can be realized by antenna 1, antenna 2, mobile communication module 150, wireless communication module 160, modem processor and baseband processor, etc.
[0241] Antenna 1 and antenna 2 are used to transmit and receive electromagnetic wave signals. Each antenna in the electronic device 100 can be used to cover one or more communication frequency bands. Different antennas can also be reused to improve antenna utilization. For example, antenna 1 can be reused as a diversity antenna for a wireless local area network. In some other embodiments, the antenna can be used in conjunction with a tuning switch.
[0242] The mobile communication module 150 can provide wireless communication solutions, including 2G / 3G / 4G / 5G, applied to the electronic device 100. In some embodiments, at least some functional modules of the mobile communication module 150 may be disposed in the processor 110. In some embodiments, at least some functional modules of the mobile communication module 150 and at least some modules of the processor 110 may be disposed in the same device.
[0243] The wireless communication module 160 can provide solutions for wireless communication applied to the electronic device 100, including wireless local area networks (WLAN) (such as wireless fidelity (Wi-Fi) networks), Bluetooth (BT), global navigation satellite system (GNSS), frequency modulation (FM), near field communication (NFC), infrared (IR), and other wireless communication technologies. The wireless communication module 160 can be one or more devices integrating at least one communication processing module. The wireless communication module 160 receives electromagnetic waves via the antenna 2, performs frequency modulation and filtering of the electromagnetic wave signals, and sends the processed signals to the processor 110. The wireless communication module 160 can also receive signals to be transmitted from the processor 110, perform frequency modulation and amplification on them, and convert them into electromagnetic waves for radiation via the antenna 2.
[0244] In some embodiments, the antenna 1 of the electronic device 100 is coupled to the mobile communication module 150, and the antenna 2 is coupled to the wireless communication module 160, so that the electronic device 100 can communicate with the network and other devices through wireless communication technology.
[0245] The electronic device 100 implements display functions through a GPU, a display screen 194, and an application processor. The GPU is a microprocessor for image processing, connected to the display screen 194 and the application processor. The GPU is used to perform mathematical and geometric calculations and for graphics rendering. The processor 110 may include one or more GPUs, which execute program instructions to generate or change display information.
[0246] The display screen 194 is used to display images, videos, etc. The display screen 194 includes a display panel. In some embodiments, the electronic device 100 may include one or N display screens 194, where N is a positive integer greater than 1.
[0247] The internal memory 191 can be used to store computer executable program code, which includes instructions. The processor 110 executes various functional applications and data processing of the electronic device 100 by running the instructions stored in the internal memory 191. The internal memory 191 may include a program storage area and a data storage area. The program storage area may store the operating system, at least one application program required for a function (such as sound playback function, image playback function, etc.), etc. The data storage area may store data created during the use of the electronic device 100 (such as audio data, phone book, etc.). In addition, the internal memory 191 may include high-speed random access memory, and may also include non-volatile memory, such as at least one disk storage device, flash memory device, universal flash storage (UFS), etc.
[0248] Touch sensor 180K, also known as a "touch panel". Touch sensor 180K can be disposed on display screen 194, and touch screen 180K and display screen 194 together form a touch screen, also known as a "touch screen". Touch sensor 180K is used to detect touch operations applied to or near it. Touch sensor can transmit the detected touch operation to application processor to determine the type of touch event. Visual output related to the touch operation can be provided through display screen 194. In some embodiments, touch sensor 180K may also be disposed on the surface of electronic device 100, in a different position than display screen 194.
[0249] In this embodiment of the application, the processor 110 calls the operating computer instructions stored in the internal memory 191 to cause the electronic device 100 to execute the HTML webpage rendering time estimation method or the volume assembly method in this embodiment of the application.
[0250] This application embodiment also provides a computer-readable storage medium storing a computer program, which, when executed by a processor, can implement the steps in the above-described method embodiments.
[0251] This application embodiment also provides a computer program product, including a computer program, which, when run on a processor, can implement the steps executed by the electronic device in the above-described method embodiments.
[0252] This application embodiment also provides a chip system, which includes a processing circuit interface circuit. The interface circuit is used to receive instructions and transmit them to the processing circuit. The processing circuit is used to run the instructions so that the chip system implements the steps performed by the electronic device in any method embodiment of this application.The chip system can be a single chip or a chip module composed of multiple chips.
[0253] The term "user interface (UI)" in the specification and drawings of this application refers to the medium interface through which an application or operating system interacts and exchanges information with the user. It realizes the conversion between the internal form of information and the form that the user can accept. The user interface of an application is the source code written in a specific computer language such as Java or Extensible Markup Language (XML). The interface source code is parsed and rendered on the terminal device, and finally presented as content that the user can recognize, such as images, text, buttons, and other controls. Controls, also known as widgets, are the basic elements of the user interface. Typical controls include toolbars, menu bars, text boxes, buttons, scroll bars, images, and text. The attributes and content of controls in the interface are defined through tags or nodes, such as XML through...<Textview> ,<ImgView> ,<VideoView> Nodes define the controls contained in the interface. A node corresponds to a control or property in the interface, and after parsing and rendering, the node is presented as the content visible to the user. In addition, many applications, such as hybrid applications, often contain web pages within their interfaces. A web page, also known as a page, can be understood as a special control embedded in the application interface. Web pages are source code written in a specific computer language, such as Hypertext Markup Language (HTML), Cascading Style Sheets (CSS), JavaScript, etc. The source code of a web page can be loaded and displayed as user-readable content by a browser or a web page display component with browser-like functionality. The specific content contained in a web page is also defined through tags or nodes in the web page's source code; for example, HTML uses tags or nodes to define the content. , ,<video> ,<canvas> Used to define the elements and attributes of a webpage.
[0254] The most common form of user interface is the graphical user interface (GUI), which refers to a user interface related to computer operation that is displayed in a graphical manner.It can be an interface element such as an icon, window, or control displayed on the screen of an electronic device. The control can include visual interface elements such as icons, buttons, menus, tabs, text boxes, dialog boxes, status bars, navigation bars, and widgets.
[0255] As used in the above embodiments, depending on the context, the term "when" can be interpreted as meaning "if..." or "after..." or "in response to determining..." or "in response to detecting...". Similarly, depending on the context, the phrase "when determining..." or "if (the stated condition or event) is interpreted as meaning "if determining..." or "in response to determining..." or "when (the stated condition or event) is detected" or "in response to detecting (the stated condition or event)".
[0256] In the above embodiments, implementation can be achieved entirely or partially through software, hardware, firmware, or any combination thereof. When implemented using software, it can be implemented entirely or partially in the form of a computer program product. The computer program product includes one or more computer instructions. When the computer program instructions are loaded and executed on a computer, all or part of the processes or functions described in the embodiments of this application are generated. The computer can be a general-purpose computer, a special-purpose computer, a computer network, or other programmable device. The computer instructions can be stored in a computer-readable storage medium or transmitted from one computer-readable storage medium to another. For example, the computer instructions can be transmitted from one website, computer, server, or data center to another website, computer, server, or data center via wired (e.g., coaxial cable, fiber optic, digital subscriber line) or wireless (e.g., infrared, wireless, microwave, etc.) means. The computer-readable storage medium can be any available medium that a computer can access or a data storage device such as a server or data center that integrates one or more available media. The available medium can be a magnetic medium (e.g., floppy disk, hard disk, magnetic tape), an optical medium (e.g., DVD), or a semiconductor medium (e.g., solid-state drive), etc.
[0257] Those skilled in the art will understand that all or part of the processes in the methods of the above embodiments can be implemented by a computer program instructing related hardware. The program can be stored in a computer-readable storage medium. When the program is executed, it can include the processes of the above method embodiments. The aforementioned storage medium includes various media capable of storing program code, such as ROM or random access memory RAM, magnetic disk or optical disk.
[0258] The above-described embodiments are only used to illustrate the technical solutions of this application, and are not intended to limit it. Although this application has been described in detail with reference to the foregoing embodiments, those skilled in the art should understand that modifications can still be made to the technical solutions described in the foregoing embodiments, or equivalent substitutions can be made to some of the technical features. These modifications or substitutions do not cause the essence of the corresponding technical solutions to deviate from the scope of the technical solutions of the embodiments of this application.< / iframe>
Claims
1. A method of estimation, characterized by, The method comprises: detecting a user's group paper determination operation, the group paper determination operation being used to generate a paper file of a target file type according to at least one question data selected by the user; determining a webpage corresponding to the at least one question data as at least one sub-webpage; determining a webpage to be rendered, the webpage to be rendered containing the at least one sub-webpage embedded through a tag, a main page of the webpage to be rendered being a webpage provided by an online education platform, and the at least one sub-webpage being a webpage corresponding to question data provided by the online education platform or a cooperative party of the online education platform; determining a target time length based on at least two of a first time length, a second time length, a third time length and a fourth time length, the target time length being a total estimated time length for completing a rendering task corresponding to the webpage to be rendered; the first time length being an estimated time consumption for loading webpage resources of the at least one sub-webpage, the first time length being determined based on network signal strength and / or a quantity of various types of data in the webpage resources of the at least one sub-webpage; the second time length being an estimated time consumption for loading external resources contained in the webpage resources of the at least one sub-webpage, the second time length being determined based on a quantity of various types of external resources in the webpage resources of the at least one sub-webpage; the third time length being an estimated time consumption for document object model (DOM) analysis of the webpage to be rendered, the third time length being determined based on a total quantity of tags contained in the webpage resources of the at least one sub-webpage; the fourth time length being an estimated time consumption for rendering the webpage to be rendered, the fourth time length being determined based on a total quantity of tags contained in the webpage resources of the at least one sub-webpage.
2. The method of claim 1, wherein, The method further comprises: displaying prompt information, the prompt information including the target time length and / or progress information determined based on the target time length, the progress information representing a completion progress of the rendering task corresponding to the webpage to be rendered.
3. The method according to claim 1 or 2, characterized in that, The webpage resources of the at least one sub-webpage include first resources and second resources, the first resources being webpage resources not stored in an electronic device, and the second resources being webpage resources already stored in the electronic device; the first time length is determined based on a first loading time length and a second loading time length; the first loading time length is an estimated time length for loading the first resources from a network service node, the first loading time length being determined based on network signal strength and / or a quantity of various types of data in the webpage resources of the at least one sub-webpage; the second loading time length is an estimated time length for loading the second resources from the electronic device locally, the second loading time length being determined based on a quantity of various types of data in the webpage resources of the at least one sub-webpage.
4. The method according to claim 1 or 2, characterized in that, Determining the target time length based on at least two of the first time length, the second time length, the third time length and the fourth time length comprises: determining the target time length based on a fifth time length and at least two of the first time length, the second time length, the third time length and the fourth time length, the fifth time length being a time consumption for data encapsulation of the at least one sub-webpage through an iframe tag.
5. The method of claim 3, wherein, The method further comprises: loading the first resources from the network service node; storing the first resources.
6. The method of claim 1 or 2, wherein, The determining the target time length based on at least two of the first time length, the second time length, the third time length, and the fourth time length comprises: The target time length is obtained by accumulating the reserved buffer time length and at least two of the first time length, the second time length, the third time length, and the fourth time length, and a value of the reserved buffer time length is greater than or equal to 0.
7. An electronic device, comprising: The electronic device comprises one or more processors, a memory, and a display screen. The memory is coupled to the one or more processors, and the memory is configured to store computer program codes including computer instructions, and the one or more processors are configured to invoke the computer instructions to cause the electronic device to perform the method according to any one of claims 1-6.
8. A chip system, characterized by The chip system is applied to an electronic device, and the chip system comprises one or more processors configured to invoke computer instructions to cause the electronic device to perform the method according to any one of claims 1-6.
9. A computer-readable storage medium comprising instructions, characterized in that, The instructions, when executed on an electronic device, cause the electronic device to perform the method according to any one of claims 1-6.
Citation Information
Patent Citations
Display device and method for loading webpage through browser
CN117807339A
Page rendering method, medium and computer equipment
CN118427466A